<div id="integration-guide">

<div class="ig-section" id="hosted-checkout">
<div class="ig-section-header">
<div class="ig-section-icon hosted"><i class="fas fa-window-restore"></i></div>
<h2>Hosted Checkout</h2>
</div>
<p class="ig-section-desc">Create a checkout session via the Online Payments API and redirect your customer to a Teya-hosted checkout page. The session supports order details, line items, and configurable redirect URLs.</p>

<!-- How it works -->
<div class="ig-subsection">
<h3>How it works</h3>

<div class="ig-flow-steps">
<div class="ig-flow-step"><span class="ig-flow-step-num">1</span> Create checkout session (server)</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> Redirect to session URL</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> Customer completes payment</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">4</span> Redirect back + webhook</div>
</div>

<div class="ig-features">
<div class="ig-feature"><i class="fas fa-check"></i> Full checkout flow with order summary</div>
<div class="ig-feature"><i class="fas fa-check"></i> Supports line items and metadata</div>
<div class="ig-feature"><i class="fas fa-check"></i> Automatic 3DS and error handling</div>
<div class="ig-feature"><i class="fas fa-check"></i> Configurable success/cancel URLs</div>
</div>
</div>

<!-- Before getting started -->
<div class="ig-subsection">
<h3>Before getting started</h3>

<h4>1. Get merchant credentials</h4>
<p>As a partner you take payments on behalf of the merchants you serve. Each merchant's <strong>Client ID</strong> and <strong>Client Secret</strong> are delivered to your <code>registrationWebhook</code> when the merchant connects Teya to your platform, along with the <code>store_id</code> and <code>payment_webhook_public_key</code>.</p>

<div class="ig-features">
<div class="ig-feature"><i class="fas fa-check"></i> Use <code>client_credentials</code> grant to obtain access tokens</div>
<div class="ig-feature"><i class="fas fa-check"></i> Each merchant store has its own set of credentials</div>
<div class="ig-feature"><i class="fas fa-check"></i> Store credentials securely and never expose them in client-side code</div>
</div>

```admonition
icon: fas fa-key
title: A separate Client ID and Client Secret per merchant
content: Unlike POSLink credentials, these aren't shared across your merchant base. Each merchant you serve gets its own Client ID and Client Secret, delivered to your registrationWebhook when they connect - keep each merchant's credentials separate and don't reuse one set across multiple merchants.
```

```admonition
icon: fas fa-user-plus
title: Not registered yet?
content: Set up your partner account and implement the merchant registration flow first. Teya sends each merchant's credentials to your registration webhook.
link: /partners/online-payments/register-merchants
```

<h4>2. API URLs</h4>
<table class="ig-comparison">
<thead>
<tr><th>Service</th><th>Staging</th><th>Production</th></tr>
</thead>
<tbody>
<tr><td><strong>Online Payments API</strong></td><td><code>https://api.teya.xyz</code></td><td><code>https://api.teya.com</code></td></tr>
<tr><td><strong>OAuth</strong></td><td><code>https://id.teya.xyz/oauth/v2/oauth-token</code></td><td><code>https://id.teya.com/oauth/v2/oauth-token</code></td></tr>
<tr><td><strong>Business Portal</strong></td><td><code>https://business.teya.xyz</code></td><td><code>https://business.teya.com</code></td></tr>
</tbody>
</table>

<h4>3. Required scopes</h4>
<p>Include these as a space-separated string in your OAuth token request:</p>
<p><code>scope: 'checkout/sessions/create checkout/sessions/id/get refunds/create'</code></p>
<table class="ig-comparison">
<thead>
<tr><th>Scope</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><code>checkout/sessions/create</code></td><td>Create a hosted checkout session</td></tr>
<tr><td><code>checkout/sessions/id/get</code></td><td>Get hosted checkout session by ID</td></tr>
<tr><td><code>refunds/create</code></td><td>Issue a refund for a completed payment</td></tr>
</tbody>
</table>


</div>


<!-- Example responses -->
<div class="ig-subsection">
<h3>Example responses</h3>

<h4>POST - Create a checkout session</h4>

```json
{
  "session_id": "14411456-79c8-4d8c-8498-f01907093b83",
  "session_token": "eyJhbGciOiJSUzI1NiJ9...",
  "session_url": "https://checkout.teya.com/session/14411456-79c8-4d8c-8498-f01907093b83",
  "session_status": "ACTIVE"
}
```

<p>Redirect the customer to <code>session_url</code>. Use <code>session_id</code> to retrieve the session status later.</p>

```admonition
icon: fas fa-info-circle
title: Info
content: Use <code>session_url</code> to redirect the customer to the hosted checkout page. Use <code>session_id</code> to check the session status later.<br><strong>Note on <code>amount.value</code>:</strong> Always in the smallest currency unit - for EUR, 5000 = €50.00.
```

<h4>GET - Retrieve a checkout session</h4>

```json
{
  "session_id": "14411456-79c8-4d8c-8498-f01907093b83",
  "session_status": "ACTIVE",
  "amount": { "value": 5000, "currency": "EUR" },
  "type": "SALE",
  "payment_status": "NONE",
  "success_url": "https://yoursite.com/success",
  "cancel_url": "https://yoursite.com/cart"
}
```
</div>

<!-- Error handling -->
<div class="ig-subsection">
<h3>Error handling</h3>

<table class="ig-comparison">
<thead>
<tr><th>Status</th><th>Meaning</th><th>What to do</th></tr>
</thead>
<tbody>
<tr><td><code>401</code></td><td>Invalid or expired token</td><td>Re-authenticate using <code>client_credentials</code></td></tr>
<tr><td><code>403</code></td><td>Missing scope</td><td>Ensure <code>checkout/sessions/create</code> is in your scope list</td></tr>
<tr><td><code>409</code></td><td>Duplicate idempotency key</td><td>Use a unique <code>Idempotency-Key</code> header for each request</td></tr>
<tr><td><code>422</code></td><td>Invalid request body</td><td>Check <code>amount.value</code> is in smallest currency unit</td></tr>
</tbody>
</table>
</div>

<!-- Related -->
<div class="ig-subsection">
<h3>Related</h3>
<ul>
<li><a href="/partners/online-payments/webhooks">Webhooks</a> - Set up webhooks to receive payment notifications</li>
<li><a href="/partners/online-payments/hosted-checkout/customize">Customize</a> - Branding, checkout messages, and session options</li>
<li><a href="/partners/online-payments/testing">Testing</a> - Test cards and integration checklist</li>
<li><a href="/partners/online-payments/troubleshooting">Troubleshooting</a> - Common issues and best practices</li>
<li><a href="/apis/online-payments/apis">API Reference</a> - Full API endpoint documentation</li>
</ul>
</div>

</div>

<div class="ig-section" id="try-it">
<div class="ig-section-header">
<div class="ig-section-icon hosted"><i class="fas fa-window-restore"></i></div>
<h2>Try it live - Create a Checkout Session</h2>
</div>

<div class="ig-subsection">
<p>This will create a real checkout session in the Staging environment. You'll need valid Staging credentials before proceeding.</p>

```admonition
icon: fas fa-exclamation-triangle
title: Staging endpoints shown below
content: Before going live, swap:<br>• <code>api.teya.xyz</code> → <code>api.teya.com</code><br>• <code>id.teya.xyz</code> → <code>id.teya.com</code>
```

<div id="hosted-checkout-code" data-code-flow="hostedCheckout"></div>
</div>

</div>

</div>

<script src="/js/playground.js"></script>
