Is there any way to prefill payment information in stripe elements?

Question

I am using Stripe elements payment form in my code. While doing testing in Galen, we have to switch to the iframe to fill the payment information and test the entire flow. But, iOS doesn't allow us to switch iframes due to its CORS policy.

Is there any way to prefill the information in the payments form so that we can test our code in iOS?

Answer 1

No, by design you cannot prefill payment information in Stripe Elements. If you could then that'd be a security risk.

Answer 2

Yep, Bookmarklets are a great way to fill out forms without you doing so. Bookmarklets are js (use can even use jQuery) stored as a bookmark, you click/tap it and it runs the js. In your case, you could create a bookmarklet to fill out the test stripe card info. Heres some links to help:

• https://www.cultofmac.com/500532/how-to-add-bookmarklet-mobile-iphone-safari/
• https://mrcoles.com/bookmarklet/

Answer 3

I asked the same to the Stripe Support team. They suggested the following:

"In general, we do not support or recommend automated testing of Elements by pre-filling details. The internal structure of the iframe(class names, DOM structure) is subject to change at any time so it's not generally safe to write code that accesses this.

The recommendation instead is to test by using Stripe's test tokens[0] — so essentially, in testing, you would stub out the payment form itself, and call your function that proceeds with the rest of payment using a string value like "tok_visa" directly. These test strings can be passed to the API to complete charges, so they can be used to mock the result of interacting with the Elements form.

[0] - https://stripe.com/docs/testing#cards "