Stripe Connect violating Content Security Policy Directory

Hi All,

I’m in the process of connecting with Stripe Connect, it seems that my Chrome,Firefox and Edge browser are blocking the session redirect due to Content Security Policy directive: ‘connect-src’ ‘self’

Anyone encountered the same isue? Looked already on the internet for a solution but can’t seem to find any.

function(properties, context) {

var stripe = Stripe(properties.publishable_key);

var checkoutButton = document.getElementById('checkout-button');

checkoutButton.addEventListener('click', function() {
    // Make the id field from the Checkout Session creation API response
    // available to this file, so you can provide it as argument here
    // instead of the {{CHECKOUT_SESSION_ID}} placeholder.
    sessionId: properties.session_id
  }).then(function (result) {
    // If `redirectToCheckout` fails due to a browser or network
    // error, display the localized error message to your customer
    // using `result.error.message`.

Hi @nocodeventure ,

Dumb question I’m sure, but do you have the stripe.js script tag that’s required?

I don’t think I’ve seen this error before.

Redirect to connect setup works if I click the button twice.

<script src=""></script>

Exactly the same issue when I use it as an element on the page.

@lantzgould This issue doesn’t seem to be affecting me when I move the script inside an element on the page itself. However, I have to press the checkout session button twice and then it will give me an alert if I want to leave the page and then redirects to checkout session.

Any idea why I need to press the button twice?

Yeah, I’m using the script on element on the page and then simply using the toolbox plugin to execute the javascript:

Will do some research. That’s definitely an interesting one.

Test App:

Awesome man, I really appreciate it. It’s working now. I was on it for the past two days trying to solve it myself.

How can I buy you coffee?

Haha no problem. I had the same thoughts a while back. After frustration, I figured I’d try the toolbox method and it’s worked since. Glad you got this working though.

Re: coffee - Not necessary, but sure appreciate you! :slight_smile:

1 Like

Done, thanks a lot @lantzgould

1 Like

Refused to connect means that you need to add host-source into connect-src directive, because stripe.js script performs XMLHttpRequest to this source

On the printscreen showed there is a second error: Unrecognized Content-Security-Policy directive
This means you have an error in the CSP - , or ; is used before the host-source.

If you use rules from this Stripe CSP example, it contains a fatal error - comma is contained after directive names.