Typedream

Typedream is a no-code website builder. You can add Sanwo payments using the Custom Code block.

Setup

1. Add a Custom Code block

1. In the Typedream editor, click + to add a block
2. Search for Custom Code (or Embed)
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: inherit;
  }
  .sanwo-button:hover { background: #4f46e5; }
</style>

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

2. Publish and test

Click Publish and visit your live site to test the payment button.

Custom amounts

Let visitors choose their own payment 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 Now"
  data-sanwo-placeholder="Enter amount"
></div>

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

Handling results

Redirect after a successful payment:

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

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

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

Tips

• Custom Code blocks in Typedream run in iframes — include the <script> tag inside the block
• Preview won’t execute scripts — publish and test on the live site
• Style the button to match your Typedream theme
• For all available data attributes, see the Embed / CDN guide