<div id="integration-guide">

<div class="ig-section">
<div class="ig-section-header">
<div class="ig-section-icon" style="background:#ecfdf5;color:#059669;"><i class="fas fa-paint-brush"></i></div>
<h2>Customize WooCommerce Plugin</h2>
</div>
<p class="ig-section-desc">Configure payment options, checkout behaviour, and store settings for the Teya WooCommerce plugin.</p>

<div class="ig-subsection">
<h3>Payment Methods</h3>

<table class="ig-comparison">
<thead>
<tr>
<th>Method</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Card Payments</strong></td>
<td>Visa, Mastercard, Amex, Diners Club, and Discover. Enabled by default.</td>
</tr>
<tr>
<td><strong>Apple Pay</strong></td>
<td>Native Apple Pay for supported browsers. Enable in plugin settings.</td>
</tr>
</tbody>
</table>
</div>

<div class="ig-subsection">
<h3>Checkout Settings</h3>

<table class="ig-comparison">
<thead>
<tr>
<th>Setting</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Payment Action</strong></td>
<td>Authorize &amp; Capture (immediate) or Authorize Only (capture later from WooCommerce)</td>
</tr>
<tr>
<td><strong>3DS</strong></td>
<td>Always enabled. Challenges are handled automatically in the checkout flow.</td>
</tr>
<tr>
<td><strong>Order Status Mapping</strong></td>
<td>Configure which WooCommerce order statuses map to Teya payment states</td>
</tr>
<tr>
<td><strong>Debug Logging</strong></td>
<td>Enable to log API requests and responses for troubleshooting (WooCommerce → Status → Logs)</td>
</tr>
</tbody>
</table>
</div>

<div class="ig-subsection">
<h3>Refunds</h3>
<p>Process refunds directly from WooCommerce:</p>
<ol>
<li>Go to <strong>WooCommerce</strong> → <strong>Orders</strong></li>
<li>Select the order to refund</li>
<li>Click <strong>Refund</strong></li>
<li>Enter the refund amount and reason</li>
<li>Click <strong>Refund via Teya</strong></li>
</ol>
<p>Both full and partial refunds are supported.</p>
</div>

<div class="ig-subsection">
<h3>Webhooks</h3>
<p>The WooCommerce plugin automatically configures webhook endpoints. Payment status updates from Teya are received and processed to update WooCommerce order statuses in real time.</p>
</div>

<div class="ig-subsection">
<h3>Customising the Checkout Display</h3>
<p>Modify how the payment method appears on the checkout page:</p>
<ul>
<li><strong>Title</strong> - Change the payment method label (e.g. "Pay by Card", "Credit/Debit Card")</li>
<li><strong>Description</strong> - Add a description shown below the payment method name</li>
<li><strong>Icon</strong> - Card brand icons are displayed automatically based on supported brands</li>
</ul>
</div>

</div>
</div>
