Cypress cross-origin iframe for Stripe not working with Firebase error

Question

I'm working on a project which uses Firestore as well as Stripe for the checkout process. My tests were all passing until I got to the checkout part, which uses an iframe that Stripe creates. Naturally, because of it being a cross-domain iframe, I can't access/modify the input contents directly.

I followed the instructions on here, as well as added "chromeWebSecurity": false to cypress.json in order to try and bypass the security but I am now getting all tests failing because of aborted XHR calls (namely Firestore calls). Any ideas?

I get: Uncaught (in promise) FirebaseError: Missing or insufficient permissions.

This was working before adding the config above, so I can't even test if it helped with the original issue (Stripe) because it will immediately fail with those errors above.

Thanks for the help in advance.

Answer 1

This plugin is pretty good:

https://www.npmjs.com/package/cypress-plugin-stripe-elements

// Stripe card input element uses iframe
cy.fillElementsInput('cardNumber', '4242424242424242');
cy.fillElementsInput('cardExpiry', '1234');
cy.fillElementsInput('cardCvc', '123');
cy.fillElementsInput('postalCode', '12345');