Embedded Payments: How to Add a Payment Button to Any Website

Embedded payments is the pattern of putting financial features — checkout, wallets, payouts — inside a product whose primary job is something else. Shopify embeds payments inside an e-commerce platform. Toast embeds them inside a restaurant POS. You can do the same in any vertical where money changes hands.

Why embed instead of redirect

Redirecting customers to a third-party checkout is the easy path, and for many use cases it is fine. Embedding pays off when:

The handoff hurts conversion (every redirect drops 5-15% of users on mobile).
You want full control of the visual experience.
You need to attach context to the payment (cart contents, internal IDs, custom metadata) that a hosted page cannot easily display.
You are building a multi-sided product where money flows between users, not just into your account.

The two architectural choices

There are essentially two camps. The first is drop-in components: prebuilt UI elements (Stripe Elements, Adyen Components, Cenoa Pay Button) that you embed in your own pages. They handle PCI scope, 3D Secure, and payment-method routing. You write very little payments code.

The second is fully custom UI on top of a payments API. You build your own card form, your own wallet selector, your own confirmation screen — and you take on PCI compliance, 3D Secure orchestration, and a much longer roadmap. Almost no one outside enterprise scale should choose this path.

A minimal embedded checkout

A typical drop-in flow looks like this on the server:

const session = await cenoa.checkout.sessions.create({
  amount: 4500,
  currency: "usd",
  customer_email: user.email,
  metadata: { order_id: order.id },
});
return { client_secret: session.client_secret };

And on the client:

<CheckoutProvider clientSecret={clientSecret}>
  <PaymentElement />
  <PayButton />
</CheckoutProvider>

That is the entire integration for the happy path. The component handles cards, Apple Pay, Google Pay, SEPA, and any other method enabled on your account.

The hard parts no one mentions

Webhook reliability. Your server must idempotently handle the same event being delivered twice. Use the event ID as your idempotency key.
Refunds and partial captures. Plan the data model before you launch, not after the first refund.
Disputes. Build the evidence-collection flow into your product from day one — fulfillment proof, communication logs, IP, device fingerprint.
Multi-currency rounding. If you display prices in one currency and charge in another, lock the FX rate at the moment the user clicks pay, not at the moment your server receives the request.

When to bring in a platform like Cenoa

If you are a marketplace, SaaS, or vertical product whose users need to be paid out — not just collected from — you have crossed into platform territory. At that point you need connected accounts, automated payouts, and split payments. Building that on raw Stripe APIs is a six-month project; building it on Cenoa's platform layer is closer to a week.

How Cenoa Payment Helps

Cenoa Payment was built to remove the friction this article describes. Whether you are a freelancer collecting your first international invoice or a fast-growing merchant accepting payments in dozens of currencies, Cenoa gives you wallet, checkout, and payouts under one roof — backed by regulated payment and banking partners.

Open a multi-currency wallet in minutes, no minimum balance.
Accept cards, Apple Pay, SEPA, iDeal, bank transfers, and crypto from 195 countries.
Pay and get paid by username, link, or QR code — no IBAN gymnastics.
Real-time fraud and KYC tooling so your account stays in good standing.