Softr

Softr lets you build apps and websites from Airtable data. You can add Sanwo payments using the Custom Code block.

Setup

1. Add a Custom Code block

1. In the Softr editor, click Add block
2. Choose Custom Code
3. Paste the following:

<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"
>
  Pay ₦5,000
</button>

<style>
  .sanwo-button {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  .sanwo-button:hover { background: #4f46e5; }
</style>

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

2. Publish and test

Preview your app or publish to test the payment button.

Using Airtable data

To pass dynamic data from your Airtable base (like prices or user emails), use Softr’s custom code with the Softr JS API:

<button class="sanwo-button" id="sanwo-pay">
  Pay Now
</button>

<script src="https://cdn.jsdelivr.net/npm/@sanwohq/embed/dist/sanwo.global.js"></script>
<script>
  document.getElementById('sanwo-pay').addEventListener('click', async function() {
    var user = await window.Softr?.getUserInfo?.();
    var sanwo = Sanwo.create({
      provider: 'paystack',
      publicKey: 'pk_test_xxxxx'
    });

    var result = await sanwo.checkout({
      amount: 500000,
      currency: 'NGN',
      customer: {
        email: user?.email || 'customer@example.com'
      }
    });

    if (result.status === 'successful') {
      alert('Payment successful! Reference: ' + result.reference);
    }
  });
</script>

Custom amounts

Let users enter their own amount:

<div
  data-sanwo-provider="paystack"
  data-sanwo-key="pk_test_xxxxx"
  data-sanwo-currency="NGN"
  data-sanwo-custom-amount="true"
  data-sanwo-button-text="Pay"
  data-sanwo-placeholder="Enter amount"
></div>

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

Tips

• Custom Code blocks in Softr render inline (not in iframes) — global scripts work
• Use Softr’s Custom Code in Header setting for the script tag if you have multiple payment blocks
• Softr’s logged-in user info can be accessed via window.Softr.getUserInfo() for dynamic emails
• For all available data attributes, see the Embed / CDN guide