如何根据不同的 API 键重新加载条带元素？

Posted 2023-03-22

【中文标题】如何根据不同的 API 键重新加载条带元素？

【英文标题】：How to reload stripe elements according to different API keys?

【发布时间】：2021-11-22 01:37:19

【问题描述】：

我有多个国家/地区的条带帐户，我想使用不同的 API 公钥调用条带加载承诺 onchange of country。

因此，如果我从下拉列表中选择 UK，则条纹元素应适用于 UK，如果我将其更改为 US，则条纹元素应适用于美国。但在我的情况下，当我调用 UK country 时，它会起作用，如果我在 UK 之后调用 US，它永远不会为 UK 更新条带元素强>美国。 在网络控制台中，即使我选择了美国国家，它也总是显示英国元素。

我的公钥是根据国家/地区的变化加载的，loadstripe 的承诺也是根据国家/地区变化的公钥生成的，但是条带元素的 iframe 永远不会改变。

        if(nextProps.payment_methods)
            nextProps.payment_methods.map(val => 
                if(val.name==="stripe" && val.public_key)
                    return_stripe_promise = loadStripe(val.public_key)
                
            )
            this.setState(
                loadstripe_promise : return_stripe_promise
            )
        

        <Elements stripe=this.state.loadstripe_promise>
             <CheckoutForm ref=this.child />
        </Elements>

现在我的问题是，如何根据最新的条带加载承诺重新加载条带的 iframe/元素？有什么建议

【参考方案1】：

在这个问题上撞了几个小时后，我终于得到了答案。

只需在条带的 Elements 组件中传递具有唯一 id 的 key 属性，每次都会根据最新的条带公钥重新渲染。

<Elements key=unique_key_number stripe=this.state.loadstripe_promise>
   <CheckoutForm ref=this.child />
</Elements>