Shopify

Sanwo integrates with Shopify via Liquid snippets and theme sections. Use it for custom payment flows like donations, pay-what-you-want, event tickets, or standalone product pages.

Quick setup

1. Add the snippet

Copy snippets/sanwo-checkout.liquid to your theme’s snippets/ directory via the Shopify theme editor or CLI.

2. Include in a template

{% render 'sanwo-checkout',
  provider: 'paystack',
  public_key: 'pk_test_xxxxx',
  amount: 500000,
  currency: 'NGN',
  email: customer.email,
  button_text: 'Pay ₦5,000'
%}

3. Or use the section

Add the sanwo-checkout.liquid section to your theme’s sections/ directory, then add it via the theme editor. Configure everything visually — provider, public key, amount, currency, button text, and redirect URL.

Using with Shopify variables

{% render 'sanwo-checkout',
  provider: 'paystack',
  public_key: 'pk_test_xxxxx',
  amount: cart.total_price,
  currency: shop.currency,
  email: customer.email,
  button_text: 'Complete Payment',
  redirect_url: '/pages/thank-you'
%}

Note

cart.total_price is already in minor units (cents) in Shopify, so it works directly with Sanwo.

Theme section (visual editor)

The Sanwo Checkout section lets merchants configure payments from the Shopify theme editor without editing code:

1. Go to Online Store → Themes → Customize
2. Click Add section → Sanwo Checkout
3. Fill in your provider, public key, amount, and currency
4. Save

JavaScript helper

The sanwo-shopify.js asset provides a SanwoShopify namespace for programmatic control:

<script>
  SanwoShopify.init({
    provider: 'paystack',
    publicKey: 'pk_test_xxxxx'
  });

  document.getElementById('custom-btn').addEventListener('click', function() {
    SanwoShopify.checkout({
      amount: {{ cart.total_price }},
      currency: '{{ shop.currency }}',
      customer: { email: '{{ customer.email }}' }
    });
  });

  SanwoShopify.onComplete(function(result) {
    if (result.status === 'successful') {
      window.location.href = '/pages/thank-you?ref=' + result.reference;
    }
  });
</script>

Events

Listen for payment events on the document:

document.addEventListener('sanwo:payment:success', function(e) {
  console.log('Paid!', e.detail);
});

document.addEventListener('sanwo:payment:cancelled', function(e) {
  console.log('Cancelled');
});

document.addEventListener('sanwo:payment:failed', function(e) {
  console.log('Failed', e.detail);
});

Snippet parameters

Parameter	Required	Default	Description
provider	Yes	—	Provider name
public_key	Yes	—	Provider public key
amount	Yes	—	Amount in minor units
currency	No	"NGN"	ISO currency code
email	No	—	Customer email (auto-detects logged-in customer)
button_text	No	"Pay with Sanwo"	Button label
button_class	No	"sanwo-button"	CSS class
description	No	—	Payment description
reference	No	Auto-generated	Custom transaction reference
redirect_url	No	—	URL to redirect after successful payment
callback	No	—	JS callback function name

When to use Sanwo on Shopify

Sanwo is ideal for:

• Donations — flexible amount payment buttons
• Custom payment pages — landing pages with direct payment
• Event tickets — standalone ticket purchase flows
• Pay-what-you-want — custom amount collection
• Subscription setup — initial payment collection

For standard Shopify checkout flows, use Shopify’s built-in payment processing. Sanwo is best for custom payment experiences alongside or separate from the main checkout.