Accept a payment
Customize logo, images, and colors.
Built-in support for Apple Pay, and Google Pay.
View the demo to see a hosted example.
Set up StripeServer-side
First, make sure that you have set up an account name on the Stripe Dashboard.
Then install the libraries for access to the Stripe API from your application:
# Available as a gem sudo gem install stripe
# If you use bundler, you can add this line to your Gemfile gem 'stripe'
Add a checkout button on your webpageClient-side
Create a checkout button on your website that takes your customer to Stripe Checkout, a Stripe-hosted payment form where they can complete their payment.
Add a button
Start by adding a checkout button to your page:
<html> <head> <title>Buy cool new product</title> </head> <body> <button id="checkout-button">Checkout</button> </body> </html>
Add the Stripe.js library to your page
Adding Stripe.js to your page automatically includes advanced fraud detection whenever your customers use Checkout. Add the library to your page:
<html> <head> <title>Buy cool new product</title> <script src="https://js.stripe.com/v3/"></script> </head> <body> <button id="checkout-button">Checkout</button> </body> </html>
Always load Stripe.js directly from https://js.stripe.com
. You can’t include it in a bundle or self-host it.
Redirect your customer to Stripe CheckoutClient-sideServer-side
Set up the new button to redirect your customer to the Stripe-hosted payment form. After being redirected, your customer can enter their payment details in the form.
The redirect to Stripe Checkout cuts down on development time and maintenance and gives you added security. It also reduces the amount of private customer information you handle on your site, gives you immediate access to digital wallets in addition to card payments, and allows you to customize the styling of the Checkout form to match your branding.
Create a Checkout Session
Checkout Sessions expire 24 hours after creation.
A Checkout Session is the programmatic representation of what your customer sees when they’re redirected to the payment form. You can configure it with options such as:
- line items to charge
- currencies to use
- payment methods you accept
You also need to specify:
- A
success_url
, a page on your website to redirect your customer after they complete the payment. - A
cancel_url
, a page on your website to redirect your customer if they click on your logo in Checkout.
After successfully creating a Checkout Session, redirect your customer to Stripe Checkout. You need a server-side endpoint to create the Checkout Session to prevent malicious customers from being able to set their own prices.
# Set your secret key. Remember to switch to your live secret key in production. # See your keys here: https://dashboard.stripe.com/apikeys Stripe.api_key =
# This example sets up an endpoint using the Sinatra framework. # Watch this video to get started: https://youtu.be/8aA9Enb8NVc. require 'json' require 'sinatra' post '/create-checkout-session' do session = Stripe::Checkout::Session.create({ payment_method_types: ['card'], line_items: [{ price_data: { currency: 'usd', product_data: { name: 'T-shirt', }, unit_amount: 2000, }, quantity: 1, }], mode: 'payment', # These placeholder URLs will be replaced in a following step. success_url: 'https://example.com/success', cancel_url: 'https://example.com/cancel', }) { id: session.id }.to_json end"sk_test_4eC39HqLyjWDarjtT1zdp7dc"
Apple Pay and Google Pay are enabled by default and automatically appear in Checkout when a customer uses a supported device and has saved at least one card in their digital wallet. You can accept additional payment methods using the payment_method_types
property. See payment methods overview for more details.
Test your endpoint by starting your web server (e.g., localhost:4242
) and running the following command:
curl -X POST -is "http://localhost:4242/create-checkout-session" -d ""
You should see a response in your terminal that looks like this:
HTTP/1.1 200 OK Content-Type: application/json { id: "cs_test_.........." }
Add an event handler to the checkout button
Now that you have a <button>
and an endpoint to create a Checkout Session, modify the <button>
to redirect to Stripe Checkout when clicked, using redirectToCheckout and providing the Checkout Session ID:
<html> <head> <title>Buy cool new product</title> </head> <body> <button id="checkout-button">Checkout</button> <script type="text/javascript"> // Create an instance of the Stripe object with your publishable API key var stripe = Stripe(
); var checkoutButton = document.getElementById('checkout-button'); checkoutButton.addEventListener('click', function() { // Create a new Checkout Session using the server-side endpoint you // created in step 3. fetch('/create-checkout-session', { method: 'POST', }) .then(function(response) { return response.json(); }) .then(function(session) { return stripe.redirectToCheckout({ sessionId: session.id }); }) .then(function(result) { // If `redirectToCheckout` fails due to a browser or network // error, you should display the localized error message to your // customer using `error.message`. if (result.error) { alert(result.error.message); } }) .catch(function(error) { console.error('Error:', error); }); }); </script> </body> </html>'pk_test_TYooMQauvdEDq54NiTphI7jx'
Testing
You should now have a working checkout button that redirects your customer to Stripe Checkout.
- Click the checkout button.
- You’re redirected to the Stripe Checkout payment form.
If your integration isn’t working:
- Open the Network tab in your browser’s developer tools.
- Click the checkout button and see if an XHR request is made to your server-side endpoint (
POST /create-checkout-session
). - Verify the request is returning a 200 status.
- Use
console.log(session)
inside your button click listener to confirm the correct data is returned.
Show a success pageClient-sideServer-side
It’s important for your customer to see a success page after they successfully submit the payment form. This success page is hosted on your site.
Create a minimal success page:
<html> <head><title>Thanks for your order!</title></head> <body> <h1>Thanks for your order!</h1> <p> We appreciate your business! If you have any questions, please email <a href="mailto:orders@example.com">orders@example.com</a>. </p> </body> </html>
Next, update the Checkout Session creation endpoint to use this new page:
# Set your secret key. Remember to switch to your live secret key in production. # See your keys here: https://dashboard.stripe.com/apikeys Stripe.api_key =
# This example sets up an endpoint using the Sinatra framework. # Watch this video to get started: https://youtu.be/8aA9Enb8NVc. require 'json' require 'sinatra' post '/create-checkout-session' do session = Stripe::Checkout::Session.create({ payment_method_types: ['card'], line_items: [{ price_data: { currency: 'usd', product_data: { name: 'T-shirt', }, unit_amount: 2000, }, quantity: 1, }], mode: 'payment', success_url: 'http://localhost:4242/success.html', cancel_url: 'http://localhost:4242/cancel.html', }) { id: session.id }.to_json end"sk_test_4eC39HqLyjWDarjtT1zdp7dc"
If you want to customize your success page, read the custom success page guide.
Testing
- Click your checkout button
- Fill out the payment details with the test card information:
- Enter
4242 4242 4242 4242
as the card number. - Enter any future date for card expiry.
- Enter any 3-digit number for CVC.
- Enter any billing postal code.
- Enter
- Click Pay.
- You’re redirected to your new success page.
Next, find the new payment in the Stripe Dashboard. Successful payments appear in the Dashboard’s list of payments. When you click a payment, it takes you to the payment detail page. The Checkout summary section contains billing information and the list of items purchased, which you can use to manually fulfill the order.
Additional testing resources
There are several test cards you can use to make sure your integration is ready for production. Use them with any CVC, postal code, and future expiration date.
Number | Description |
---|---|
Succeeds and immediately processes the payment. | |
3D Secure 2 authentication must be completed for a successful payment. | |
Always fails with a decline code of insufficient_funds . |
For the full list of test cards see our guide on testing.
Apple Pay and Google Pay
No configuration or integration changes are required to enable Apple Pay or Google Pay in Stripe Checkout. These payments are handled the same way as other card payments.
The Apple Pay button is displayed in a given Checkout Session if all of the following apply:
- Apple Pay is enabled for Checkout in your Stripe Dashboard.
- The customer’s device is running macOS 10.14.1+ or iOS 12.1+.
- The customer is using the Safari browser.
- The customer has a valid card registered with Apple Pay.
This ensures that Checkout only displays the Apple Pay button to customers who are able to use it.
Now that you have your basic integration working, learn how to programmatically get a notification whenever a customer pays.