Bubble

Setup

1. Add the script

Go to Settings → SEO / metatags → Script/meta tags in body and add:

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

2. Add an HTML element

Drag an HTML element onto your page 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"
>
  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 src="https://cdn.jsdelivr.net/npm/@sanwohq/embed/dist/sanwo.global.js"></script>
<script>
  Sanwo.autoInit();
</script>

Note

Bubble HTML elements run in iframes. Include the CDN script inside the HTML element as well.

Dynamic data with Bubble

To use dynamic data from your Bubble app (like the current user’s email or a calculated amount), use Bubble’s dynamic data insertion inside the HTML element:

<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 sanwo = Sanwo.create({
      provider: 'paystack',
      publicKey: 'pk_test_xxxxx'
    });

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

    if (result.status === 'successful') {
      // Use bubble_fn_paymentSuccess() to trigger a Bubble workflow
      window.top.postMessage({ type: 'sanwo_success', reference: result.reference }, '*');
    }
  });
</script>

Replace INSERT DYNAMIC DATA HERE with Bubble’s dynamic data tokens from the editor.

Triggering Bubble workflows

To communicate payment results back to Bubble:

1. Add a JavaScript to Bubble element (from the plugin store)
2. In your HTML element, call bubble_fn_paymentComplete(result.reference) on success
3. Set up a workflow triggered by the JavaScript to Bubble event

Tips

• Bubble HTML elements are sandboxed iframes — include the script tag inside each HTML element
• For redirects, use window.top.location.href to navigate the parent Bubble page
• Use the preview mode to test — the editor won’t execute scripts
• Consider the Toolbox plugin for more flexible JavaScript integration