如何將 Stripe 3D 安全一次性付款 + 定期訂閱放在一個彈出窗口中？

Question

我正在嘗試將 3D 安全條帶支付集成為“捆綁”，該“捆綁”具有一次性付款和一年定期付款。

為了實現這一點，我找到的解決方案是使用 stripe.payment_intent 進行一次性付款，使用 stripe.subscription 進行年度付款。

兩種付款都有效，但問題是它顯示了 2 個彈出窗口（每次付款一個），這讓用戶感到困惑。

我的問題是如何在 1 個 3D 安全彈出窗口中將兩次付款與總價分組？

這是我的后端：

    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

您可以將一次性付款添加為訂閱的第一張發票上的行項目，而不是使用單獨的付款意圖進行一次性付款。

這種方法將允許您的客戶在訂閱開始時支付單張發票一次。