Webflow

Setup

1. Add the script

Go to Project Settings → Custom Code → Footer Code and add:

<script src="https://cdn.jsdelivr.net/npm/@sanwohq/embed/dist/sanwo.global.js"></script>

2. Add a payment button

On any page, add an Embed element (HTML Embed) and paste:

<button
  class="sanwo-button"
  data-sanwo-provider="paystack"
  data-sanwo-key="pk_test_xxxxx"
  data-sanwo-amount="500000"
  data-sanwo-currency="NGN"
  data-sanwo-email="customer@example.com"
  data-sanwo-callback="onSanwoPaid"
>
  Pay ₦5,000
</button>

<style>
  .sanwo-button {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background: #0066ff;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
  }
  .sanwo-button:hover { background: #0052cc; }
</style>

<script>
  function onSanwoPaid(result) {
    if (result.status === 'successful') {
      window.location.href = '/thank-you';
    }
  }
</script>

That’s it. The button opens the provider checkout when clicked.

With Webflow forms

Collect the customer’s email from a Webflow form, then trigger checkout:

<div>
  <input type="email" id="customer-email" placeholder="Enter your email" style="padding: 10px; border: 1px solid #ddd; border-radius: 6px; margin-right: 8px;" />
  <button class="sanwo-button" id="pay-btn">Pay ₦5,000</button>
</div>

<script>
  document.getElementById('pay-btn').addEventListener('click', async function() {
    var email = document.getElementById('customer-email').value;
    if (!email) { alert('Please enter your email'); return; }

    var sanwo = Sanwo.create({
      provider: 'paystack',
      publicKey: 'pk_test_xxxxx'
    });

    var result = await sanwo.checkout({
      amount: 500000,
      currency: 'NGN',
      customer: { email: email }
    });

    if (result.status === 'successful') {
      window.location.href = '/thank-you';
    }
  });
</script>

Dynamic amounts

Use JavaScript to read the amount from the page:

<script>
  document.getElementById('pay-btn').addEventListener('click', async function() {
    var amountInput = document.getElementById('amount-input').value;
    var amount = Math.round(parseFloat(amountInput) * 100); // Convert to kobo

    var sanwo = Sanwo.create({ provider: 'paystack', publicKey: 'pk_test_xxxxx' });
    var result = await sanwo.checkout({
      amount: amount,
      currency: 'NGN',
      customer: { email: document.getElementById('email-input').value }
    });
  });
</script>

Tips

• Place the script tag in Footer Code (not Header) so it loads after the page content
• Use the Embed element for payment buttons — Webflow’s native button won’t support data attributes
• Style the button with inline CSS in the embed, or add a class that matches your Webflow design system
• Test in the published site, not the Webflow editor preview