CSP on checkout server is causing problems in Google Chrome

[vegandiet705]

Describe the bug

In my Next.js app, I create the stripe checkout session inside a server action, as follows:

export async function createCheckoutSession(ordersForPriceCalculation: OrderForPriceCalculation[], data: FormData): Promise<void> {
  const price: number = await databaseOperator.calculatePrice(ordersForPriceCalculation);

  const checkoutSession: Stripe.Checkout.Session =
    await stripe.checkout.sessions.create({
      payment_method_types: ['card', 'wechat_pay', 'alipay', 'bancontact', 'giropay', 'eps', 'ideal', 'p24', 'sofort', 'sepa_debit'],
      payment_method_options: {
        wechat_pay: {
          client: 'web',
        },
      },
      mode: 'payment',
      submit_type: 'pay',
      line_items: [
        {
          quantity: 1,
          price_data: {
            currency: CURRENCY,
            product_data: {
              name: 'Total',
            },
            unit_amount: formatAmountForStripe(
              price,
              CURRENCY
            ),
          },
        },
      ],
      success_url: `${headers().get('origin')}/checkout/result?session_id={CHECKOUT_SESSION_ID}`,
      cancel_url: `${headers().get('origin')}/cart`,
    })

  redirect(checkoutSession.url as string)
}

In Chrome the payment methods other than card are not showing up. In the client console I get the following message attached .

Initially, I though it was due to CSP policies on my server side. But I noticed it's actually from the server side of the checkout page, controlled by Stripe, so the correction should be in the CSP policies defined on stripe checkout server side code.

In Firefox all payment methods appear fine. So, I guess it's a problem only with Chrome.

To Reproduce

1. Clone the example project from here.

2. Change the server action in app/actions/stripe.ts to consider other payment methods.

3. Launch the app and go to the checkout page.

I can detail more if needed.

Expected behavior

All payment methods showing up fine in Chrome.

Code snippets

No response

OS

Ubuntu 22.04 LTS

Node version

Node v20.9.0

Library version

stripe-node v14.10.0

API version

2023-10-16

Additional context

No response

[remi-stripe]

@vegandiet705 Github issues are limited to bugs with the stripe-node SDK. This is an integration support question about your code and is better directed at our support team: https://support.stripe.com/contact

To unblock you, most of the time, that error is due to the fact that the server-side code is doing an HTTP redirect but the client-side code is doing an async request for example using fetch() and not expecting the redirect. If that's the problem, you want to change your client-side code to do a form submit for example. Otherwise you could change your server-side code to return the url and then do the redirect client-side.

[vegandiet705]

@remi-stripe I changed my server-side code to return the url and then I do the redirect client-side but the problem remains. It seems a problem with the CSP of the Stripe server that generated the checkout page, not my CSP.

Notice, though, that the problem is not stopping stripe from work. It's appears on client side when the checkout page is loaded but the checkout seems to be still working fine, which may be the reason nobody reported before.

However, if I have payment methods other than card, the checkout doesn't work with the alternative payment methods on Chrome. But it still works fine on other browsers. But I don't know if this is related to these blocked scripts not being loaded. Could other problems as well.

Is this package that defines the CSP on the Stripe server that generates the checkout page ? I'm a bit lost

[remi-stripe]

Please work directly with our support team for further help: https://support.stripe.com/contact/email