<div id="integration-guide">

<div class="ig-section" id="pay-by-link">
<div class="ig-section-header">
<div class="ig-section-icon hosted"><i class="fas fa-link"></i></div>
<h2>Pay By Link</h2>
</div>
<p class="ig-section-desc">Pay By Link lets you collect payments without building a checkout flow. Generate a payment link, share the URL with your customer, and receive a webhook when they pay - no frontend code required.</p>

```admonition
icon: fas fa-info-circle
title: Before you begin
content: You'll need:<br>• A Teya account<br>• Access to the Staging Business Portal (for API integration)<br>• Your Client ID and Client Secret (obtained during credential setup)
```

<!-- Two integration options -->
<div class="ig-subsection">
<h3>Choose your integration</h3>

<div class="ig-nav-cards">

<a href="/online-payments/pay-by-link/app-portal" class="ig-nav-card">
<div class="ig-nav-card-icon" style="background:#f0fdf4;color:#16a34a;"><i class="fas fa-desktop"></i></div>
<div class="ig-nav-card-content">
<h4>App / Portal</h4>
<p>Create and manage payment links directly from the Teya Business Portal - no code required.</p>
<span class="ig-view-link">Get started <i class="fas fa-arrow-right"></i></span>
</div>
</a>

<a href="/online-payments/pay-by-link/api" class="ig-nav-card">
<div class="ig-nav-card-icon" style="background:#eff6ff;color:#2563eb;"><i class="fas fa-code"></i></div>
<div class="ig-nav-card-content">
<h4>API</h4>
<p>Create payment links programmatically via the Teya Online Payments API for automated workflows.</p>
<span class="ig-view-link">Get started <i class="fas fa-arrow-right"></i></span>
</div>
</a>

</div>
</div>

<!-- Comparison -->
<div class="ig-subsection">
<h3>Compare approaches</h3>

<table class="ig-comparison">
<thead>
<tr>
<th></th>
<th>App / Portal</th>
<th>API</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Code required</strong></td>
<td>None</td>
<td>Backend only</td>
</tr>
<tr>
<td><strong>Integration effort</strong></td>
<td>None</td>
<td>Minimal</td>
</tr>
<tr>
<td><strong>Automation</strong></td>
<td>Manual</td>
<td>Fully automated</td>
</tr>
<tr>
<td><strong>Bulk creation</strong></td>
<td>One at a time</td>
<td>Programmatic</td>
</tr>
<tr>
<td><strong>Best for</strong></td>
<td>Small businesses, ad-hoc invoicing</td>
<td>E-commerce platforms, automated billing</td>
</tr>
</tbody>
</table>
</div>

<!-- Decision helper -->
```admonition
icon: fas fa-lightbulb
title: Not sure which to choose?
content: If you're a developer building an automated workflow, go with the <strong>API</strong>.<br>If you just need to send payment requests manually, use the <strong>App / Portal</strong>.
```

<!-- Customization -->
<div class="ig-subsection">
<h3>Customization</h3>
<p>You can customize the look and feel of your payment links, including branding and display options. See <a href="/online-payments/pay-by-link/customize">Customize Pay By Link</a> for details.</p>
</div>

<!-- Related -->
<div class="ig-subsection">
<h3>Related</h3>
<ul>
<li><a href="/online-payments/webhooks">Webhooks</a> - Set up webhooks to receive payment notifications</li>
<li><a href="/online-payments/pay-by-link/app-portal">App / Portal</a> - Create payment links without writing code</li>
<li><a href="/online-payments/pay-by-link/api">API</a> - Create payment links programmatically</li>
<li><a href="/online-payments/pay-by-link/customize">Customize</a> - Branding and customization options for your payment links</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>
