Carrd

Carrd is a popular platform for building simple, one-page sites. You can add Sanwo payments using the Embed widget.

Setup

1. Add an Embed widget

In the Carrd editor:

1. Click + to add a new element
2. Choose Embed
3. Set Type to Code
4. Set Style to Inline

2. Paste the payment button

Paste this into the code editor:

<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>

Tip

Include the <script> tag inside the embed widget — Carrd embeds run in isolation.

Custom amounts (donations, tips)

Use data-sanwo-custom-amount="true" to let visitors 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="Donate"
  data-sanwo-placeholder="Enter donation amount"
  data-sanwo-min-amount="500"
></div>

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

The form renders automatically with a currency-aware input, email field, and pay button.

Handling results

Add a callback to redirect after 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

• Carrd’s free plan only supports 1 embed widget per page — upgrade to Pro for multiple payment buttons
• Use the Head section (Settings → Head) for scripts shared across multiple embeds
• Style the button to match your Carrd site’s design using the <style> block
• For all available data attributes, see the Embed / CDN guide