Guides/How to add payments to a Sutrena page

How to add payments to a Sutrena page

Embed Stripe, Paddle, or PayPal directly on your page.

Updated March 2026

Sutrena pages support external JavaScript, iframes, and API calls — so you can embed payment widgets from any provider directly in your HTML. Stripe Buy Buttons, Paddle overlay checkout, PayPal Smart Buttons, LemonSqueezy overlays, Gumroad widgets — they all work. You can also use simple Payment Links (plain HTML links to hosted checkout pages) if you prefer zero JavaScript. This guide covers both approaches for seven major providers: Stripe, Paddle, LemonSqueezy, PayPal, Gumroad, Ko-fi, and Buy Me a Coffee.

1. Choose your approach

Two ways to accept payments on a Sutrena page: **Embedded widgets (richer experience):** Load the provider's JavaScript SDK and render a checkout button or pricing table directly on your page. The customer pays without leaving your site (or sees an overlay). Works for Stripe, Paddle, LemonSqueezy, PayPal, Gumroad, Ko-fi, Buy Me a Coffee. **Payment Links (simpler):** Create a hosted checkout URL in your provider's dashboard. Put a plain HTML link on your page. The customer clicks, pays on the provider's hosted page, and returns. Zero JavaScript. Works for every provider. Both approaches work on Sutrena pages. Embedded widgets feel more polished. Payment Links are simpler to set up.

2. Stripe — Buy Button or Payment Link

Stripe offers the most options. The **Buy Button** embeds a complete checkout experience on your page — create one in Stripe Dashboard under Payment Links → Buy Button. You get a web component you drop into your HTML. The **Pricing Table** shows multiple plans side by side. Or use a **Payment Link** as a plain URL. Supports one-time payments, subscriptions, and trials. Fees: 2.9% + $0.30 per transaction (US cards).

<!-- Option A: Stripe Buy Button (embedded widget) -->
<script async src="https://js.stripe.com/v3/buy-button.js"></script>
<stripe-buy-button
  buy-button-id="buy_btn_YOUR_BUTTON_ID"
  publishable-key="pk_live_YOUR_KEY">
</stripe-buy-button>

<!-- Option B: Stripe Pricing Table (multiple plans) -->
<script async src="https://js.stripe.com/v3/pricing-table.js"></script>
<stripe-pricing-table
  pricing-table-id="prctbl_YOUR_TABLE_ID"
  publishable-key="pk_live_YOUR_KEY">
</stripe-pricing-table>

<!-- Option C: Payment Link (zero JavaScript) -->
<a href="https://buy.stripe.com/YOUR_LINK_ID"
   style="display:inline-block; padding:12px 24px; background:#635bff; color:#fff; border-radius:6px; text-decoration:none; font-weight:600;">
  Pay $29
</a>

3. Paddle — Overlay Checkout

Paddle is a Merchant of Record — they handle global tax compliance (VAT, sales tax). Load Paddle.js and open an overlay checkout when the user clicks a button. The customer pays in a modal without leaving your page. Create products in the Paddle Dashboard. Supports one-time and subscription payments. Fees: 5% + $0.50 per transaction, but includes all tax handling.

<!-- Paddle overlay checkout -->
<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
<script>
  Paddle.Initialize({ token: 'live_YOUR_CLIENT_TOKEN' });
</script>

<button onclick="Paddle.Checkout.open({items: [{priceId: 'pri_YOUR_PRICE_ID', quantity: 1}]})"
  style="padding:12px 24px; background:#3b82f6; color:#fff; border:none; border-radius:6px; cursor:pointer; font-weight:600;">
  Subscribe — $29/mo
</button>

<!-- Or use a simple payment link (no JS) -->
<a href="https://buy.paddle.com/product/YOUR_PRODUCT_ID"
   style="display:inline-block; padding:12px 24px; background:#3b82f6; color:#fff; border-radius:6px; text-decoration:none; font-weight:600;">
  Buy Now — $49
</a>

4. LemonSqueezy — Checkout Overlay

LemonSqueezy (now part of Stripe) is another Merchant of Record. Load lemon.js and add the `lemonsqueezy-button` class to any link — it automatically opens a checkout overlay. Create products in your LemonSqueezy store dashboard. Supports one-time, subscriptions, and pay-what-you-want. Fees: 5% + $0.50 per transaction.

<!-- LemonSqueezy checkout overlay -->
<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>

<!-- Any link with this class opens as an overlay -->
<a href="https://yourstore.lemonsqueezy.com/buy/PRODUCT_ID"
   class="lemonsqueezy-button"
   style="display:inline-block; padding:12px 24px; background:#7c3aed; color:#fff; border-radius:6px; text-decoration:none; font-weight:600;">
  Get License — $19
</a>

5. PayPal — Smart Buttons or Payment Link

PayPal Smart Buttons render contextual payment options (PayPal, Venmo, cards) based on the buyer's location. Load the PayPal SDK and render buttons into a container. For a simpler approach, use PayPal.me links or PayPal Hosted Buttons (an HTML form that POSTs to PayPal). Fees: 3.49% + $0.49 per transaction.

<!-- Option A: PayPal Smart Buttons (embedded) -->
<div id="paypal-button-container"></div>
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&currency=USD"></script>
<script>
  paypal.Buttons({
    style: { layout: 'vertical', color: 'blue', shape: 'rect' },
    createOrder: (data, actions) => actions.order.create({
      purchase_units: [{ amount: { value: '25.00' } }]
    }),
    onApprove: (data, actions) => actions.order.capture().then(details => {
      document.getElementById('paypal-button-container').innerHTML =
        '<p style="color:green; font-weight:600;">Payment complete. Thank you!</p>';
    })
  }).render('#paypal-button-container');
</script>

<!-- Option B: PayPal.me link (zero JavaScript) -->
<a href="https://paypal.me/yourname/25"
   style="display:inline-block; padding:12px 24px; background:#0070ba; color:#fff; border-radius:6px; text-decoration:none; font-weight:600;">
  Pay $25 with PayPal
</a>

6. Gumroad — Overlay Widget or Direct Link

Gumroad is popular for digital products, courses, and ebooks. Load gumroad.js and any product link automatically opens as a purchase overlay. Or link directly to the product page. Gumroad acts as Merchant of Record (handles tax). Fees: 10% flat (includes payment processing).

<!-- Option A: Gumroad overlay (loads product in modal) -->
<script src="https://gumroad.com/js/gumroad.js"></script>
<a href="https://yourname.gumroad.com/l/YOUR_PRODUCT"
   style="display:inline-block; padding:12px 24px; background:#ff90e8; color:#000; border-radius:6px; text-decoration:none; font-weight:600;">
  Buy on Gumroad — $15
</a>

<!-- Option B: Embedded product card -->
<script src="https://gumroad.com/js/gumroad-embed.js"></script>
<div class="gumroad-product-embed">
  <a href="https://yourname.gumroad.com/l/YOUR_PRODUCT">Loading...</a>
</div>

7. Ko-fi and Buy Me a Coffee — Widgets or Links

For creator support, tips, and donations. Both offer floating widget overlays that you can embed on your page, or use simple direct links. Ko-fi fees: 0% platform fee on tips (Gold plan) or 5% (free plan), plus ~3% payment processing. Buy Me a Coffee fees: 5% + ~3% payment processing.

<!-- Ko-fi floating widget -->
<script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
<script>
  kofiWidgetOverlay.draw('yourname', {
    'type': 'floating-chat',
    'floating-chat.donateButton.text': 'Support Me',
    'floating-chat.donateButton.background-color': '#13C3FF',
    'floating-chat.donateButton.text-color': '#fff'
  });
</script>

<!-- Buy Me a Coffee widget -->
<script data-name="BMC-Widget" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
  data-id="yourname" data-color="#FFDD00" data-position="Right"
  data-x_margin="18" data-y_margin="18"></script>

<!-- Or just use direct links (no JavaScript) -->
<a href="https://ko-fi.com/yourname"
   style="display:inline-block; padding:12px 24px; background:#13C3FF; color:#fff; border-radius:6px; text-decoration:none; font-weight:600;">
  Support me on Ko-fi
</a>
<a href="https://buymeacoffee.com/yourname"
   style="display:inline-block; padding:12px 24px; background:#FFDD00; color:#000; border-radius:6px; text-decoration:none; font-weight:600;">
  Buy me a coffee
</a>

8. Combine with a Sutrena form for order details

The best pattern for custom orders: use a Sutrena form to collect order details (name, email, what they want, quantity), then show the payment widget below. The form collects the data, the payment widget handles the money. Set up a Sutrena webhook to trigger an automation (n8n, Make, Zapier) that sends a personalized payment link or confirmation email after each form submission.

<!-- Full page: Order form + Stripe Buy Button -->
<h1>Order Custom Artwork</h1>

<h2>1. Tell us what you want</h2>
<iframe src="https://sutrena.com/f/YOUR_FORM_ID?embed=1"
  style="width:100%; height:500px; border:1px solid #e5e7eb; border-radius:8px;"
  loading="lazy"></iframe>

<h2>2. Pay the deposit</h2>
<p>After submitting your details, pay the deposit to confirm your order.</p>
<script async src="https://js.stripe.com/v3/buy-button.js"></script>
<stripe-buy-button
  buy-button-id="buy_btn_YOUR_ID"
  publishable-key="pk_live_YOUR_KEY">
</stripe-buy-button>

9. Deploy the page via API or MCP

Deploy your page with payment integration using the Sutrena API or MCP tools. The page is live instantly at your subdomain (alice.sutrena.com/shop) or custom domain.

# Deploy via API
curl -X POST https://sutrena.com/api/pages \
  -H "Authorization: Bearer $KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "slug": "shop",
    "title": "Buy My Product",
    "html": "<h1>My Product</h1><p>A one-line description.</p><script async src=\"https://js.stripe.com/v3/buy-button.js\"></script><stripe-buy-button buy-button-id=\"buy_btn_YOUR_ID\" publishable-key=\"pk_live_YOUR_KEY\"></stripe-buy-button>"
  }'

FAQ

Can I load external JavaScript on a Sutrena page?

Yes. Sutrena pages allow external scripts over HTTPS, inline scripts, fetch to any API, and iframes from any origin. You can embed Stripe.js, Paddle.js, PayPal SDK, or any other payment provider's JavaScript.

Which provider should I choose?

For one-time product sales: Stripe Buy Button (lowest fees at 2.9% + $0.30, richest embed). For SaaS subscriptions with global tax compliance: Paddle (5% + $0.50, handles all VAT/sales tax). For digital products and courses: Gumroad or LemonSqueezy. For creator tips and donations: Ko-fi or Buy Me a Coffee. For widest payment method coverage: PayPal Smart Buttons.

Can the customer return to my page after payment?

Yes. Embedded widgets (Stripe Buy Button, Paddle overlay) stay on your page — the customer never leaves. For Payment Links, set a success URL to your Sutrena page URL (e.g., alice.sutrena.com/thank-you) so customers redirect back after payment.

How do I track which form submission corresponds to which payment?

Use the customer's email as the link between form submission and payment. Sutrena forms collect the email, and payment providers record it during checkout. You can also use Sutrena webhooks + provider webhooks together in an automation tool (n8n, Make, Zapier) to match submissions to payments.

Do I need a backend server?

No. Embedded widgets (Stripe Buy Button, Paddle overlay, LemonSqueezy overlay) handle the entire checkout client-side. Payment Links require no JavaScript at all. For post-payment automation (emails, status updates), use the provider's webhooks with n8n, Make, or Zapier.

Is it secure?

Yes. Payment providers handle all sensitive card data on their own PCI-compliant infrastructure. Your Sutrena page never touches card numbers. Stripe.js, Paddle.js, and PayPal SDK all use tokenization — the actual payment is processed on the provider's servers.

Related

Deploy a page via API →Webhook on form submissions →Can I collect payments? →Payments through forms →Set up a custom subdomain →Browse form templates →

What is Sutrena?

Sutrena is the web runtime for AI agents. Three primitives — pages, forms, and dashboards — accessible through one API. Your agent creates web artifacts, humans interact with them, and your agent gets the data back. Framework-agnostic. Works from any MCP client or HTTP client.

Get started in two API calls

1. Get a trial key (no auth, no signup)

curl -X POST https://sutrena.com/api/trial

2. Create a form + dashboard from a template

curl -X POST https://sutrena.com/api/forms \
  -H "Authorization: Bearer st_trial_xxx" \
  -H "Content-Type: application/json" \
  -d '{"templateId": "waitlist", "createDashboard": true}'
/llms.txt/api/schema/llms-full.txt/.well-known/mcp.json

Ready to build?

Get a trial API key instantly with no signup, or create an account for the full experience.

Start buildingAgent docs
How to add payments to a Sutrena page — Sutrena | Sutrena