CORS error when integrating the React Checkout component

Hello!

I recently started getting CORS errors when using the React Checkout component. The error appears when the SDK calls the card registration endpoint, before it can reach any of my custom event handlers (e.g. onCreateCardRegistration). Note that this was working fine last week.

Below is a redacted code example:

const options = {
  ...config, // fetched from a backend API; contains client ID, profiling ID, environment
  amount: {
    value: amount,
    currency,
  },
  paymentMethods: [
    {
      type: 'card',
      options: {
        supportedCardBrands: ['VISA', 'MASTERCARD'],
        onCreateCardRegistration,
        onCreatePayment,
      },
    },
  ],
};
return (
    <MangopayCheckout
      ref={sdkRef}
      options={options}
      onPaymentComplete={onPaymentComplete}
    />
);

Both onCreateCardRegistration and onCreatePayment are first calling our BFF, which in turn calls our API. As it stands now though, these are not even triggered, because the card registration cannot be completed due to the CORS error. Furthermore, the code example from the documentation (https://playcode.io/1840460) is also not working now, even though it worked about 2-3 weeks ago when starting the integration.

Other requests made from our API using the NodeJS SDK are working just fine (e.g. creating wallets). It seems the issue is isolated to the SDK.

Other relevant information:

UI framework: Remix
Package version: @mangopay/checkout-sdk-react@1.1.7
Environment: SANDBOX

Mangopay / mangopay-checkout-web

CORS error when integrating the React Checkout component #8