Accept a payment

Securely accept payments online.

Build a payment form or use a prebuilt checkout page to start accepting online payments.

Not a developer?

Use Stripe’s no-code options or apps from our partners to get started and do more with your Stripe account—no code required. If you use a third-party platform to build and maintain a website, you can add Stripe payments with a plugin.

Checkout

Elements

Mobile

Build a custom payment form using Stripe Elements and the Checkout Sessions API. The Checkout Sessions API provides built-in support for tax calculation, discounts, shipping, and currency conversion, reducing the amount of custom code you need to write.

Customer location

Size

Theme

Layout

To see how Link works for a returning user, enter the email . To see how Link works during a new signup, enter any other email and complete the rest of the form. This demo only displays Google Pay or Apple Pay if you have an active card with either wallet.

Integration effort

Some code

Integration type

Combine UI components into a custom payment flow

UI customization

CSS-level customization with the Appearance API

Set up the server Server-side

Before you begin, you need to register for a Stripe account.

Use the official Stripe libraries to access the API from your application.

Command Line

Select a language

Ruby

Python

PHP

Java

Node.js

Go

.NET

No results

# Available as a gem
sudo gem install stripe

Gemfile

Select a language

Ruby

Python

PHP

Java

Node.js

Go

.NET

No results

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Create a Checkout Session Server-side

Add an endpoint on your server that creates a Checkout Session and returns its client_secret to your front end. A Checkout Session represents your customer’s session as they pay for one-time purchases or subscriptions. Checkout Sessions expire 24 hours after creation.

Note

If you’re using the Checkout Sessions API across multiple Elements integrations or user segments, use the optional integration_identifier parameter to tag each session. This lets you isolate performance metrics by integration context.

Command Line

Select a language

cURL

Stripe CLI

Ruby

Python

PHP

Java

Node.js

Go

.NET

No results

Set up the front end Client-side

Include the Stripe.js script on your checkout page by adding it to the head of your HTML file. Always load Stripe.js directly from js.stripe.com to remain PCI compliant. Don’t include the script in a bundle or host a copy of it yourself.

Make sure you’re using the latest Stripe.js version. Learn more about Stripe.js versioning.

checkout.html

Note

Stripe provides an npm package that you can use to load Stripe.js as a module. See the project on GitHub. Version 7.0.0 or later is required.

Initialize stripe.js.

checkout.js

// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe(
 'pk_test_TYooMQauvdEDq54NiTphI7jx',
);

Initialize Checkout Client-side

Call initCheckoutElementsSdk, passing in clientSecret.

initCheckoutElementsSdk returns a Checkout object that contains data from the Checkout Session and methods to update it.

Read the total and lineItems from actions.getSession(), and display them in your UI. This lets you turn on new features with minimal code changes. For example, adding manual currency prices requires no UI changes if you display the total.

checkout.html

<div id="checkout-container"></div>

checkout.js

const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
 .then((response) => response.json())
 .then((json) => json.client_secret);

const checkout = stripe.initCheckoutElementsSdk({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
 const session = loadActionsResult.actions.getSession();
 const checkoutContainer = document.getElementById('checkout-container');

 checkoutContainer.append(JSON.stringify(session.lineItems, null, 2));
 checkoutContainer.append(document.createElement('br'));
 checkoutContainer.append(`Total: ${session.total.total.amount}`);
}

Collect customer email Client-side

You must provide a valid customer email when completing a Checkout Session.

Use the Contact Details Element to collect your customer’s email address. It handles email collection and validation for you, and helps customers sign in to Link.

Alternatively, you can:

• Pass in customer_email , customer_account (for customers represented as customer-configured Account objects), or customer (for customers represented as Customer objects) when creating the Checkout Session. Stripe validates emails provided this way.
• These prefill the session with an email that customers can’t edit on the checkout page. If you want to prefill with an editable email, use defaultValues.email when initializing Checkout.
• Pass in an email you already validated on updateEmail or checkout.confirm .

checkout.html

<div id="contact-details-element">
 <!--Stripe.js injects the Contact Details Element-->
</div>

checkout.js

const contactDetailsElement = checkout.createContactDetailsElement();
contactDetailsElement.mount("#contact-details-element");

Collect payment details Client-side

Collect payment details on the client with the Payment Element. The Payment Element is a prebuilt UI component that simplifies collecting payment details for a variety of payment methods.

The Payment Element contains an iframe that securely sends payment information to Stripe over an HTTPS connection. Avoid placing the Payment Element within another iframe because some payment methods require redirecting to another page for payment confirmation.

If you choose to use an iframe and want to accept Apple Pay or Google Pay, the iframe must have the allow attribute set to equal "payment *".

The checkout page address must start with https:// rather than http:// for your integration to work. You can test your integration without using HTTPS, but remember to enable it when you’re ready to accept live payments.

First, create a container DOM element to mount the Payment Element. Then create an instance of the Payment Element using checkout.createPaymentElement and mount it by calling element.mount, providing either a CSS selector or the container DOM element.

checkout.html

<div id="payment-element"></div>

checkout.js

const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');

See the Stripe.js docs to view the supported options.

You can customize the appearance of all Elements by passing elementsOptions.appearance when initializing Checkout on the front end.

Submit the payment Client-side

Render a Pay button that calls confirm from the Checkout instance to submit the payment.

checkout.html

<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>

checkout.js

const checkout = stripe.initCheckoutElementsSdk({clientSecret});

checkout.on('change', (session) => {
 document.getElementById('pay-button').disabled = !session.canConfirm;
});

const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
 const {actions} = loadActionsResult;
 const button = document.getElementById('pay-button');
 const errors = document.getElementById('confirm-errors');
 button.addEventListener('click', () => {
 // Clear any validation errors
 errors.textContent = '';

 actions.confirm().then((result) => {
 if (result.type === 'error') {
 errors.textContent = result.error.message;
 }
 });
 });
}

Test your integration

1. Navigate to your checkout page.
2. Fill out the payment details with a payment method from the following table. For card payments:

• Enter any future date for card expiry.
• Enter any 3-digit number for CVC.
• Enter any billing postal code.

3. Submit the payment to Stripe.
4. Go to the Dashboard and look for the payment on the Transactions page . If your payment succeeded, you’ll see it in that list.
5. Click your payment to see more details, like billing information and the list of purchased items. You can use this information to fulfill the order .

See Testing for additional information to test your integration.

Optional Create products and prices

Optional Prefill customer data Server-side

Optional Save payment method details

Optional Listen for Checkout Session changes

Optional Collect billing and shipping addresses

Optional Separate authorization and capture Server-side

Optional Customer account management No code

Optional Order fulfillment

See also

• Add discounts for one-time payments
• Collect taxes
• Enable adjustable line item quantities
• Add one-click buttons