Explore different ways to accept payments on the web with Stripe.
Tip
Starting a new integration? Stripe recommends building on the Checkout Sessions API — choose a Stripe-hosted page for simplicity or Elements with Checkout Sessions for full design control.
This repository includes four sample integrations built on two different APIs.
Stripe recommends the Checkout Sessions API for most integrations. It requires less code than the Payment Intents API and includes built-in support for tax, discounts, shipping, adaptive pricing, recurring payments, localization, and automatic payment methods.
Prebuilt Checkout page — Stripe-hosted
Redirect customers to a Stripe-hosted payment page. The simplest integration with the least code.
- Low complexity. Create a Checkout Session and redirect — that's it.
- Customize logo, images, and colors.
- Payment methods added automatically with a single line change.
- Built-in Apple Pay and Google Pay support.
- Customers redirect to a Stripe-hosted page, then return to your site.
- Small refactor to collect recurring payments.
- Built-in input validation and error handling.
- Localized in 50+ languages.
- Automate sales tax, VAT, and GST calculation with one line of code.
Elements with Checkout Sessions — Custom form
Create a Checkout Session on your server, then render the Payment Element on your site using ui_mode: 'elements'. Full design control while Stripe handles the payment logic.
- Moderate complexity. A few API calls on your server, a few lines of Stripe.js on your client.
- Customize components with the Appearance API.
- Payment methods added automatically — no code changes needed for new methods.
- Built-in Apple Pay and Google Pay support.
- Customers stay on your site, with a redirect after payment completion.
- Small refactor to collect recurring payments.
- Built-in input validation and error handling.
- Localized in 50+ languages.
- Automate sales tax, VAT, and GST calculation with one line of code.
The Payment Intents API gives you direct control over the payment lifecycle. It requires more server-side code and doesn't include built-in tax or easy recurring payment support. Use this when you need capabilities beyond what Checkout Sessions provides.
Payment Element — Prebuilt UI
Render the Payment Element on your site using the Payment Intents API directly. Similar UI to Elements with Checkout Sessions but you manage the payment lifecycle yourself.
- Moderate complexity. More server-side payment lifecycle management.
- Customize components with the Appearance API.
- Payment methods added automatically with a single line change.
- Built-in Apple Pay and Google Pay support.
- Customers stay on your site, but payment completion may trigger a redirect.
- Large refactor to collect recurring payments.
- Built-in input validation; you must implement error handling.
- Localized in 50+ languages.
- Calculate tax using the Tax API.
Custom payment flow — Advanced
Build a fully custom checkout using individual Stripe Elements and the Payment Intents API. Maximum control over every detail.
- High complexity. You manage the full payment lifecycle and UI.
- Customize all components with CSS.
- Implement each payment method as a separate integration.
- Integrate Apple Pay and Google Pay with extra code.
- Customers stay on your site throughout the entire flow.
- Large refactor to collect recurring payments.
- Implement your own input validation and error handling.
- Implement your own localization.
- Calculate tax using the Tax API.
| Checkout Sessions API | Payment Intents API | |||
|---|---|---|---|---|
| Prebuilt Checkout page | Elements with Checkout Sessions | Payment Element | Custom payment flow | |
| Complexity | Low | Moderate | Moderate | High |
| Customization | Logo, images, colors | Appearance API | Appearance API | Full CSS |
| Customer experience | Redirects to Stripe | Stays on your site | Stays on your site | Stays on your site |
| Recurring payments | Small refactor | Small refactor | Large refactor | Large refactor |
| Tax calculation | Built-in | Built-in | Tax API | Tax API |
| Adaptive pricing | Built-in | Built-in | Not available | Not available |
| Payment methods | Automatic | Automatic | Automatic | Manual per method |
| Payment method | Prebuilt Checkout page | Elements with Checkout Sessions | Payment Element | Custom payment flow |
|---|---|---|---|---|
| ACH Debit | ✅ | ✅ | ✅ | ✅ |
| Affirm | ✅ | ✅ | ✅ | |
| Afterpay / Clearpay | ✅ | ✅ | ✅ | ✅ |
| Alipay | ✅ | ✅ | ✅ | ✅ |
| Amazon Pay | ✅ | ✅ | ✅ | |
| Apple Pay | ✅ | ✅ | ✅ | ✅ |
| Bacs Direct Debit | ✅ | ✅ | ||
| Bancontact | ✅ | ✅ | ✅ | ✅ |
| BECS Direct Debit | ✅ | ✅ | ✅ | ✅ |
| Boleto | ✅ | ✅ | ✅ | ✅ |
| Cards | ✅ | ✅ | ✅ | ✅ |
| Cash App Pay | ✅ | ✅ | ✅ | |
| EPS | ✅ | ✅ | ✅ | ✅ |
| FPX | ✅ | ✅ | ✅ | ✅ |
| Google Pay | ✅ | ✅ | ✅ | ✅ |
| GrabPay | ✅ | ✅ | ✅ | ✅ |
| iDEAL | ✅ | ✅ | ✅ | ✅ |
| Klarna | ✅ | ✅ | ✅ | ✅ |
| Link | ✅ | ✅ | ✅ | |
| Multibanco | ✅ | ✅ | ✅ | |
| OXXO | ✅ | ✅ | ✅ | ✅ |
| PayPal | ✅ | ✅ | ✅ | ✅ |
| Przelewy24 (P24) | ✅ | ✅ | ✅ | ✅ |
| Revolut Pay | ✅ | ✅ | ✅ | |
| SEPA Direct Debit | ✅ | ✅ | ✅ | ✅ |
| WeChat Pay | ✅ | ✅ | ✅ | ✅ |
| Zip | ✅ | ✅ | ✅ |
The recommended way to use this Stripe Sample is with the Stripe CLI:
stripe samples create accept-a-paymentYou can also clone the repository directly. See the individual READMEs for setup instructions:
Checkout Sessions API (recommended):
- Prebuilt Checkout page — Stripe-hosted page
- Elements with Checkout Sessions — custom form on your site
Payment Intents API:
- Payment Element — prebuilt UI, direct API
- Custom payment flow — fully custom UI
See TESTING.md.
Dev Containers and Codespaces
We provide Dev Container configurations for most of the sample apps for web. In Visual Studio Code, use Reopen in Containers from the Command Palette and choose a sample from the options.
You can also try these samples without installing Docker by using GitHub Codespaces. Click "New with options..." and choose a sample from the Dev container configuration select box. Note: you will be charged for GitHub Codespaces usage.
After launching, export the required environment variables and start the server:
export STRIPE_PUBLISHABLE_KEY=pk_test_...
export STRIPE_SECRET_KEY=sk_test_...See TESTING.md for running tests inside Dev Containers.
Q: Which integration should I choose?
A: Start with the Checkout Sessions API — it handles tax, recurring payments, and localization with less code. Choose Prebuilt Checkout page for a Stripe-hosted page with zero front-end work, or Elements with Checkout Sessions if you want a custom payment form on your site. The Payment Element and Custom payment flow use the Payment Intents API directly, which gives you more control but requires significantly more code.
Q: Why did you pick these frameworks?
A: We chose the most minimal framework to convey the key Stripe calls and concepts you need to understand. These demos are meant as an educational tool that helps you roadmap how to integrate Stripe within your own system independent of the framework.
If you found a bug or want to suggest a new [feature/use case/sample], please file an issue.
If you have questions, comments, or need help with code, we're here to help:
- on Discord
- on X at @StripeDev
- on Stack Overflow at the stripe-payments tag
Sign up to stay updated with developer news.
Made with contrib.rocks.
