stripe / elements-examples

Stripe Elements examples.

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.