如何根据不同的Stripe API公钥重新加载Stripe Elements？

Stripe React SDK的Elements组件默认仅会在首次挂载时初始化对应Stripe实例和关联的iframe资源，后续仅更新stripe属性值时，组件内部不会主动销毁旧实例、加载新的Stripe实例及对应资源，因此会一直显示首次加载的账户配置。

可行解决方案 #

方案1：给Elements组件添加唯一key属性强制重渲染（成本最低） #

React的key属性发生变化时，会直接销毁旧组件、挂载全新的组件实例，自然会使用新的loadStripe Promise完成初始化。
你只需要把和Stripe公钥/当前选中国家关联的唯一值绑定到Elements的key属性上即可，示例代码如下：

// 可直接用当前Stripe公钥/国家编码作为key，切换国家时key变化就会触发重渲染
<Elements 
  stripe={this.state.loadstripe_promise}
  key={this.state.current_stripe_public_key}
>
  <CheckoutForm ref={this.child} />
</Elements>

注意：需要在state里同步存储当前选中的Stripe公钥或者对应国家编码，确保切换国家时key的值会同步更新

方案2：手动销毁旧Stripe实例再更新 #

如果不想用key强制重渲染，可以在更新Stripe Promise前先手动调用旧Stripe实例的销毁方法，清理旧的关联资源，示例代码如下：

if(nextProps.payment_methods){
  let return_stripe_promise = null
  let current_public_key = null
  nextProps.payment_methods.map(val => {
    // 建议在这里加上国家匹配逻辑，确保取到的是当前选中国家对应的Stripe公钥
    if(val.name==="stripe" && val.public_key){
      return_stripe_promise = loadStripe(val.public_key)
      current_public_key = val.public_key
    }
  })
  // 仅公钥发生变化时才更新，避免不必要的重渲染
  if(current_public_key !== this.state.current_stripe_public_key){
    // 等待旧的Stripe实例加载完成后销毁
    if(this.state.loadstripe_promise){
      this.state.loadstripe_promise.then(oldStripe => {
        oldStripe?.elements()?.destroy()
      })
    }
    this.setState({
      loadstripe_promise : return_stripe_promise,
      current_stripe_public_key: current_public_key
    })
  }
}

额外注意点 #

• 原代码的map循环没有做国家匹配，如果payment_methods里存在多个Stripe配置，会导致你最终拿到的是数组最后一个Stripe配置的公钥，建议新增国家匹配判断，确保取到的是当前选中国家对应的公钥。
• 切换国家时建议先清空旧的CheckoutForm里的用户输入，避免新旧账户的表单数据冲突。

内容的提问来源于stack exchange，提问作者Hasnain Ali