时间戳

首页 > 解决方案 > 在 ReactJs 中添加条带元素多个可发布键

reactjs - 在 ReactJs 中添加条带元素多个可发布键

问题描述

我正在使用 React Stripe Elements 包。我在 Stripe 有两个银行账户，一个用于澳大利亚，另一个用于西班牙。我想根据用户的位置将付款路由到银行账户。

我在 env 文件中设置了澳大利亚帐户的默认密钥。我尝试在 componentDidMount 方法中使用像这个 window.Stripe("MY_KEY") 这样的全局条带对象来更改它，但是在向条带发送请求时它不会覆盖默认键。

defkey = "pk_def_key"
window.Stripe("pk_test_****"); //overwrite default key

this.props.stripe.createToken().then(payload => {
          if (payload.error) {
            this.setState({
              cardError: payload.error.message,
              isLoading: false
            });
            return;
          } else {
            const stripeToken = payload.token.id;
            this.setState({
              data: { ...this.state.data, stripeToken }
            });
            // Do Payment Now
            this.verifyPayment();
          }
        });

我希望 this.props.stripe 使用新密钥，但它使用默认值。

标签： reactjsstripe-payments

解决方案

由于您可能会动态更改密钥，因此您必须先自己初始化 Stripe，然后按照此处记录的方式传递它：

当其中一个或多个假设不适用于您的集成时，您还有另一种选择：将 Stripe 实例作为 stripe prop 直接传递给。stripe 属性可以是 null 也可以是使用 Stripe(apiKey, options) 构造 Stripe 实例的结果。

<StripeProvider stripe={stripe}>
  <Checkout />
</StripeProvider>

您甚至可以初始化 2 个单独的实例，每个键一个，然后根据用户的位置使用正确的实例。

推荐阅读