Trouble with Cross-Origin Headers: Stripe and ffmpeg Integration in Next.js

Question

I'm using this excellent template from vercel as a base for my project :

https://vercel.com/templates/next.js/subscription-starter

I've used it for many projects and the Stripe integration works flawlessly. However for a new project I needed to incorporate ffmpeg which relies on SharedArrayBuffer:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer

So I need to set the appropriate HTTP response header which i've set in my next.config.js file as below:

      {
        source: '/(.*)',
        headers: [
          {
            key: 'Cross-Origin-Embedder-Policy',
            value: 'credentialless'
            // value: 'require-corp'
          },
          {
            key: 'Cross-Origin-Opener-Policy',
            value: 'same-origin-allow-popups'
          }
        ]
      }

Now the issue is that settings these breaks Stripe. It blocks the request:

https://js.stripe.com/v3/m-outer-3437aaddcdf6922d623e172c2d6f9278.html

Which appearently loads more resources that are needed for the checkout session to function. The customer portal works but checkout doesn't. I've literally tired every possible permutation of headers with different values but in all cases either Stripe works but ffmepg doesn't (cause SharedArrayBuffer doesn't work) or vice versa. It's been a week and I've tired everything and can't find anything online that works. Not even ChatGPT can help which ironcelly asks me to contact Stripe customer support. I would highly appreciate if anyone could even point me in the right direction. I Thank you in advance good Sir/Maam.

Note that Checkout works fine with just:

key: 'Cross-Origin-Opener-Policy',
value: 'same-origin'

Just Cross-Origin-Embedder-Policy breaks it

Answer 1

I reached out to a Stripe developer through their Discord Server, and here's what they had to say:

It looks like we don't currently support Cross-Origin-Embedder-Policy today, but it is on our radar I don't have an ETA to share unfortunately.

You can write in via our support form requesting this feature https://support.stripe.com/?contact=true

Currently, the only feasible solution appears to be relocating your ffmpeg code (which relies on SharedArrayBuffer) to a different server.

EDIT: I deployed my ffmpeg code a separate server and connected it to my main site which has Stripe and now the program is working perfectly.