时间戳

首页 > 解决方案 > 在平台账户和关联账户的条带结账之间切换（将卡保存在平台账户上）

stripe-payments - 在平台账户和关联账户的条带结账之间切换（将卡保存在平台账户上）

问题描述

我正在使用条带连接。

我正在使用强大的客户身份验证和付款方式

我希望客户能够将他们的卡保存在我的平台帐户中，以便我可以在所有连接的帐户中向他们的卡收费。

例如，如果用户勾选“保存我的卡以备将来使用”的复选框，我想将他们的卡保存在我的平台帐户中。

但是，如果未选中此复选框，我想改为向关联帐户的客户收费。

我在我的平台帐户和前端连接的帐户之间切换时遇到困难。

我已将 Stripes 签出实例保存到变量中：

  let checkoutFormConnected = (
    this.state.userEvent.organiser.stripeAccountID !== "" && (
      <StripeProvider
        apiKey={process.env.REACT_APP_API_STRIPE_PUBLISH}
        stripeAccount={this.state.userEvent.organiser.stripeAccountID}
      >
        <Elements>
          <CheckoutForm/>
        </Elements>
      </StripeProvider>
    )
  );


 let checkoutFormNotConnected = (
    this.state.userEvent.organiser.stripeAccountID !== "" && (
      <StripeProvider
        apiKey={process.env.REACT_APP_API_STRIPE_PUBLISH}
      >
        <Elements>
          <CheckoutForm />
        </Elements>
      </StripeProvider>
    )
  );

我根据是否勾选了保存卡的复选框来显示它们：

{this.state.checkBoxes.saveCard ? checkoutFormNotConnected : checkoutFormConnected}

但是，即使在我在两个 checkoutForm 变量之间切换后，似乎首先呈现的 checkoutForm 仍然存在。

我已经测试过通过在屏幕上显示道具值来确保我在这两个选项之间切换。

当连接的帐户结帐首先出现在屏幕上，然后切换到平台帐户结帐时，当我尝试将卡保存到平台帐户时出现错误："No such setupintent: 'seti_1Hw8LXCFzSpFw85fowNQm634'"

这是因为后端在连接的帐户上创建了设置意图，即使我切换到保存平台帐户的 checkoutForm 的变量也是如此。

似乎 checkoutForm 在页面上呈现后不会重新呈现。

作为参考，我的后端代码是

const customer = await stripe.customers.create();

const Intent = stripe.setupIntents.create({
  customer: customer.id,
});

const UpdateCustomer = User.findByIdAndUpdate(req.body.purchaserID, {
  stripeCustomerID: customer.id,
});

Promise.all([Intent, UpdateCustomer]).then((data) => {
  res.send({
    customerID: customer.id,
    clientSecret: data[0].client_secret,
  });
});

该文档仅显示如何在未连接的帐户付款期间保存卡。

我还对此进行了编码，以便平台帐户首先出现在页面上。然后我可以将卡保存在平台帐户中，并在以后进行收费。我通过克隆付款方式来做到这一点但是当 checkoutForm 更改为收取新卡（在连接的帐户上）时，我收到有关付款意图的相同错误（因为它试图在平台帐户上进行设置）

如何重新渲染条带结帐以在平台帐户和已连接帐户之间切换？

更新：这有效！：

      <StripeProvider
        apiKey={process.env.REACT_APP_API_STRIPE_PUBLISH}
        stripeAccount={this.state.userEvent.organiser.stripeAccountID || undefined}
        key={this.state.checkBoxes.saveCard || 'platform'}
      >

标签： stripe-payments

解决方案

一种解决方案是使用 React 的特殊key道具来强制结帐表单在 Stripe 帐户更改时重新安装。例如：

<StripeProvider
  apiKey={process.env.REACT_APP_API_STRIPE_PUBLISH}
  stripeAccount={this.state.userEvent.organiser.stripeAccountID || undefined}
  key={this.state.userEvent.organiser.stripeAccountID || 'platform'}
>
  <Elements>
    <CheckoutForm/>
  </Elements>
</StripeProvider>

React 中的keyprop 通常仅在渲染数组中的元素时使用。这个想法是你为数组中的每个元素添加唯一的键，以帮助 React 跟踪哪些元素发生了变化，哪些元素没有变化。React 鼓励你key在渲染项目列表时添加一个道具，但除非这些列表项目的顺序发生变化，否则这并不是绝对必要的。你可以在这里阅读更多内容：

我在 key prop 的值中添加 a 的原因是在未定义或错误|| 'platform'时触发重新安装。this.state.userEvent.organiser.stripeAccountID我假设this.state.userEvent.organiser.stripeAccountID如果您不想将付款方式作为关联帐户收取，那将是错误的。React 不会将虚假值视为有效键，因此没有|| 'platform'它就不会感知到变化，也不会重新挂载。

推荐阅读