[BUG] Cypress test doesn't work with ngx-stripe@14.4.1

[PetroSuch]

Describe the bug There is an error when I try to run cypress tests

Request URL: https://r.stripe.com/0
Request Method: POST
Status Code: 400 Bad Request

Stripe elements don't work in Cypress tests. The iframe is not loaded for example for

To Reproduce Steps to reproduce the behavior:

1. Install ngx-stripe@14.4.1
2. Add some stripe elements
3. Run cypress test

Expected behavior To be able to see Stripe elements for Cypress tests and test these elements

[burnaDLX]

This is an issue with the underlying stripe-js library and not with ngx-stripe wrapper. The iframe is not loaded because an outgoing request fails (which is caused by missing headers ,read more here).

You can solve this by intercepting the request and add the needed headers like this:

  beforeEach(() => {
      cy.intercept(`https://r.stripe.com/0`, req => {
        req.headers['origin'] = 'https://js.stripe.com';
        req.headers['referer'] = 'https://js.stripe.com/';
      })
  });

Originally posted by @burnaDLX in https://github.com/stripe/stripe-js/issues/234#issuecomment-1558966635

Then the iframe content will show up.

(Tested with v15.6.0)

[richnologies]

Thanks @burnaDLX. Appreciate the help. Not much experience with Cypress myself. Let's see what's the feedback from @PetroSuch and then we can close it

[richnologies]

I'm closing this for now. Thanks @burnaDLX for your help. Really appreciate it