Stripe Checkout

Test environment

Stripe embedded Checkout demo

Stripe's prebuilt Checkout mounted directly on this page rather than reached by redirect, running in Stripe test mode. Change a session parameter on the left and the Checkout Session is created again with it.

Stripe.js v3

What Stripe Checkout is

Stripe Checkout is Stripe's prebuilt payment page: a hosted checkout component that handles the full payment flow. Stripe renders the form, applies input validation, adapts for locale, handles 3D Secure, and surfaces the payment methods most relevant to each shopper based on their country and the merchant's configuration.

It ships in two delivery modes, hosted and embedded. This playground runs the embedded variant.

Embedded versus hosted

In hosted mode, Stripe generates a URL on checkout.stripe.com and the shopper is redirected there to pay. In embedded mode, the one shown here, Stripe.js mounts the same Checkout form inside an iframe on the merchant's own page. The surrounding page, including branding, analytics and navigation, stays intact throughout.

Merchants tend to choose embedded when they want the shopper to feel they never left the site, and hosted when they want the simplest possible integration and are willing to hand off the page.

How this playground works

Every configuration change remints the Checkout Session on the server. On load, the browser asks the server to create a Session through the Stripe Checkout Sessions API. The server returns a client secret and Stripe.js mounts the embedded Checkout with it.

Toggling any control destroys the current mount, creates a new Session with the updated parameters, and mounts again. That is why every option in the panel carries a Session marker: none of them can be changed on a live Session, they can only be set at creation. On completion, Stripe returns the shopper to this page with a session_id query parameter, and the final status is read back server-side.

What each option does

  • Country uses Stripe's test-mode geolocation behaviour. The server appends +location_XX to the customer's email and Stripe treats the shopper as visiting from that country. This drives the currency (EUR for NL and DE, GBP for GB, USD for US) and which local payment methods appear, such as iDEAL for the Netherlands or SEPA Direct Debit across the euro zone.
  • Require billing address switches billing_address_collection between auto, where Stripe decides based on the payment method, and required, where the address form is always shown.
  • Allow saving payment method maps to saved_payment_method_options.payment_method_save and shows a "Save my info" option in the form. It requires a Customer on the Session, which this playground creates on your first visit and keeps in your browser's local storage.
  • Allow removing saved methods maps to saved_payment_method_options.payment_method_remove and lets the shopper delete saved cards inside the Checkout UI. You need a saved method before there is anything to remove, so save one first.
  • Adyen Drop-in is Adyen's equivalent all-in-one checkout component, and the closest comparison to this page.
  • Adyen Components takes the opposite approach, mounting each payment method individually so you assemble the checkout yourself.

Personal project by Elie Joseph. Not affiliated with, endorsed by, or officially connected to any payment service provider. All product and company names, logos and brands referenced on this site are property of their respective owners. Playgrounds run against test environments only. No real payments are processed. Use only test data. Never enter real card numbers, real personal information, or any genuine payment details on this site or in any linked test environment.