Stripe.js requires 'allow-same-origin' if sandboxed

user_15801387 0
Viewed 436

I am trying to open the payment gateway (checkout page) of stripe js. I did this:

 async function LoadPaymentController(){
      var stripe = Stripe('pk_test_51JBxkrB1SsiUQAfnzEWMqNgSCr9yV7tvULhePuQxwP3iCVr1kkNZskUA51TOtE5gw7f1X1ZSw41FKbHoIAHDolgI00DStmrT1m');
    // Call your backend to create the Checkout Session
    fetch('/create-checkout-session', {
      method: 'POST',
    })
    .then(function(response) {
      return response.json();
    })
    .then(function(session) {
      return stripe.redirectToCheckout({ sessionId: session.id });
    })
    .then(function(result) {
      // If `redirectToCheckout` fails due to a browser or network
      // error, you should display the localized error message to your
      // customer using `error.message`.
      if (result.error) {
        alert(result.error.message);
      }
    });
    }

This function is called when a button is clicked in my page. But it returns the error

Stripe.js requires 'allow-same-origin' if sandboxed

When I google that, I only find examples of this being used inside an iframe, which I am not doing.

Can anyone help me out here?

javascript
1 Answers

This seems to be Content Security Policy (CSP) related.

There have been some changes/additions to CSP that major browsers have recently implemented:

From your server, I'd try adding the following CSP directive/header to your document (ie. your main HTML document for the page or client bundle entry point)

Content-Security-Policy: sandbox allow-same-origin;

If you don't already have a mechanism for doing this with your chosen framework, you might consider something like this NPM package for React: https://www.npmjs.com/package/react-csp

You could also try an extension like this (for Chrome) to disable CSP on the page while you're developing, to confirm CSP is the issue:

user_36125950
Related