Wix

Option 1: Custom HTML element

1. Add the script

Go to Settings → Custom Code → Body - end and add:

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

On your page, add an HTML iframe element (from Add → Embed → Custom Element) 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;
    font-family: inherit;
  }
  .sanwo-button:hover { background: #0052cc; }
</style>

<script src="https://cdn.jsdelivr.net/npm/@sanwohq/embed/dist/sanwo.global.js"></script>
<script>
  function onSanwoPaid(result) {
    if (result.status === 'successful') {
      window.top.location.href = '/thank-you';
    }
  }
</script>

Option 2: Wix Velo (code)

For Wix sites with Velo enabled, use the $w.HtmlComponent to embed the checkout:

// Page code
import wixWindow from 'wix-window';
import wixUsers from 'wix-users';

$w.onReady(function () {
  $w('#payButton').onClick(async () => {
    const user = wixUsers.currentUser;
    const email = await user.getEmail();

    $w('#sanwoEmbed').postMessage({
      action: 'checkout',
      amount: 500000,
      currency: 'NGN',
      email: email
    });
  });

  $w('#sanwoEmbed').onMessage((event) => {
    if (event.data.status === 'successful') {
      wixWindow.openLightbox('ThankYou');
    }
  });
});

In the HTML component (#sanwoEmbed):

<script src="https://cdn.jsdelivr.net/npm/@sanwohq/embed/dist/sanwo.global.js"></script>
<script>
  window.onmessage = async function(event) {
    if (event.data.action !== 'checkout') return;

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

    var result = await sanwo.checkout({
      amount: event.data.amount,
      currency: event.data.currency,
      customer: { email: event.data.email }
    });

    window.parent.postMessage(result, '*');
  };
</script>

Tips

Wix HTML widgets run in an iframe — the Sanwo checkout opens within that iframe’s context
Set the HTML widget height to at least 60px so the button is visible
For redirects, use window.top.location.href to navigate the parent page
Test on the published site — the Wix editor preview may block external scripts