在ReactJs中添加多个可发布密钥的条带元素

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

我已在env文件中设置了澳大利亚帐户的默认密钥。我试图在componentDidMount方法中使用全局stripe对象（如window.stripe（“MY_KEY”）来更改它，但在向stripe发送请求时，它不会覆盖默认密钥

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使用新密钥，但它使用默认密钥。

由于您可能会动态更改密钥，因此您必须首先自己初始化stripe，然后按照文档所述传递它：

当这些假设中的一个或多个不适用于您的集成时，您有另一个选项：将条带实例作为条带道具直接传递给。stripe prop可以为null，也可以是使用stripe（apiKey，options）构造stripe实例的结果

---

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

还可以添加密钥属性，以便在密钥更改时重新装载组件。否则，在不重新加载的情况下，它将使用上一个键

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