如何将 Stripe 3D 安全一次性付款 + 定期订阅放在一个弹出窗口中？答案

【问题标题】：How can put Stripe 3D secure one time payment + recurring subscription in a single pop up?如何将 Stripe 3D 安全一次性付款 + 定期订阅放在一个弹出窗口中？
【发布时间】：2021-12-30 03:50:31
【问题描述】：

我正在尝试将 3D 安全 Stripe 付款集成到一个“捆绑包”中，该捆绑包具有一次性付款和一年定期付款。

为了实现这一点，我找到的解决方案是使用 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,
                );

【问题讨论】：

标签： node.js reactjs stripe-payments subscription

【解决方案1】：

您可以改为add the one-time payment as a line item on the first Invoice for the Subscription，而不是使用单独的付款意图进行一次性付款。

这种方法将允许您的客户在订阅开始时支付一张发票。

【讨论】：