NextJS Stripe 关于 Elements 多个用例的问题

Question

我正在使用 NextJS (Typescript) 和 Stripe 构建一个电子商务网站。除了这一点之外，一切都很顺利......

我将整个应用程序包装在 Elements 组件中：-

return (
    <div className='main-container'>
      <Analytics />

      <GoogleReCaptchaProvider
        reCaptchaKey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!}

      >
        <Elements stripe={stripePromise}>
          <UserProvider>

            <CartProvider>

              <ClerkProvider {...pageProps}>

                <Layout {...pageProps}>
                  <Component {...pageProps} />

                </Layout>
              </ClerkProvider>
            </CartProvider>
          </UserProvider>
        </Elements>
      </GoogleReCaptchaProvider>

      {/* <Footer /> */}
    </div>
  )
};

这对于标准的“createCheckoutSession”场景效果很好，但在尝试重新利用快速结帐（特定页面上的一个产品）时遇到了一些问题。我发现我必须在页面级别重新创建 Elements 组件，否则它会抱怨它不存在（尽管在提供程序的范围内），大概是由于缺少传递给父组件的“选项”，在布局级别上这是不可能知道的。

我的问题：-

ExpressCheckoutElement 总计不考虑运输选择，尽管已提供且可用。

必须定义“元素”两次 - 这意味着当我研究以下解决方案时：-

const onShippingRateChange = ({ resolve, shippingRate }: StripeExpressCheckoutElementShippingRateChangeEvent) => {
        console.log(shippingRate);
        console.log(price);
        const s = (price * 100) + shippingRate.amount;
        console.log(s);
        const resolveDetails = {
            lineItems: [{
                amount: s,
                name: name,
            }],

        };
        if (!elements) return;
        elements.update({ amount: s })
        setLineItems(resolveDetails.lineItems);
        resolve(resolveDetails);
    }

使用“useElements”更新金额 - 认为这可以解决未容纳的总数，然后我收到以下错误：-

IntegrationError: Invalid value for elements.update(): `amount` is only applicable when a `mode` is set.

这听起来像是 useElements 正在选择我的“顶级”元素提供程序，它不能有“模式”或“选项”，因为它们特定于一页上的一项，并且无法在顶级中获知。

请问有什么建议吗？

谢谢！

Answer 1

如果您使用延迟意图创建

flow

，则只能使用element.update函数，在创建元素时需要指定

mode

、

amount

和

currency

（API ref）。

如果您使用意图创建流程（默认流程），您应该从后端更新 PaymentIntent 金额，并调用 element.fetchUpdates()。