<div id="integration-guide">

<!-- Hero -->
<div class="ig-hero">
<h1>Take Payments Online</h1>
<p>Offer Teya online payments to the merchants you serve. All integrations include card payments, 3D Secure authentication, and webhook notifications without any extra setup.</p>
</div>

<!-- Who this is for -->
<div class="ig-subsection">
<h3>Who this section is for</h3>
<ul>
<li><strong>Partner / Platform</strong> - You're building a plugin, SaaS tool, or platform that other merchants will use.</li>
<li><strong>EPOS Partner</strong> - You already use Teya Card Machines through POSLink.</li>
</ul>

```admonition
icon: fas fa-info-circle
title: Accepting payments for your own business?
content: If you're a merchant accepting payments for your own store or business, see the Online Payments section for Businesses instead.
link: /online-payments/overview
```
</div>

<!-- Credential setup -->
<div class="ig-subsection">
<h3>Credential setup</h3>
<p>How you obtain API credentials depends on your relationship with Teya.</p>

<div style="overflow-x:auto;">
<table class="ig-comparison">
<thead>
<tr>
<th></th>
<th>Partner / Platform</th>
<th>EPOS Partner</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Credential source</strong></td>
<td>Registration webhook callback</td>
<td>Existing POSLink credentials</td>
</tr>
<tr>
<td><strong>Available integrations</strong></td>
<td>All</td>
<td>Pay By Link only</td>
</tr>
<tr>
<td><strong>Ecommerce subscription</strong></td>
<td>Per merchant (via registration)</td>
<td>Not required</td>
</tr>
</tbody>
</table>
</div>
</div>

<!-- Get set up -->
<div class="ig-subsection">
<h3>Get set up</h3>

<div class="ig-nav-cards">
<a href="/partners/online-payments/register-merchants" class="ig-nav-card">
<div class="ig-nav-card-icon" style="background:#f0faf0;color:#16a34a;"><i class="fas fa-user-plus"></i></div>
<div class="ig-nav-card-content">
<h4>Register your merchants</h4>
<p class="ig-card-subtitle">Partner / Platform</p>
<p>Set up your partner account and implement the merchant registration flow. Teya sends each merchant's credentials to your registration webhook so you can take payments on their behalf.</p>
</div>
</a>

<a href="/partners/online-payments/epos-partners" class="ig-nav-card">
<div class="ig-nav-card-icon" style="background:#f0f7ff;color:#008BB9;"><i class="fas fa-link"></i></div>
<div class="ig-nav-card-content">
<h4>Pay By Link from card machine</h4>
<p class="ig-card-subtitle">POSLink credentials</p>
<p>Already integrated with Teya Card Machines through POSLink? Use your existing credentials to offer Pay By Link, with payments settling into the same store as in-store card machine transactions.</p>
</div>
</a>
</div>
</div>

<!-- Integration options -->
<div class="ig-subsection">
<h3>Integration options</h3>
<p>Once your merchants are registered, integrate payments using any of Teya's online payment products. The integration steps are the same as for merchants; only the credential setup differs.</p>

<div class="ig-nav-cards">
<a href="/partners/online-payments/pay-by-link/api" class="ig-nav-card">
<div class="ig-nav-card-icon" style="background:#fef3c7;color:#d97706;"><i class="fas fa-link"></i></div>
<div class="ig-nav-card-content">
<h4>Pay By Link</h4>
<p class="ig-card-subtitle">Get paid without a website</p>
<p>Generate a payment link in seconds and send it anywhere - email, SMS, WhatsApp, or your own app.</p>
<span class="ig-card-label">No code required</span>
</div>
</a>

<a href="/partners/online-payments/hosted-checkout/get-started" class="ig-nav-card">
<div class="ig-nav-card-icon" style="background:#f0f7ff;color:#008BB9;"><i class="fas fa-external-link-alt"></i></div>
<div class="ig-nav-card-content">
<h4>Hosted Checkout</h4>
<p class="ig-card-subtitle">Ready-made checkout with minimal development</p>
<p>Redirect customers to a Teya-hosted page that handles the full payment flow with just a few lines of code.</p>
<span class="ig-card-label">Low code</span>
</div>
</a>

<a href="/partners/online-payments/embedded-components/overview" class="ig-nav-card">
<div class="ig-nav-card-icon" style="background:#fef7f0;color:#ea580c;"><i class="fas fa-puzzle-piece"></i></div>
<div class="ig-nav-card-content">
<h4>Embedded Components</h4>
<p class="ig-card-subtitle">Seamless, embedded checkout</p>
<p>Embed Teya's secure payment fields directly into your own UI. Choose from a complete form, individual card fields, or an Apple Pay button - all hosted in iframes so you stay SAQ A compliant.</p>
<span class="ig-card-label">Some code</span>
</div>
</a>
</div>
</div>

<!-- Common resources -->
<div class="ig-subsection">
<h3>Before you go live</h3>
<ul>
<li><a href="/partners/online-payments/webhooks">Webhooks</a> - Set up real-time notifications for payment events (required for most integrations)</li>
<li><a href="/partners/online-payments/testing">Testing</a> - Use test cards to validate your integration before going live</li>
<li><a href="/partners/online-payments/troubleshooting">Troubleshooting</a> - Solutions to the most common integration issues</li>
<li><a href="/apis/online-payments/apis">API Reference</a> - Full endpoint and parameter documentation</li>
</ul>
</div>

</div>
