stripe-archive / payment-form-modal

How to implement Stripe Elements within a modal dialog.

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

Stripe Elements modal demo

This sample shows how to implement Stripe Elements within a modal dialog using the following APIs.

• Payment Intents API reference implementation with Payment Intents API in the cards only folder.

• Payment Request API (i.e Apple Pay) reference implementation with PaymentIntents in the cards and mobile wallets folder.

Demo

See a hosted version of the sample in test mode or fork on codesandbox.io

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

Payment declined

Get support

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

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

• on IRC via freenode
• on Twitter at @StripeDev
• on Stack Overflow at the stripe-payments tag
• by email

Sign up to stay updated with developer news.

Author

@ctrudeau-stripe

payment-form-modal's Issues

iOS 14 update breaks the card input element on Safari

Bug report

Describe the bug

Card element does not display properly on iOS 14 safari

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to https://9qmxf.sse.codesandbox.io/
2. Click on 'Buy now'
3. Card input element not working correctly

Expected behavior

The card input element should appear and work correctly.

Screenshots

System information

• OS: iOS 14
• Browser: Safari
• Device: iPhone XR

Close button hidden behind address bar on mobile

Bug report

Describe the bug

The close button is hidden behind the address bar on mobile browsers (tested on safari and chrome on iOS)

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to 'https://9qmxf.sse.codesandbox.io/'
2. See issue

Expected behavior

Close button should be visible

Screenshots

System information

• OS: iOS
• Browser: chrome & safari

Additional context

If you replace height:100%; with height: 100vh; in the ElementsModal--modal class I think that fixes it, not sure if it causes other issues though.

Show modal dialog with React/Vue Component Rendering

The examples here opens a modal that exists forever in the DOM.

Can you show an example where the dialog gets removed from the DOM using React/Vue ?

From my experience, iframe needs to reload when that happens, causing flash of no input whenever a dialog is opened, because the iframe will need to load the page containing the input field again.

The link to the Node readme.md link is 404

Bug report

Describe the bug

On https://github.com/stripe-samples/payment-form-modal/tree/master/cards-only/server choosing the Node link is a 404. The readme does not exist on the server.

To Reproduce

Navigate to https://github.com/stripe-samples/payment-form-modal/tree/master/cards-only/server and select the node branch from the readme here

and view the 404 error .

Expected behavior

Click on the node link and see the node readme.md

Screenshots

If applicable, add screenshots to help explain your problem.

System information

Chrome

Additional context

ruby example: the header value 'HTTP_STRIPE_SIGNATURE' is null

when testing locally (localhost:3000)

this value comes up as nil

sig_header = request.env['HTTP_STRIPE_SIGNATURE']

it is located here
https://github.com/stripe-samples/payment-form-modal/blob/edb3eb4d4fe5e152a03a9826c46e6afb6bf137a5/cards-only/server/ruby/server.rb#L51