Sign in
An image of the Stripe logo
Create account
Sign in
Home
Payments
Business operations
Financial services
Developer tools
Security
All products
Home
Payments
Business operations
Home
Payments
Business operations
Financial services
Developer tools
Support
Overview
Overview
How cards work
Quickstart
Accept a payment
Share a payment link
More payment scenarios
U.S. and Canadian cards
Testing
No-code options
payments
·
HomePaymentsOnline payments

Accept a payment

Securely accept payments online.
Complexity:

Customize logo, images, and colors.

Built-in support for Apple Pay, and Google Pay.

Clone a sample integration from the docs or on GitHub.

View the demo to see a hosted example.

Set up Stripe
Server-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:

Terminal
# Available as a gem sudo gem install stripe
Gemfile
# If you use bundler, you can add this line to your Gemfile gem 'stripe'

Redirect your customer to Stripe Checkout
Client-side
Server-side

Add a checkout button to your website that calls a server-side endpoint to create a Checkout Session.

checkout.html
<html> <head> <title>Buy cool new product</title> </head> <body> <form action="/create-checkout-session" method="POST"> <button type="submit">Checkout</button> </form> </body> </html>

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

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.

Checkout Sessions expire 24 hours after creation.

After creating a Checkout Session, redirect your customer to the URL returned in the response.

# This example sets up an endpoint using the Sinatra framework. # Watch this video to get started: https://youtu.be/8aA9Enb8NVc. require 'json' require 'sinatra' require 'stripe' # 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 =
'sk_test_4eC39HqLyjWDarjtT1zdp7dc'
post '/create-checkout-session' do session = Stripe::Checkout::Session.create({ 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', }) redirect session.url, 303 end

Stripe enables some payment methods by default, such as credit cards, Apple Pay, and Google Pay. These payment methods automatically appear in Checkout, depending on the customer’s currency. See payment methods in the Dashboard for more details.

Test your endpoint by starting your web server (for example, localhost:4242) and running the following command:

Terminal
curl -X POST -is "http://localhost:4242/create-checkout-session" -d ""

You should see a response in your terminal that looks like this:

Terminal
HTTP/1.1 303 See Other Location: https://checkout.stripe.com/pay/cs_test_... ...

Testing

You should now have a working checkout button that redirects your customer to Stripe Checkout.

  1. Click the checkout button.
  2. You’re redirected to the Stripe Checkout payment form.

If your integration isn’t working:

  1. Open the Network tab in your browser’s developer tools.
  2. Click the checkout button and confirm it sent an XHR request to your server-side endpoint (POST /create-checkout-session).
  3. Verify the request is returning a 200 status.
  4. Use console.log(session) inside your button click listener to confirm the correct data returned.

Show a success page
Client-side
Server-side

It’s important for your customer to see a success page after they successfully submit the payment form. Host this success page on your site.

Create a minimal success page:

success.html
<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 =
'sk_test_4eC39HqLyjWDarjtT1zdp7dc'
# 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({ 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', }) redirect session.url, 303 end

If you want to customize your success page, read the custom success page guide.

Testing

  1. Click your checkout button
  2. 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.
  3. Click Pay.
  4. 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.
Complete 3D Secure 2 authentication 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

Stripe Checkout doesn’t need configuration or integration changes to enable Apple Pay or Google Pay. Stripe handles these payments the same way as other card payments.

A Checkout Session displays the Apple Pay button when all the following apply:

  • Your Stripe Dashboard has Apple Pay enabled for Checkout.
  • 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.

OptionalCreate products and prices upfront

OptionalExisting customers
Server-side

OptionalPrefill customer data
Server-side

OptionalSave payment method details
Server-side

OptionalSeparate authorization and capture
Server-side

Now that you have your basic integration working, learn how to programmatically get a notification whenever a customer pays.

See also

  • Add discounts
  • Collect taxes
  • Collect tax IDs
  • Add shipping
  • Customize your branding
  • Customize your success page
Was this page helpful?
Questions? Contact us.
View developer tutorials on YouTube.
Check out our product changelog.
Powered by Markdoc
You can unsubscribe at any time. Read our privacy policy.
On this page
Set up Stripe
Redirect your customer to Stripe Checkout
Show a success page
Additional testing resources
Create products and prices upfront
Existing customers
Prefill customer data
Save payment method details
Separate authorization and capture
Related Guides
More Payment Scenarios
Payments Quickstart
How Cards Work
Stripe Shell
Test mode
▗▄ ▄▟█ █▀▀ ▗▟████▙▖ ██████ ███▗▟█ ███ ███▗▟██▙▖ ▗▟█████▙▖ ███▖ ▀▀ ███ ███▀▀▀ ███ ███▀ ███ ███ ███ ▝▜████▙▖ ███ ███ ███ ███ ███ █████████ ▄▄ ▝███ ███ ▄ ███ ███ ███▄ ███ ███ ▄▄ ▝▜████▛▘ ▝▜███▛ ███ ███ ███▝▜██▛▘ ▝▜█████▛▘ ███ ▀▘
Welcome to the Stripe Shell! This is a graphical user interface of the Stripe CLI. You can use it to discover webhook events and manage your Stripe resources. By pressing ctrl + ` you can toggle it open from any page within the Stripe documentation. - View supported commands: - Listen for webhook events: - Trigger webhook events: - Call Stripe APIs: stripe [api resource] [api operation] (e.g. )
The Stripe Shell is best experienced on desktop.
$