Stripe with cy.origin will frame bust

[tlolkema]

Current behavior

I was asked by @AtofStryker to create this issue:
#21603

Description

Our setup is as follows.

• Stripe Elements are embedded on our page (iframes)
• When selecting payment by bank you will be redirected to a different origin, which is a Stripe page where you can authenticate the payment which will redirect you back to the application.

The flow with cy.origin will be as follows:

// click on a button which will redirect to Stripe origin
cy.get(locators.checkoutSubmit).click()

// Within this page on stripe.com authorize the payment.
cy.origin('https://stripe.com', () => {
  cy.contains('Authorize Test Payment').click()
})

See:
#21186 (comment)

Unfortunately the moment you will be redirected to Stripe the page will frame bust.
Setting modifyObstructiveCode will not prevent this frame busting.

When setting experimentalModifyObstructiveThirdPartyCode the Stripe iframes to fill in your details are giving the error:

IntegrationError: Elements must be used within an IFRAME

See:
#21603 (comment)

Desired behavior

Be able to use cy.origin in combination with a redirect to Stripe.
Either by making modifyObstructiveCode not frame bust the Stripe page or let the experimentalModifyObstructiveThirdPartyCode not break the Stripe Elements.

Test code to reproduce

/

Cypress Version

11.0.1

Node version

18.14.2

Operating System

Mac Os 13.2.1 (22D68)

Debug Logs

No response

Other

No response

[AtofStryker]

@tlolkema thank you for opening this so we can have our own issue thread. Would you be able to help me in getting a reproduction available? I created https://github.com/AtofStryker/cypress-issue-25934 which goes to a stripe payment demo but these are mostly embedded form fields without a redirect, so I don't have a reproduction of the actual issue 🙁 .

[tlolkema]

Cool, i will set up an example

[kbodya]

@AtofStryker , @tlolkema

Hi. I faced the same issue with Stripe payment
The steps with cy.origin() :

 cy.OpenMakePaymentTest()
cy.wait (3000)
cy.get (makePayment.radtioCustomAmount).click()
cy.get (makePayment.textInputField).type (100).invoke('removeAttr', 'target')
cy.get (makePayment.makePaymentButton).click()
cy.wait (6000)
cy.origin ('https://checkout.stripe.com/c/pay', () => {
})

Also, a few day's ago I added related question with more details: #26014

Video capture with Cypress test - https://drive.google.com/file/d/1Tgi6bvLWfnVGzsGEfTmmVoIu_B9TG5Zb/view?usp=share_link

[conversayShawn]

@AtofStryker
@kbodya Has provided a reproducible example that cannot be shared publicly.

[AtofStryker]

We have the reproduction in hand, but I am not to sure if framebusting is occurring. @kbodya is this what you are seeing in the console? The test runner/reporter still seems to be displayed in the Cypress app

[kbodya]

Hi, @AtofStryker Yes. The same error is in the console for me

[AtofStryker]

Interesting. It doesn't look like Stripe is framebusting here, which is good. But it doesn't work, which is currently expected I believe. Going to mark this as related to #21603 which should be completed when we fully support Stripe. We have some other issues with Stripe opened that we also need to address, which should fix other types of framebusting as well when the time comes.

[AtofStryker]

I wonder if looking into why the error message is happening could fall under experimentalModifyObstructiveThirdPartyCode, which could fix this error and get us further?

[kbodya]

@AtofStryker Is it planned to make fully support Stripe in the near future and fix this problem?

[kbodya]

@AtofStryker Amazing! Adding "experimentalModifyObstructiveThirdPartyCode: true" fixes an issue

[AtofStryker]

@kbodya That's great! we don't have plans to support iframes in the near future, but I did send something to support that that should work through a checkout (I used a test card on the registration link just a heads up). From what I can see, setting experimentalModifyObstructiveThirdPartyCode and ignoring a mount issue does allow a checkout.

I believe @tlolkema 's issue is still valid here, but I am glad we were able to help here.

[kbodya]

Yes, it allows me to place an order and pay and test payment through Cypress works perfectly. Thanks a lot @AtofStryker

[cabarcaGAP]

Ok

Adding "experimentalModifyObstructiveThirdPartyCode: true" fixes part of the issue. Now I'm getting this:

I have tried adding this code after clicking the button that triggers the Stripe Checkout page to load (also put it before clicking the button but did not work either)

            cy.on('uncaught:exception', (e) => {
                if (e.message.includes('mount normally')) {
                // we expected this error, so let's ignore it
                // and let the test continue
                return false
                }
            })
        })```
        
        Anyone with the same issue?

[jw-surfline]

@cabarcaGAP Yes we are seeing this same issue on our end. Have you come to any conclusions on how to resolve this or is this still an issue for y'all?

[hardikjoshi-scout]

@AtofStryker or all folks
It's blocking the test automation. any updates or workaround on this issue ?? please update...