Stripe Embedded Checkout vs Hosted Checkout
By Shawn Michael Thomas II, Founder of Simple Easy Transactions · Published ·
Should I use Stripe's embedded Checkout or the Stripe-hosted Checkout page? If the customer should stay on my site, I use embedded Checkout: my server starts a Checkout Session and Stripe's payment form appears inside my page. If I want the fewest moving parts, I send them to the Stripe-hosted page, which Stripe runs from start to finish. Both are the same Stripe Checkout underneath, and both follow the same rule: nothing ships until Stripe's signed webhook confirms the payment.
AT A GLANCE
Embedded Checkout vs Stripe-hosted Checkout.
| Question | Embedded Checkout | Stripe-hosted Checkout |
|---|---|---|
| Where the customer pays | Inside your page, in a secure Stripe frame | On a Stripe page, after a redirect |
| What your server does | Starts a Checkout Session and gives your page the key it needs to show the form | Starts a Checkout Session and sends the customer to its link |
| Work on your site | Add Stripe's script and an empty spot on the page for the form | A button or a link, nothing else |
| Look and feel | Your page around it, your Stripe brand settings inside it | Stripe's page with your logo and colors |
| After paying | Stripe brings the customer back to your return page | Stripe sends the customer to your success page |
| What proves the payment | Stripe's signed webhook | Stripe's signed webhook |
HOW EACH ONE WORKS
How each one works.
Both options are Stripe Checkout: the same prebuilt payment page, with the same payment methods, discounts, taxes and receipts. The only real question is where that page lives. Stripe's documentation calls it the full-page option and lets you either redirect to it or embed it on your own site.
With the hosted page, your server creates a Checkout Session and sends the customer to the link Stripe returns. Stripe shows the page, takes the payment and sends the customer back to the success page you named. It's the least code you can write and still get a complete checkout.
With embedded Checkout, your server creates the same session in embedded mode and returns a client secret, a one-time key for that checkout. Your page loads Stripe.js and places Checkout in an empty container, and the form runs inside a secure Stripe frame, so card details go straight to Stripe and never touch your server. Stripe's guide warns against putting that form inside another frame, because some payment methods have to redirect to confirm.
There's a third way worth knowing: Checkout Sessions with Stripe Elements, where you place Stripe's payment fields inside a form you design yourself. It takes the most work and gives the most control; the Elements guide covers when that's worth it.
FIELD NOTES
What I've learned building this.
- This site's own checkout uses that third way. Open Payment lets the customer type the amount, and I wanted that field right next to Stripe's payment fields, so I used a Checkout Session with Stripe's Payment Element inside my own form.
- Stripe won't take a pay-what-you-want price in that setup, so I build the charge from the amount the customer typed and attach it to one saved product. Otherwise every payment would add a new product to the catalog.
- When a Stripe call fails, answer with your own error message. Mine once let the error escape; the server sent back an empty page, and the buyer saw a cryptic parser error instead of a sentence.
- My return page only says thank you. The order is recorded when Stripe's signed webhook arrives, and it's stored so that a repeated delivery can't record it twice.
HOW TO CHOOSE
How I'd choose.
- Choose embedded Checkout when leaving your site would break the flow, such as paying inside an app, a members area or a multi-step booking.
- Choose the hosted page when you want the least code and a short trip to Stripe is fine for your customers.
- Choose Checkout Sessions with Elements when the payment fields have to sit inside a form you already own.
SOURCES
Where these facts come from.
Sources checked on . Stripe and the app stores change their products and rules, so the linked pages are the final word.