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
Quickstart
Stripe CLI
Stripe for Visual Studio Code
Webhooks
File uploads
Error handling
Error codes
API
Keys
Libraries
Upgrades
Rate limits
Card testing
Expanding responses
Domains and IP addresses
Building With Stripe
Stripe.js and Elements
React Stripe.js
Prebuilt iOS UI
Prebuilt Android UI
Extensions
Plugins
Samples
Checklist
HomeDeveloper tools

Stripe.js and Stripe Elements

Use Stripe.js and Elements to build custom payment forms on the web.

Stripe.js is our foundational JavaScript library for building payment flows. The primary integration path through Stripe.js is with Stripe Elements, which enables you to collect sensitive payment information using customizable UI components. Stripe.js also provides a single interface for Apple Pay, Google Pay, and the Payment Request API.

With Stripe.js, you can also tokenize sensitive information, integrate with Stripe Checkout, and handle 3D Secure authentication. Because all sensitive information is handled by Stripe.js, it features simple PCI compliance with SAQ A reporting.

Setup Stripe.js

You need to include Stripe.js on your checkout page by either adding the script tag to the head of your HTML file, or importing it from the stripe-js module:

<script src="https://js.stripe.com/v3/"></script>

Next, create an instance of the Stripe object by providing your publishable API key as the first parameter:

var stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Stripe Elements

Stripe Checkout

If you’d rather not build your own payment form, consider Checkout, a Stripe-hosted page to accept payments for one-time purchases and subscriptions.

Stripe Elements is a set of prebuilt UI components, like inputs and buttons, for building your checkout flow. It’s available as a feature of Stripe.js. Stripe.js tokenizes the sensitive information within an Element without ever having it touch your server.

Elements includes features like:

  • Formatting card information automatically as it’s entered
  • Translating placeholders into your customer’s preferred language
  • Using responsive design to fit the width of your customer’s screen or mobile device
  • Customizing the styling to match the look and feel of your checkout flow

Card Element

The Card Element lets you collect card information all within one Element. It includes a dynamically-updating card brand icon as well as inputs for number, expiry, CVC, and postal code. Get started with accepting a payment.

Payment Request Button Element

The Payment Request Button lets your customers check out with Apple Pay, Google Pay, Chrome saved cards, and Microsoft Pay. When using an Apple Pay-enabled browser, your customer will see the button on the left below. When using a browser that supports the Payment Request API, they’ll see the button on the right below. Note that for demonstration purposes, these are just images, not live demos. You can read more about browser support in the Payment Request Button quickstart.

Apple Pay Button and Payment Request Button Element

IBAN Element

The IBAN Element lets you collect your customers’ bank account details. It validates IBAN formats in all SEPA countries, emits the bank’s name, and includes a dynamically updating bank logo icon for many popular banks. Refer to the IBAN Element Quickstart to get started.

iDEAL Bank Element

The iDEAL Bank Element lets you collect your customers’ bank for use with iDEAL payments. It displays a list of iDEAL-member banks and their logos, allowing customers to select their bank inline (rather than in an interstitial bank selection page) and check out faster. Get started with accepting iDeal payments.

Przelewy24 Bank Element

The Przelewy24 Bank Element lets you collect your customers’ bank for use with Przelewy24 payments. It displays a list of Przelewy24-member banks and their logos, allowing customers to select their bank inline (rather than in an interstitial bank selection page) and check out faster. Get started with accepting Przelewy 24 payments.

EPS Bank Element

The EPS Bank Element lets you collect your customers’ bank for use with EPS payments. It displays a list of EPS-member banks and their logos, allowing customers to select their bank inline (rather than in an interstitial bank selection page) and check out faster. Get started with accepting EPS payments.

Elements examples

Elements are completely customizable. You can style Elements to match the look and feel of your site, providing a seamless checkout experience for your customers. It’s also possible to style various input states, for example when the Element has focus.

To see some ways you can use Elements, check out our open source examples on GitHub.

For an end-to-end example illustrating how to integrate Elements with a backend to process payments, check out this demo application and browse its source code on GitHub. This sample store accepts card payments with support for Payment Request, Apple Pay, Google Pay, and other payment methods.

Demo application on Chrome with the Payment Request Button

Sample e-commerce store implementing both the Card Element and the Payment Request Button.

Demo application on iPhone X with Apple Pay on Safari

See also

  • Accept a payment
  • Adding the Payment Request Button
  • Stripe.js reference
Was this page helpful?
Questions? Contact us.
Developer tutorials on YouTube.
You can unsubscribe at any time. Read our privacy policy.
On this page
Setup Stripe.js
Stripe Elements
Elements examples