How can put Stripe 3D secure one time payment + recurring subscription in a single pop up?

Question

I am trying to integrate 3D secure Stripe payment for a "bundle" which has a one time payment AND a one year recurring payment.

To achieve this the solution i found is using stripe.payment_intent for one time payment and stripe.subscription for recurring yearly payment.

Both payments work but the thing is that it shows 2 pop ups (one for each payment) which is confusing for the user.

My question is how can i group both payments with Total price in 1 3D secure popup?

Here's my backend:

    const customer = await stripeService.createStripeCustomer(
      name,
      email,
      payment_method,
    )
    const subscription = await stripeService.createStripeSubscription(
      customer,
      stripePriceElement,
      discount,
      trialDays,
    )
      
    let status = subscription.status
    let client_secret =
      trialDays > 0
        ? null
        : subscription.latest_invoice.payment_intent.client_secret

    if (productIsBundle) {
      try {
        const amount = 4000

        const paymentIntent = await stripeService.createStripePaymentIntent(
          amount,
          payment_method,
          customer,
          model.name,
          model.email,
          product.productName,
        )
        let intent_secret = paymentIntent.client_secret
        let intent_status = paymentIntent.status
        res.status(200).json({
          product: 'bundle',
          client_secret,
          status,
          intent_secret,
          intent_status,
          subscription,
        })
      } catch (error) {
        res.status(200).json({ status: 'Payment Intent failed', error })
      }

and here's the front with 2 card confirmations:

try {
          if (intent_secret) {
            await stripe.confirmCardPayment(intent_secret);
          }
          await stripe
            .confirmCardPayment(client_secret)
            .then(async (result) => {
              if (result.error) {
                setStripeError(result.error.message);
              }
              if (result.paymentIntent?.status === 'succeeded') {
                await axios.post(
                  ${process.env.REACT_APP_BACKEND}/users/payment/success,
                  {
                    modelId: model.id,
                  },
                  token,
                );

Answer 1

Instead of using a separate Payment Intent for the one-time payment you can instead add the one-time payment as a line item on the first Invoice for the Subscription.

This approach will allow your customer to pay for a single Invoice once when the Subscription starts.