https://github.com/stripe/elements-examples

Stripe Elements examples.
https://github.com/stripe/elements-examples

card examples form payments stripe

Last synced: 3 months ago
JSON representation

Stripe Elements examples.

• Host: GitHub
• URL: https://github.com/stripe/elements-examples
• Owner: stripe
• License: mit
• Created: 2017-09-11T17:41:06.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2021-08-04T19:14:31.000Z (over 3 years ago)
• Last Synced: 2024-05-09T20:00:20.633Z (6 months ago)
• Topics: card, examples, form, payments, stripe
• Language: HTML
• Homepage: https://stripe.github.io/elements-examples
• Size: 149 KB
• Stars: 989
• Watchers: 48
• Forks: 729
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Stripe Elements examples

[See them in action!](https://stripe.github.io/elements-examples)

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](https://stripe.com/docs/stripe-js).

- For help with Elements and your Stripe integration in general, please [contact Stripe Support](https://support.stripe.com/).

# In this repo

Common code for handling errors and form submission lives [here](js/index.js).

## Example 1

- [JavaScript](js/example1.js)

- [CSS](css/example1.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](js/example2.js)

- [CSS](css/example2.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](js/example3.js)

- [CSS](css/example3.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](js/example4.js)

- [CSS](css/example4.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](js/example5.js)

- [CSS](css/example5.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.