<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="fab fa-wordpress"></i></div>
<h2>WooCommerce Plugin</h2>
</div>
<p class="ig-section-desc">Integrate Teya payments into your WooCommerce online store using our official plugin. Accept customer payments online and view all transactions in real-time through your Teya App and Business Portal.</p>

<!-- How it works -->
<div class="ig-subsection">
<h3>How it works</h3>

<div class="ig-flow-steps">
<div class="ig-flow-step"><span class="ig-flow-step-num">1</span> Install plugin in WordPress</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> Link your store to Teya</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> Start accepting payments</div>
</div>

<div class="ig-features">
<div class="ig-feature"><i class="fas fa-check"></i> No coding required</div>
<div class="ig-feature"><i class="fas fa-check"></i> Automatic payment processing</div>
<div class="ig-feature"><i class="fas fa-check"></i> Real-time transaction visibility in Teya App and Portal</div>
<div class="ig-feature"><i class="fas fa-check"></i> Supports cards and Apple Pay</div>
</div>
</div>

<!-- Install -->
<div class="ig-subsection">
<h3>Install the Teya plugin</h3>
<p>Open your WordPress admin dashboard at <code>https://your-store.com/wp-admin</code> and sign in. There are two ways to install the plugin:</p>

<h4>Option 1: Install from the WordPress plugin directory</h4>
<ol>
<li>Go to <strong>Plugins</strong> → <strong>Add Plugin</strong>.</li>
<li>Search for <strong>Teya</strong>. Several plugins match, so pick <strong>Payments via Teya Payments for Woocommerce</strong> (the <a href="https://wordpress.org/plugins/teya-payments-for-woocommerce/" target="_blank" rel="noopener">plugin page</a> on WordPress.org shows the same name).</li>
<li>Select <strong>Install Now</strong>, then select <strong>Activate</strong>.</li>
</ol>

<h4>Option 2: Manual upload</h4>
<ol>
<li>Download the plugin ZIP file from the <a href="https://wordpress.org/plugins/teya-payments-for-woocommerce/" target="_blank" rel="noopener">Payments via Teya Payments for Woocommerce</a> page on WordPress.org.</li>
<li>Go to <strong>Plugins</strong> → <strong>Add Plugin</strong>.</li>
<li>Select <strong>Upload Plugin</strong> and choose the downloaded ZIP file.</li>
<li>Select <strong>Install Now</strong>, then select <strong>Activate</strong>.</li>
</ol>
</div>

<!-- Link your store -->
<div class="ig-subsection">
<h3>Link your store to Teya</h3>
<p>Once the plugin is installed, connect it to your Teya account to start processing transactions.</p>

<ol>
<li>Go to <strong>WooCommerce</strong> → <strong>Settings</strong> → <strong>Payments</strong>.</li>
<li>Find <strong>Credit/Debit Card Payment</strong> (powered by Teya) in the list of payment providers and select <strong>Complete setup</strong>.</li>
<li>Select <strong>Connect to Teya</strong>.</li>
<li>Sign in using your Teya ID credentials.</li>
<li>Select or confirm the specific Teya store you want to link to this website.</li>
<li>Select <strong>Connect</strong>.</li>
</ol>
<p>WordPress brings you back to the <strong>Credit/Debit Card Payment</strong> settings with the message <strong>Successfully connected to Teya!</strong> and <strong>Connection Status</strong> showing <strong>Connected to Teya</strong>. <strong>Enable Teya Payments</strong> is already ticked, so there is nothing else to switch on.</p>
</div>

<!-- Start accepting payments -->
<div class="ig-subsection">
<h3>Start accepting payments</h3>
<p>Check the connection works end to end:</p>

<ol>
<li>Place a test order on your store to verify the checkout flow works correctly.</li>
<li>Confirm the transaction appears in both WooCommerce and the <a href="https://business.teya.com" target="_blank" rel="noopener">Teya Business Portal</a>.</li>
</ol>
</div>

<!-- Related -->
<div class="ig-subsection">
<h3>Related</h3>
<ul>
<li><a href="/online-payments/plugins/woocommerce/customize">Customize</a> - Configure payment options and checkout behaviour</li>
<li><a href="/online-payments/webhooks">Webhooks</a> - Payment notification handling</li>
<li><a href="/online-payments/testing">Testing</a> - Test cards and integration checklist</li>
<li><a href="/online-payments/troubleshooting">Troubleshooting</a> - Common issues and best practices</li>
</ul>
</div>

</div>
</div>
