CODEWITHSUNDEEP
javascript
innom
innom

Reputation: 1007

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

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?

Upvotes: 5

Views: 3522

Answers (2)

Akram BENGHANEM
Akram BENGHANEM

Reputation: 139

I encountered the same problem that you have, exactly the same error, I tried to install the extensions provided there but nothing seems to be helpful, after investigation, I found that my client wasn't hosted, and stripe take CORS seriously, even in testing, so to test and run your application you should use this command to start a local server:

npx serve -p 3000

This commend should be run inside the folder that holds index.html.

Upvotes: 0

FishSaidNo
FishSaidNo

Reputation: 405

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:

Upvotes: 2

Related Questions