https://github.com/stripe-archive/payment-form-modal

How to implement Stripe Elements within a modal dialog.
https://github.com/stripe-archive/payment-form-modal

stripe stripe-elements

Last synced: about 1 month ago
JSON representation

How to implement Stripe Elements within a modal dialog.

• Host: GitHub
• URL: https://github.com/stripe-archive/payment-form-modal
• Owner: stripe-archive
• License: mit
• Archived: true
• Created: 2019-07-29T22:05:23.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2021-05-21T17:20:57.000Z (about 3 years ago)
• Last Synced: 2024-05-09T08:21:33.665Z (about 1 month ago)
• Topics: stripe, stripe-elements
• Language: JavaScript
• Homepage: https://stripe.com/docs
• Size: 28.4 MB
• Stars: 106
• Watchers: 9
• Forks: 51
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-stars - payment-form-modal - archive | 108 | (JavaScript)

README

        
> 

>

> This project is deprecated and is no longer being actively maintained.

# Stripe Elements modal demo

This sample shows how to implement [Stripe Elements](https://stripe.com/payments/elements) within a modal dialog using the following APIs.

- [Payment Intents API](https://stripe.com/docs/payments/payment-intents/quickstart#automatic-confirmation-flow) reference implementation with Payment Intents API in [the cards only folder](cards-only).

- [Payment Request API (i.e Apple Pay)](https://stripe.com/docs/stripe-js/elements/payment-request-button) reference implementation with PaymentIntents in [the cards and mobile wallets folder](cards-and-mobile-wallets).

**Demo**

See a hosted version of the [sample](https://9qmxf.sse.codesandbox.io/) in test mode or [fork on codesandbox.io](https://codesandbox.io/s/stripe-payment-form-modal-9qmxf)

The hosted demo is running in test mode -- use `4242424242424242` as a test card number with any CVC + future expiration date.

Use the `4000000000003220` test card number to trigger a 3D Secure challenge flow.

Read more about test cards on Stripe at https://stripe.com/docs/testing.

#### Payment success

![Elements modal](cards-and-mobile-wallets/payment-request-3d-secure.gif)

#### Payment declined

![Elements modal payment declined](cards-and-mobile-wallets/payment-request-3d-secure-fail.gif)

## Get support

If you found a bug or want to suggest a new [feature/use case/sample], please [file an issue](../../issues).

If you have questions, comments, or need help with code, we're here to help:

- on [IRC via freenode](https://webchat.freenode.net/?channel=#stripe)

- on Twitter at [@StripeDev](https://twitter.com/StripeDev)

- on Stack Overflow at the [stripe-payments](https://stackoverflow.com/tags/stripe-payments/info) tag

- by [email](mailto:[email protected])

Sign up to [stay updated with developer news](https://go.stripe.global/dev-digest).

## Author

[@ctrudeau-stripe](https://twitter.com/trudeaucj)