Stripe Checkout is not able to run in an iFrame. Please redirect to Checkout at the top level

Question

I'm trying to load a checkout.stripe in an iframe, but it doesn't work, I get this message:

Stripe Checkout is not able to run in an iFrame. Please redirect to Checkout at the top level.

I read before that Stripe doesn´t allow this.

Does anybody knows if this is true? Is there any official documentation?

I tried with the tag object, and it doesn't work either.

Kalman

Why would they lie? – Potvaliant

Answer 1

Yes, currently you must redirect your customer to the Checkout Session url.

However, there's a note on the main Checkout docs that suggest there is work being done on allowing an embedded option, so you should contact Stripe if you are interested in that.

Update: Looks like Embedded Checkout is now available to everyone.

Lavoie

Answer 2

I ended up at this question when this error was thrown when integrating Cypress end-to-end tests with Stripe Checkout. In cypress.config.ts you can enable experimentalModifyObstructiveThirdPartyCode and it will resolve this error. You can then use cy.origin to interact with Stripe Checkout:

    // UI button that redirects to Stripe Checkout
    cy.get("#checkout").click()
    // Origin wrapper for cross-origin e2e testing
    cy.origin('https://checkout.stripe.com', () => {
      // Continue your Cypress code here
    });

Postbellum