Stripe Elements examples

See them in action!

This repository contains examples of stylish forms that use Stripe Elements. These examples illustrate how to handle errors in real-time and style focus states, error states, and placeholders.

Need help with Elements?

• Get started with Stripe Elements by reading our quickstart guide.
• For help with Elements and your Stripe integration in general, please contact Stripe Support.

In this repo

Common code for handling errors and form submission lives here.

Example 1

• JavaScript
• CSS

Example 1 shows a form that uses the card Element, a custom web font, and a solid icon with a custom color.

Example 2

• JavaScript
• CSS

Example 2 shows a "floaty-label" form that uses individual cardNumber, cardExpiry, and cardCvc Elements with a custom web font.

The form also collects address (and thus postal code) outside of the payment form. It passes the postal code to Stripe on tokenization.

Example 3

• JavaScript
• CSS

Example 3 shows a form that uses individual cardNumber, cardExpiry, and cardCvc Elements with a custom web font.

The form also collects postal code outside of the payment form.

Example 4

• JavaScript
• CSS

Example 4 shows a form that uses the paymentRequestButton Element to provide Apple Pay / Payment Request API support, as well as a card Element with a custom web font.

Example 5

• JavaScript
• CSS

Example 5 shows a form that uses the paymentRequestButton Element to provide Apple Pay / Payment Request API support, as well as a card Element with a custom icon color.