<div id="integration-guide">

<div class="ig-section" id="card-on-file">
<div class="ig-section-header">
<div class="ig-section-icon hosted"><i class="fas fa-id-card"></i></div>
<h2>Card on File</h2>
</div>
<p class="ig-section-desc" style="max-width:none;">Securely store a customer's card, then charge that saved card for later payments &mdash; unlocking use cases like subscriptions, instalments, or charges that happen after the customer has left, such as a no-show or cancellation fee.</p>

<p>Card on file lets you securely store a customer's card details during an initial payment so you can charge the same card again later, without asking them to enter their details each time. Teya stores and tokenises the card on your behalf: you keep a reference to the saved card &mdash; a <code>token_id</code> &mdash; and the raw card details never touch your systems, which helps reduce your PCI scope.</p>

<p>Every card-on-file arrangement involves two kinds of payment:</p>

<ul>
<li><strong>Customer-initiated</strong> &mdash; the customer is present and actively agrees that you can store the card and charge it again in future.</li>
<li><strong>Merchant-initiated</strong> &mdash; you charge the stored card on the customer's behalf, without them being present, following the terms they agreed to up front.</li>
</ul>

<p>The first payment is always customer-initiated. Later charges are usually merchant-initiated, but not always &mdash; a one-click checkout is customer-initiated too, even though the card is already saved.</p>

```admonition
icon: fas fa-exclamation-triangle
title: Consent comes first
content: Before you store a card, you must obtain and record the customer's agreement to save it and charge it again. That agreement — often called a mandate — defines when, how often, and for how much you can charge the card. It is what makes the later merchant-initiated payments valid.
```

<div class="ig-subsection">
<h3>Use cases</h3>
<p>Card on file supports three common patterns. They differ mainly in <strong>how many</strong> times you charge the card, <strong>how much</strong> each charge is, and <strong>when</strong> those charges happen.</p>

<div class="ig-nav-cards ig-nav-cards--three">
<div class="ig-nav-card ig-nav-card--static">
<div class="ig-nav-card-icon hosted"><i class="fas fa-repeat"></i></div>
<div class="ig-nav-card-title">Recurring payments</div>
<div class="ig-nav-card-desc">Charge the saved card automatically every billing cycle, until the customer cancels.</div>
<span class="ig-card-label">Ongoing &middot; same amount</span>
</div>
<div class="ig-nav-card ig-nav-card--static">
<div class="ig-nav-card-icon hosted"><i class="fas fa-list-ol"></i></div>
<div class="ig-nav-card-title">Instalments</div>
<div class="ig-nav-card-desc">Split one purchase into a fixed series of scheduled charges, until the total is paid off.</div>
<span class="ig-card-label">Fixed count &middot; known total</span>
</div>
<div class="ig-nav-card ig-nav-card--static">
<div class="ig-nav-card-icon hosted"><i class="fas fa-thumbtack"></i></div>
<div class="ig-nav-card-title">Charges on saved payment methods</div>
<div class="ig-nav-card-desc">Charge the card later, only if and when a defined event happens &mdash; a no-show, a cancellation, or a final bill.</div>
<span class="ig-card-label">On event &middot; variable</span>
</div>
</div>
</div>

<div class="ig-subsection">
<h3>How it works</h3>
<p>Whichever pattern you use, the shape of the flow is the same: collect and store the card once, then charge it later.</p>

<div class="ig-flow-steps">
<div class="ig-flow-step"><span class="ig-flow-step-num">1</span> Initial payment (customer-initiated)</div>
<span class="ig-flow-arrow"><i class="fas fa-arrow-right"></i></span>
<div class="ig-flow-step"><span class="ig-flow-step-num">2</span> Teya stores the card and returns a token</div>
<span class="ig-flow-arrow"><i class="fas fa-arrow-right"></i></span>
<div class="ig-flow-step"><span class="ig-flow-step-num">3</span> Charge the token later</div>
</div>

<p><strong>1. Initial payment.</strong> The customer enters their card during checkout and agrees that you can store it. This can be a real first payment, or a zero-amount verification that confirms the card without charging it.</p>

<p><strong>2. Store the card.</strong> Teya tokenises and securely stores the card. The <code>payment.succeeded.v1</code> webhook delivers a <code>token_id</code> that you store against the customer, along with the card brand and last four digits for display.</p>

<p><strong>3. Charge later.</strong> When the next cycle, instalment, or event arrives, you charge the stored <code>token_id</code> for the agreed amount. Merchant-initiated charges return a final result immediately; customer-initiated charges may require a 3D Secure challenge that you present.</p>
</div>

<div class="ig-subsection">
<h3>Storing the card</h3>
<p>How you capture and store the card during the initial payment depends on your integration. Each Customize guide covers the fields to send and what you get back.</p>

<div class="ig-nav-cards ig-nav-cards--three">
<a class="ig-nav-card" href="/partners/online-payments/pay-by-link/customize">
<div class="ig-nav-card-icon hosted"><i class="fas fa-link"></i></div>
<div class="ig-nav-card-title">Pay By Link</div>
<div class="ig-nav-card-desc">Store the card from a payment link, with no website of your own.</div>
<span class="ig-view-link">View docs <i class="fas fa-arrow-right"></i></span>
</a>
<a class="ig-nav-card" href="/partners/online-payments/hosted-checkout/customize">
<div class="ig-nav-card-icon embedded-checkout"><i class="fas fa-window-restore"></i></div>
<div class="ig-nav-card-title">Hosted Checkout</div>
<div class="ig-nav-card-desc">Store the card on the Teya-hosted checkout page you redirect to.</div>
<span class="ig-view-link">View docs <i class="fas fa-arrow-right"></i></span>
</a>
<a class="ig-nav-card" href="/partners/online-payments/embedded-components/checkout/customize">
<div class="ig-nav-card-icon embedded-components"><i class="fas fa-puzzle-piece"></i></div>
<div class="ig-nav-card-title">Embedded Components</div>
<div class="ig-nav-card-desc">Store the card from the checkout element embedded in your own page.</div>
<span class="ig-view-link">View docs <i class="fas fa-arrow-right"></i></span>
</a>
</div>
</div>

<div class="ig-subsection">
<h3>What happens when the saved card expires?</h3>
<p>Teya automatically updates the saved-card token when the underlying card expires. You can continue using the same <code>token_id</code> to process payments; you do not need to update the token or collect the card again solely because it has expired.</p>
</div>

<div class="ig-subsection ig-page-cta ig-page-cta--stacked">
<div class="ig-page-cta-text">
<h3>Ready to charge a saved card?</h3>
<p>The charge guide covers customer-initiated and merchant-initiated payments, 3D Secure handling, and decline responses.</p>
</div>
<div class="ig-page-cta-actions">
<a href="/partners/online-payments/saved-payments/charge" class="ig-page-cta-link">Charge a Saved Payment Method <i class="fas fa-arrow-right"></i></a>
</div>
</div>

<div class="ig-subsection">
<h3>Related</h3>
<ul>
<li><a href="/partners/online-payments/saved-payments/charge">Charge a Saved Payment Method</a> — Charge the token you stored</li>
<li><a href="/partners/online-payments/webhooks">Webhooks</a> — Receive the token and later charge notifications</li>
<li><a href="/partners/online-payments/payment-actions">Payment Actions</a> — Capture, refund, and cancel after a payment</li>
<li><a href="/partners/online-payments/testing">Testing</a> — Test cards and integration checklist</li>
<li><a href="/apis/online-payments/apis">API Reference</a> — Full API endpoint documentation</li>
</ul>
</div>

</div>
</div>
