<div id="integration-guide">

<!-- Hero -->
<div class="ig-hero">
<h1>Accept Online Payments</h1>
<p>Whether you're sending a payment request over email, adding a checkout form to your website, or building a fully custom payment flow - Teya has an integration to match. All options include card payments, 3D Secure authentication, and webhook notifications without any extra setup.</p>
</div>

<!-- Getting started -->
<div class="ig-subsection">
<h3>Getting started</h3>
<p>Accepting online payments with Teya means your business can take card payments anywhere your customers are - by link, on your website, or through your existing store platform. Here's the path from zero to your first live payment:</p>

<div class="ig-features">
<div class="ig-feature"><i class="fas fa-check"></i> <strong>1. Authenticate</strong> - Get your API credentials from the Business Portal and generate an access token. See <a href="/online-payments/authenticate">Authenticate</a>.</div>
<div class="ig-feature"><i class="fas fa-check"></i> <strong>2. Choose an integration</strong> - Pick the option below that matches how you sell today.</div>
<div class="ig-feature"><i class="fas fa-check"></i> <strong>3. Test and go live</strong> - Validate with test cards, set up webhooks, then switch to production.</div>
</div>
</div>

<!-- Integration options -->
<div class="ig-subsection">
<h3>Choose an integration</h3>
<p>Teya supports different ways to accept payments, depending on how you sell today.</p>

<div class="ig-nav-cards">
<a href="/online-payments/pay-by-link/get-started" 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>Need to collect payment without a website? Generate a link in seconds and send it anywhere - email, SMS, WhatsApp, or your own app. No frontend or coding required.</p>
<span class="ig-card-label">No code required</span>
</div>
</a>

<a href="/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">Add a ready-made checkout to your site with minimal development</p>
<p>Want a ready-made checkout page without building one? 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="/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">Keep customers on your site with a seamless, embedded checkout</p>
<p>Want the checkout to feel like part of your site? 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>

<a href="/online-payments/plugins/overview" class="ig-nav-card">
<div class="ig-nav-card-icon" style="background:#f0faf0;color:#16a34a;"><i class="fas fa-plug"></i></div>
<div class="ig-nav-card-content">
<h4>Plugins</h4>
<p class="ig-card-subtitle">Connect Teya to your existing ecommerce platform in a few clicks</p>
<p>Pre-built integrations for popular eCommerce platforms with out of the box Teya payment capabilities.</p>
<span class="ig-card-label">No code · Shopify · WooCommerce · UNAS</span>
</div>
</a>
</div>
</div>

<!-- Feature comparison -->
<div class="ig-subsection">
<h3>Compare integrations</h3>
<p>See which features and capabilities are available with each integration option.</p>

<div style="overflow-x:auto;">
<table class="ig-comparison">
<thead>
<tr>
<th></th>
<th>Pay By Link</th>
<th>Hosted Checkout</th>
<th>Embedded Components</th>
<th>Plugins</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Effort</strong></td>
<td>No code / API</td>
<td>Low code</td>
<td>Some code</td>
<td>No code</td>
</tr>
<tr>
<td><strong>UI ownership</strong></td>
<td>Teya-hosted</td>
<td>Teya-hosted</td>
<td>Your site (iframe)</td>
<td>Platform theme</td>
</tr>
<tr>
<td><strong>Customer experience</strong></td>
<td>Clicks a link, pays on a Teya-hosted page - no checkout on your site</td>
<td>Redirected away from your site to complete payment, then returned</td>
<td>Pays without leaving your site - checkout feels native</td>
<td>Standard checkout within your ecommerce platform&rsquo;s theme</td>
</tr>
<tr>
<td><strong>Card payments</strong></td>
<td><i class="fas fa-check" style="color:#16a34a;"></i></td>
<td><i class="fas fa-check" style="color:#16a34a;"></i></td>
<td><i class="fas fa-check" style="color:#16a34a;"></i></td>
<td><i class="fas fa-check" style="color:#16a34a;"></i></td>
</tr>
<tr>
<td><strong>Apple Pay</strong></td>
<td><i class="fas fa-check" style="color:#16a34a;"></i></td>
<td><i class="fas fa-check" style="color:#16a34a;"></i></td>
<td><i class="fas fa-check" style="color:#16a34a;"></i></td>
<td><i class="fas fa-check" style="color:#16a34a;"></i></td>
</tr>
<tr>
<td><strong>3D Secure</strong></td>
<td>Automatic</td>
<td>Automatic</td>
<td>Automatic</td>
<td>Automatic</td>
</tr>
<tr>
<td><strong>PCI scope</strong></td>
<td>SAQ A</td>
<td>SAQ A</td>
<td>SAQ A</td>
<td>SAQ A</td>
</tr>
<tr>
<td><strong>Customisation</strong></td>
<td>Branding only</td>
<td>Branding &amp; fields</td>
<td>Full theme &amp; layout</td>
<td>Platform theme</td>
</tr>
<tr>
<td><strong>Refunds</strong></td>
<td>Portal / API</td>
<td>Portal / API</td>
<td>Portal / API</td>
<td>Platform admin</td>
</tr>
<tr>
<td><strong>Webhooks</strong></td>
<td><i class="fas fa-check" style="color:#16a34a;"></i></td>
<td><i class="fas fa-check" style="color:#16a34a;"></i></td>
<td><i class="fas fa-check" style="color:#16a34a;"></i></td>
<td><i class="fas fa-check" style="color:#16a34a;"></i></td>
</tr>
<tr>
<td><strong>Frontend SDK</strong></td>
<td>Not needed</td>
<td>Not needed</td>
<td>Required</td>
<td>Not needed</td>
</tr>
<tr>
<td><strong>Server integration</strong></td>
<td>Optional (API or Portal)</td>
<td>Required</td>
<td>Required</td>
<td>Not needed</td>
</tr>
</tbody>
</table>
</div>
</div>

<!-- Credential setup -->
<div class="ig-subsection">
<h3>Credential setup</h3>
<p>You obtain API credentials from the Teya Business Portal. All integrations are available, and an ecommerce subscription is required. Each integration page includes full setup instructions.</p>

<div class="ig-features">
<div class="ig-feature"><i class="fas fa-check"></i> <strong>Credential source</strong> - Teya Business Portal</div>
<div class="ig-feature"><i class="fas fa-check"></i> <strong>Available integrations</strong> - All</div>
<div class="ig-feature"><i class="fas fa-check"></i> <strong>Ecommerce subscription</strong> - Required</div>
</div>

```admonition
icon: fas fa-handshake
title: Building for the merchants you serve?
content: If you're building a plugin, SaaS tool, or platform that other merchants will use, or you already use Teya Card Machines through POSLink, see Take payments online for partners.
link: /partners/online-payments/overview
```
</div>

<!-- Common resources -->
<div class="ig-subsection">
<h3>Before you go live</h3>
<ul>
<li><a href="/online-payments/webhooks">Webhooks</a> - Set up real-time notifications for payment events (required for most integrations)</li>
<li><a href="/online-payments/testing">Testing</a> - Use test cards to validate your integration before going live</li>
<li><a href="/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>
