<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-shopify"></i></div>
<h2>Shopify Plugin</h2>
</div>
<p class="ig-section-desc">Integrate Teya payments into your Shopify 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 from Shopify App Store</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> Connect your Teya account</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> Test and activate payments</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">4</span> Customise checkout behaviour</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>

<ol>
<li>Download the Shopify plugin from the <a href="https://apps.shopify.com/saltpay" target="_blank" rel="noopener">Shopify App Store</a>.</li>
<li>Click <strong>Install app</strong>.</li>
<li>Log in to your Shopify store to authorise the installation.</li>
</ol>
</div>

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

<ol>
<li>In your Shopify admin dashboard, go to <strong>Apps</strong> and select <strong>Teya Payments</strong>.</li>
<li>Locate the <strong>Account setup</strong> section and select <strong>Connect with 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>
<li>A confirmation window will appear. Close this window to return to Shopify.</li>
</ol>
</div>

<!-- Test and activate -->
<div class="ig-subsection">
<h3>Test and activate payments</h3>
<p>You can enable Teya Payments and test the flow before accepting real transactions.</p>

<ol>
<li>In Shopify, go to <strong>Settings</strong> and select <strong>Payments</strong>.</li>
<li>Find <strong>Teya Payments</strong> in the list of providers.</li>
<li><strong>Test mode:</strong> Enable this option to simulate transactions and check your checkout flow without charging a card.</li>
<li><strong>Go live:</strong> When you are ready to accept real customer payments, ensure Test mode is <strong>disabled</strong>.</li>
</ol>
</div>

<!-- Customise -->
<div class="ig-subsection">
<h3>Customise checkout behaviour</h3>
<p>You can adjust how customers interact with your store after a purchase and manage notifications. Go to <strong>Apps</strong> and select <strong>Teya Payments</strong> to view these options.</p>

<h4>Customer redirection</h4>
<p>Choose where customers go after a successful payment:</p>
<ul>
<li><strong>Default:</strong> Redirects customers back to your Shopify store's confirmation page.</li>
<li><strong>Alternative:</strong> Shows a Teya confirmation page where the customer can download a receipt.</li>
</ul>

<h4>Email confirmations</h4>
<ul>
<li><strong>Email confirmations:</strong> Enable this to receive a purchase confirmation email for every successful transaction processed through Teya.</li>
</ul>
</div>

<!-- Migrating -->
<div class="ig-subsection">
<h3>Migrating from SecurePay</h3>
<p>If you currently use the Teya plugin with SecurePay, you can switch to the new Hosted Checkout experience without reinstalling.</p>

<ol>
<li>Go to the plugin settings in Shopify.</li>
<li>Select <strong>Connect with Teya</strong>.</li>
<li>Sign in with your Teya ID and follow the connection steps listed above.</li>
</ol>

<p>This will automatically update your payment flow to the new experience.</p>
</div>

<!-- Related -->
<div class="ig-subsection">
<h3>Related</h3>
<ul>
<li><a href="/online-payments/plugins/shopify/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>
