<div id="integration-guide">

<div class="ig-section">
<div class="ig-section-header">
<div class="ig-section-icon" style="background:#eff6ff;color:#2563eb;"><i class="fas fa-code"></i></div>
<h2>Create Payment Links via API</h2>
</div>
<p class="ig-section-desc">Create payment links programmatically via the Teya Online Payments API. Ideal for automated billing, e-commerce platforms, and any workflow where you need to generate links at scale.</p>

<!-- How it works -->
<div class="ig-subsection">
<h3>How it works</h3>
<p>Here's the end-to-end flow from creating a link to receiving confirmation:</p>

<div class="ig-flow-steps">
<div class="ig-flow-step"><span class="ig-flow-step-num">1</span> Create payment link via API</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> Share URL with customer</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 pays on hosted page</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> Receive webhook confirmation</div>
</div>

<div class="ig-features">
<div class="ig-feature"><i class="fas fa-check"></i> No frontend code needed</div>
<div class="ig-feature"><i class="fas fa-check"></i> Works with any platform</div>
<div class="ig-feature"><i class="fas fa-check"></i> Shareable via email, SMS, QR code</div>
<div class="ig-feature"><i class="fas fa-check"></i> Automatic receipt and confirmation</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: 'payment-links/create payment-links/id/get payment-links/id/update'</code></p>
<table class="ig-comparison">
<thead>
<tr><th>Scope</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td><code>payment-links/create</code></td><td>Create a payment link</td></tr>
<tr><td><code>payment-links/id/get</code></td><td>Get payment link by ID</td></tr>
<tr><td><code>payment-links/id/update</code></td><td>Update a payment link</td></tr>
</tbody>
</table>


</div>


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

<h4>POST - Create a payment link</h4>

```json
{
  "payment_link_id": "20eb276c-5b6b-4474-a5a1-49bcd6193148",
  "payment_link": "https://checkout.teya.com/pbl/20eb276c-5b6b-4474-a5a1-49bcd6193148"
}
```

<p>Use <code>payment_link</code> to share with your customer. Use <code>payment_link_id</code> to retrieve or update the link later.</p>

```admonition
icon: fas fa-info-circle
title: Info
content: Use <code>payment_url</code> to redirect or send to your customer. Use <code>id</code> to look up or update the link later.<br><strong>Note on <code>amount.value</code>:</strong> Always in the smallest currency unit - for GBP, 2500 = £25.00.
```

<h4>GET - Retrieve a payment link</h4>

```json
{
  "payment_link_id": "20eb276c-5b6b-4474-a5a1-49bcd6193148",
  "status": "VALID",
  "amount": { "value": 2500, "currency": "GBP" },
  "merchant_reference": "order-12345",
  "expires_at": "2026-12-31T23:59:59.000Z",
  "line_items": [
    { "description": "Product 1", "quantity": 1, "unit_price": 2500 }
  ],
  "required_customer_fields": ["EMAIL", "PHONE"],
  "metadata": { "order_id": "12345" },
  "customer": {
    "email": "john.doe@example.com",
    "name": "John Doe",
    "phone_number": "+447911123456"
  },
  "billing_address": {
    "city": "London",
    "country": "GB",
    "street_address_line1": "Main Street",
    "zipcode": "SW1A1AA"
  },
  "customer_success_email": "john.doe@example.com",
  "merchant_success_email": "merchant@example.com",
  "post_success_payment": "REDIRECT",
  "success_url": "https://mywebsite.com/checkout/success",
  "cancel_url": "https://mywebsite.com/checkout/cart",
  "supported_card_brands": ["VISA", "MASTERCARD"],
  "supported_payment_methods": ["CARD", "APPLE_PAY"]
}
```

<h4>PATCH - Update expiry</h4>

<p>The only updatable field is <code>expires_at</code>. Set it to a future date to extend the link, or a past date to effectively cancel it.</p>

```json
{
  "payment_link_id": "20eb276c-5b6b-4474-a5a1-49bcd6193148",
  "status": "VALID",
  "amount": { "value": 2500, "currency": "GBP" },
  "merchant_reference": "order-12345",
  "expires_at": "2026-07-03T13:37:58.709Z",
  "line_items": [
    { "description": "Product 1", "quantity": 1, "unit_price": 2500 }
  ],
  "required_customer_fields": ["EMAIL", "PHONE"],
  "metadata": { "order_id": "12345" },
  "customer": {
    "email": "john.doe@example.com",
    "name": "John Doe",
    "phone_number": "+447911123456"
  },
  "billing_address": {
    "city": "London",
    "country": "GB",
    "street_address_line1": "Main Street",
    "zipcode": "SW1A1AA"
  },
  "customer_success_email": "john.doe@example.com",
  "merchant_success_email": "merchant@example.com",
  "post_success_payment": "REDIRECT",
  "success_url": "https://mywebsite.com/checkout/success",
  "cancel_url": "https://mywebsite.com/checkout/cart",
  "supported_card_brands": ["VISA", "MASTERCARD"],
  "supported_payment_methods": ["CARD", "APPLE_PAY"]
}
```
</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>payment-links/create</code> is in your scope list</td></tr>
<tr><td><code>422</code></td><td>Invalid request body</td><td>Check <code>amount.value</code> is in smallest currency unit (2500 = £25.00)</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/pay-by-link/customize">Customize</a> - Branding, checkout messages, and T&amp;C links</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" style="background:#eff6ff;color:#2563eb;"><i class="fas fa-code"></i></div>
<h2>Try it live - Create a Payment Link</h2>
</div>

<div class="ig-subsection">
<p>This will create a real payment link 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="payment-link-code" data-code-flow="paymentLink"></div>
</div>

</div>

</div>

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