Stripe.js and Stripe Elements
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:
Next, create an instance of the Stripe object by providing your publishable API key as the first parameter:
Stripe Elements
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
Stripe is building a new Payment Element, which is currently in beta, that allows users to accept dozens of payment methods with a single Element integration. To learn more about this feature, or request access to the beta, please see the Payment Element overview.
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, and browser-saved cards such as Microsoft Pay on Edge. When using an Apple Pay-enabled browser, your customer will see the button on the left below. When using an Google Pay-enabled browser, your customer will see the button in the middle 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.
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.
