[BUG]: EmbeddedChechout doesn't work for connect account

[ragnarok22]

What happened?

On the backend I'm able to create a checkout session for a connect account and get the client_secret . This is my code:

const info = {
  ui_mode: 'embedded',
  mode: 'subscription',
  line_items: [
    {
      price: price_id,
      quantity: 1,
    },
  ],
  subscription_data: {
    description: `Host Subscription of amount ${price}`,
    metadata: {
      month,
      subscriptionType: 'Subscription',
      user_id: loggedUser.id,
    },
  },
  return_url: `${DOMAIN}?session_id={CHECKOUT_SESSION_ID}`,
  redirect_on_completion: 'if_required',
};

const session = await stripe.checkout.sessions.create(info, { stripeAccount: host.account_id });

return session.client_secret;

I get a client secret and I check that is working using stripe-cli.
Now, in the frontend I get 404 error. This is my code on the frontend:

const getSession = async (params) => {
  const response = await axios.post(
    config.BACKENDADDRESS + 'stripe/create-checkout-session/',
    params
  );
  return response.data.clientSecret;
};

export function StripeFormModal({ isOpen, onClose, host, paymentInfo, onComplete }) {
  const returnUrl = window.location.href;
  const options = { onComplete };

  const fetchClientSecret = useCallback(() => {
    const params = {
      mediaId: paymentInfo?.mediaId,
      messageId: paymentInfo?.messageID,
      month: paymentInfo?.month,
      price: paymentInfo?.price,
      paymentType: paymentInfo.type,
      hostId: host,
      returnUrl,
    };
    return getSession(params);
  }, [paymentInfo, host, returnUrl]);

  options.fetchClientSecret = fetchClientSecret;

  return (
    <Drawer
      variant="persistent"
      anchor="bottom"
      open={isOpen}
      className={`subscription-modal payment-subscription ${isOpen ? 'link-drawer' : ''}`}
    >
      <div style={{ overflowY: 'auto' }}>
        <div className="close-modal-btn" onClick={onClose}>
          <CloseIcon width="12px" height="12px" />
        </div>
        {isOpen && <CheckoutForm options={options} />}
      </div>
    </Drawer>
  );
}

const CheckoutForm = ({ options }) => {
  if (!options) return null;

  return (
    <form id="checkout-modal">
      <EmbeddedCheckoutProvider stripe={stripePromise} options={options}>
        <EmbeddedCheckout />
      </EmbeddedCheckoutProvider>
    </form>
  );
};

And this is what I get.

Environment

Vivaldi 6.9 on ArchLinux 09-2024

Reproduction

No response