Accept a payment

Securely accept payments online.

Redirect to a Stripe-hosted payment page using Stripe Checkout. See how this integration compares to Stripe’s other integration types.

Integration effort

Low code

Integration type

Redirect to Stripe-hosted payment page

UI customization

Limited customization

Try it out

Set up Stripe
Server-side

First, register for a Stripe account.

Use our official libraries to access the Stripe API from your application:

Command Line

# 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>
    <!-- Use action="/create-checkout-session.php" if your server is PHP based. -->
    <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 success_url, a page on your website that Checkout returns your customer to after they complete the payment. You can optionally provide cancel_url, a page on your website that Checkout returns your customer to if they cancel the payment process.

Note

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

Note

By default, Stripe enables cards and other prevalent payment methods that can help you reach more customers, and you can turn on or turn off payment methods right from the Stripe Dashboard. Stripe evaluates the currency, payment method restrictions, and other parameters to determine the list of supported payment methods to show in Checkout.

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

Command Line

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

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

Command Line

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

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 confirm it sent an XHR request 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 returned.

To see how your payment methods appear to customers, enter a transaction ID or set an order amount and currency in the Dashboard.

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:

Command Line

curl https://api.stripe.com/v1/checkout/sessions \
  -u "sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d "line_items[0][price_data][currency]"=usd \
  -d "line_items[0][price_data][product_data][name]"=T-shirt \
  -d "line_items[0][price_data][unit_amount]"=2000 \
  -d "line_items[0][quantity]"=1 \
  -d mode=payment \
  --data-urlencode success_url="http://localhost:4242/success.html" \
  --data-urlencode cancel_url="http://localhost:4242/cancel.html"

Note

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.
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 details page. The Checkout summary section contains billing information and the list of items purchased, which you can use to manually fulfill the order.

Test your integration

To test your Stripe-hosted payment form integration:

Create a Checkout Session.
Fill out the payment details with a method from the following table.
- Enter any future date for card expiry.
- Enter any 3-digit number for CVC.
- Enter any billing postal code.
Click Pay. You’re redirected to your success_url.
Go to the Dashboard and look for the payment on the Payments page. If your payment succeeded, you’ll see it in that list.
Click your payment to see more details, like a Checkout summary with billing information and the list of purchased items. You can use this information to fulfill the order.

Learn more about testing your integration.

Payment method	Scenario	How to test
Credit card	The card payment succeeds and doesn’t require authentication.	Fill out the credit card form using the credit card number `4242 4242 4242 4242` with any expiration, CVC, and postal code.
Credit card	The card payment requires authentication.	Fill out the credit card form using the credit card number `4000 0025 0000 3155` with any expiration, CVC, and postal code.
Credit card	The card is declined with a decline code like `insufficient_funds`.	Fill out the credit card form using the credit card number `4000 0000 0000 9995` with any expiration, CVC, and postal code.
Credit card	The UnionPay card has a variable length of 13-19 digits.	Fill out the credit card form using the credit card number `6205 500 0000 0000 0004` with any expiration, CVC, and postal code.

Test cards

Number	Description
	Succeeds and immediately processes the payment.
	Requires 3D Secure 2 authentication for a successful payment.
	Always fails with a decline code of `insufficient_funds`.

Apple Pay and Google Pay

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

OptionalCreate products and prices

OptionalExisting customers
Server-side

OptionalPrefill customer data
Server-side

OptionalSave payment method details
Server-side

OptionalSeparate authorization and capture
Server-side

OptionalCustomer account management
No code

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

Accept a payment

Integration effort

Integration type

UI customization

Set up StripeServer-side

Redirect your customer to Stripe CheckoutClient-sideServer-side

Note

Note

Testing

Show a success pageClient-sideServer-side

Note

Testing

Test your integration

Test cards

Apple Pay and Google Pay

OptionalCreate products and prices

OptionalExisting customersServer-side

OptionalPrefill customer dataServer-side

OptionalSave payment method detailsServer-side

OptionalSeparate authorization and captureServer-side

OptionalCustomer account managementNo code

See also

Set up Stripe
Server-side

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

Show a success page
Client-side
Server-side

OptionalExisting customers
Server-side

OptionalPrefill customer data
Server-side

OptionalSave payment method details
Server-side

OptionalSeparate authorization and capture
Server-side

OptionalCustomer account management
No code