Skip to main content

Accept payments with Stripe

Selling a product, charging for a service, collecting donations, offering a SaaS plan — any scenario that involves "visitor pays me money" can be wired up on a Flexweg site in minutes with Stripe, without writing a single line of server code.

This page covers the three Stripe integration patterns that work with a pure static site:

  1. Payment Links — one URL, no embed, the fastest way to sell anything.
  2. Buy Button — a styled "Buy now" button embedded directly in your page.
  3. Pricing Table — a multi-tier pricing grid, perfect for SaaS plans.

All three are no-code on the Flexweg side: you configure the product once in Stripe, copy a snippet, paste it into your page.

You need a Stripe account

Create one for free at stripe.com. No monthly fee — Stripe charges a percentage per transaction (typically ~1.5% + 0.25 € in Europe, see Stripe's pricing page for your country). You'll use the test mode first, then switch to live mode when you're ready to take real money.

redirectToCheckout is removed

If you're following an older tutorial that uses stripe.redirectToCheckout() in client-side JavaScript, stop — Stripe removed that method on 30 September 2025. Use Payment Links, Buy Button or Pricing Table instead.

Option 1 — Payment Links (simplest)​

A Payment Link is a standalone URL Stripe generates for you. Anyone who clicks it lands on a Stripe-hosted checkout page, pays, and you get notified. On your Flexweg site, it's just a regular link — no script tag, no embed, nothing to install.

Great for: one-off products, services, donations, ebook sales, workshop tickets.

  1. Log in to your Stripe Dashboard.
  2. Go to Product catalog → Payment links (or directly dashboard.stripe.com/payment-links).
  3. Click + New.
  4. Either pick an existing product or + Add a product: fill in the name, description, image, price, currency, recurring or one-time.
  5. Optionally configure:
    • Custom fields (e.g. ask for the buyer's shipping address, a company name, a note).
    • Tax (collect VAT automatically with Stripe Tax).
    • Shipping rates for physical goods.
    • Confirmation page — either Stripe's default thank-you page, or a URL on your own site (e.g. https://your-site.flexweg.com/thank-you.html).
  6. Click Create link.

You now have a URL that looks like https://buy.stripe.com/abc123XYZ….

Add it to your Flexweg page​

Turn it into a regular button:

index.html
<a class="button button--primary" href="https://buy.stripe.com/abc123XYZ">
  Buy now — 29 €
</a>

That's it. Style the button however you want — Stripe doesn't care about the HTML, only that clicking it opens the URL.

Send the buyer back to your site​

In the Payment Link settings, under Confirmation page, pick Don't show confirmation page and set a Redirect URL like https://your-site.flexweg.com/thank-you.html. Create that page on your Flexweg site with a "Thank you for your purchase!" message — Stripe redirects there after payment.

What you get out of the box​

  • A receipt email sent automatically to the buyer.
  • The payment in your Stripe dashboard, with the customer's email, amount, fees, payout schedule.
  • Automatic tax if you've enabled Stripe Tax.
  • Support for every payment method Stripe offers (cards, Apple Pay, Google Pay, SEPA, Klarna…) without configuring any of them.
  • Reusable — the same link works for multiple buyers, as many times as you want.

Option 2 — Buy Button (embedded CTA)​

A Buy Button is a Stripe-managed button you drop into any HTML page. It opens the same checkout flow as a Payment Link but looks native to your page — no redirect to Stripe's domain to pick the product. It's built on top of Payment Links, so everything the link does, the button does.

Great for: product pages where you want the CTA to feel integrated rather than look like a plain hyperlink.

Create the button​

  1. Create a Payment Link first (same steps as Option 1).
  2. On the Payment Link's detail page, click Buy button (in the side panel).
  3. Customize the button's color, shape, font, and language to match your site.
  4. Click Copy code.

Stripe gives you a two-part snippet.

Paste the snippet into your page​

product.html
<!-- Once, near the end of <body> -->
<script async src="https://js.stripe.com/v3/buy-button.js"></script>

<!-- Anywhere you want the button to appear -->
<stripe-buy-button
  buy-button-id="buy_btn_1234567890"
  publishable-key="pk_live_xxxxxxxxxxxxxxxxxxxxxxxx"
>
</stripe-buy-button>

Replace buy_btn_1234567890 and pk_live_xxxxxxxxxxxxxxxxxxxxxxxx with your actual values (the snippet Stripe gives you already has them filled in).

Useful attributes​

You can personalize each button instance without touching the Stripe dashboard:

AttributePurpose
customer-email="[email protected]"Pre-fill the email on the checkout page.
client-reference-id="order_abc123"Attach your own reference string (up to 200 chars) to the payment — visible in your Stripe dashboard for reconciliation.
The publishable key is safe to ship; the secret key is not

Stripe's publishable key (starting with pk_live_ or pk_test_) is designed to live in client-side HTML. Your secret key (starting with sk_live_ or sk_test_) must never leave your server — never paste it in HTML, JavaScript, or a Flexweg-hosted file. It grants full access to your Stripe account.

Option 3 — Pricing Table (SaaS tiers)​

A Pricing Table is a responsive pricing grid with up to 4 plans per billing interval (monthly / yearly), each with its own CTA that goes straight to Stripe Checkout for that plan. One snippet renders the whole table.

Great for: SaaS landing pages, membership sites, anything with multiple tiers ("Starter / Pro / Business").

Create the pricing table​

  1. In your Stripe Dashboard, go to Product catalog → Pricing tables (or dashboard.stripe.com/pricing-tables).
  2. Click + Create pricing table.
  3. Add the products you want to show (up to 4 per interval). Each product needs one or more prices (monthly, yearly…).
  4. Choose the layout, highlight a recommended plan, customize text and buttons.
  5. Click Save and preview.
  6. When you're happy, click the </> Embed code button.

Paste the snippet into your page​

pricing.html
<!-- Once, near the end of <body> -->
<script async src="https://js.stripe.com/v3/pricing-table.js"></script>

<!-- Where the table should render -->
<stripe-pricing-table
  pricing-table-id="prctbl_1234567890"
  publishable-key="pk_live_xxxxxxxxxxxxxxxxxxxxxxxx"
>
</stripe-pricing-table>

Stripe renders a responsive grid on page load. Every button in the table opens Stripe Checkout for the selected plan. Subscriptions start automatically on successful payment.

Edits stay in sync​

Change a price, add a plan, reorder the table in the Stripe dashboard — your published page updates instantly. You don't re-deploy anything on Flexweg; the embed fetches the latest configuration on page load.

Test it locally first

A pricing table needs a real domain to render — file:// URLs won't work. Use your Flexweg dev URL or npm run dev with your site generator.

Choosing between the three​

You want to…Best option
Sell a single digital product, a workshop ticket, or collect a one-time paymentPayment Link — just paste a URL.
Have a styled "Buy now" button on a product page that matches your siteBuy Button — same capabilities, better UX.
Show 2–4 SaaS tiers on a pricing page with monthly/yearly togglesPricing Table — one snippet, full grid.
Accept donations on a landing pagePayment Link with "Customer-determined pricing" and a minimum amount.
Sell physical goods with shippingPayment Link — configure shipping rates in the dashboard.
Keep the checkout fully inside your page (no Stripe-hosted step)Embedded Checkout — requires a small backend, see next section.

Going further — Embedded Checkout & webhooks​

The three options above cover the vast majority of use cases without a backend. If you need more control — a fully embedded Stripe checkout iframe on your page instead of Stripe-hosted, or automated fulfillment on payment (send a PDF, grant access to a protected URL, trigger an email) — you'll need a small serverless function.

The pattern:

  1. A serverless function (Cloudflare Worker, Netlify Function, Vercel Function…) creates a Stripe Checkout Session using your secret key, which never leaves the function.
  2. Your Flexweg page calls that function via fetch() to get the session's client_secret.
  3. You mount Stripe's Embedded Checkout (stripe.initEmbeddedCheckout({ clientSecret })) in a div on your page.
  4. Optionally, a second serverless endpoint receives webhook events from Stripe (checkout.session.completed) and triggers your fulfillment logic — sending an email, marking the order in a database, etc.

See Connect to external databases for the serverless-proxy pattern. All the same providers work (Cloudflare Workers is the simplest free tier for this).

Testing before you go live​

Stripe has two modes:

  • Test mode — use the publishable key starting with pk_test_ and test cards like 4242 4242 4242 4242 (any future expiry, any CVC, any ZIP). No real money moves. Perfect for building and verifying your flow.
  • Live mode — use pk_live_ keys. Real cards, real money.

You can toggle between them with the Test mode switch at the top-right of your Stripe dashboard. The URLs and IDs (Payment Links, Buy Buttons, Pricing Tables) are mode-specific — a Payment Link created in test mode won't work in live mode. Recreate each one in live mode before publishing.

Common questions​

Do I need a business registration to use Stripe? Stripe's requirements vary by country but most allow solo freelancers and self-employed sellers. Check stripe.com/about for your country.

What about EU VAT? Enable Stripe Tax on your Payment Links and Pricing Tables; Stripe calculates and collects VAT automatically based on the buyer's country.

How do I refund a payment? From your Stripe Dashboard → Payments → click the payment → Refund. No code needed.

Can I use Stripe in parallel with Flexweg's built-in forms? Yes. Put a Flexweg form on the same page for lead collection, and a Stripe button for payment. They operate independently.

What fees does Stripe charge? See Stripe's pricing page. Flexweg takes no cut on Stripe transactions — Stripe is billed separately, you keep your margin.

Sources​