Stripe Embedded Checkout vs Stripe Elements
By Shawn Michael Thomas II, Founder of Simple Easy Transactions · Published ·
Should I use Stripe Embedded Checkout or Stripe Elements? When payment is its own step, I use Stripe Embedded Checkout: Stripe builds the whole form and I just give it a place on my page. When the payment fields have to sit inside a bigger form I control, I use Stripe Elements. Elements gives me more control and costs more work to build and maintain. Either way, Stripe collects the card, so it never reaches my server.
AT A GLANCE
Embedded Checkout vs Stripe Elements.
| Question | Embedded Checkout | Stripe Elements |
|---|---|---|
| Who builds the form | Stripe, as one complete page | You, from Stripe's individual pieces |
| How much you can change | Brand settings; Stripe decides the layout | Where each piece goes and how it looks |
| Payment methods | Chosen and shown by Stripe | Shown by Stripe's Payment Element, placed where you choose |
| Order summary, discounts, tax | Built in | You build what you need |
| Work to build | One server route and one spot on the page | Your form, its states, and the confirm step |
| Card details | Collected by Stripe | Collected by Stripe |
HOW EACH ONE WORKS
How each one works.
Stripe Checkout, hosted or embedded, is a complete payment page. Stripe manages the payment methods, address and tax collection, discounts, subscriptions and the confirmation step, and it can add new payment methods without a code change on your side.
Elements is a set of building blocks, such as the Payment Element, the Address Element and the Express Checkout Element for wallets like Apple Pay, that you arrange in your own form. Stripe now recommends pairing Elements with Checkout Sessions for most integrations, which keeps Checkout's server-side features while giving you control of the page.
A quick test: if the purchase is its own step, use Embedded Checkout. If payment is one group of fields inside a longer form you own, use Elements.
FIELD NOTES
What I've learned building this.
- I've built both. The Embedded Checkout Starter Kit sold on this site uses Embedded Checkout, because a fixed-price digital product needs nothing custom.
- This site's own checkout uses Elements with a Checkout Session, because Open Payment needs my own amount field beside Stripe's payment fields.
- With Elements, the look is yours to guard. One style on my site depended on a color setting that wasn't defined where the checkout button appeared, and the button rendered invisible but still clickable. Every checkout style now carries a fallback color, and a test checks for it.
HOW TO CHOOSE
How I'd choose.
- Choose Embedded Checkout when the payment is its own step and Stripe's layout works for you.
- Choose Elements when payment fields must sit inside a form your app owns, like a booking form or a custom amount.
- Don't choose Elements only for branding. Embedded Checkout already takes your brand settings, and Elements adds work for every payment method you turn on later.
SOURCES
Where these facts come from.
Sources checked on . Providers change their products and rules, so the linked pages are the final word.