使用react-stripe-elements生成支付令牌时遇创建令牌错误求助

我之前也踩过这个坑，核心问题是你没有使用Elements上下文绑定的Stripe实例，而是手动传递了自己创建的window.Stripe对象，导致createToken无法识别Elements组件内的表单元素。

问题根源 #

文档里提到的"Within the context of Elements"，指的是要通过react-stripe-elements提供的injectStripe高阶组件注入的stripe对象——这个对象和Elements组件内部的表单元素是绑定关联的。而你手动传递的stripe实例和Elements上下文完全脱节，自然找不到要令牌化的目标元素。

修复步骤 #

1. 先确保页面已加载Stripe官方脚本（如果还没加的话），在index.html中添加：

<script src="https://js.stripe.com/v3/"></script>

2. 从react-stripe-elements导入injectStripe高阶组件
3. 用injectStripe包装你的CheckoutForm组件，让它自动获取和Elements上下文绑定的stripe对象
4. 移除App组件中手动给CheckoutForm传递stripe属性的代码

修改后的完整代码 #

import React from 'react';
import {CardCVCElement, CardExpiryElement, CardNumberElement, PostalCodeElement, StripeProvider, Elements, injectStripe} from 'react-stripe-elements';

class CheckoutForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(ev) {
    ev.preventDefault();
    // 使用injectStripe注入的、与Elements绑定的stripe对象
    this.props.stripe.createToken({email: 'test@test.com'}).then(({token }) => {
      console.log('Received Stripe token:', token)
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Card details
          <CardNumberElement />
          <CardExpiryElement />
          <CardCVCElement />
          <PostalCodeElement />
        </label>
        <button>Confirm order</button>
      </form>
    );
  }
}

// 用injectStripe包装组件，自动注入关联的stripe对象
const InjectedCheckoutForm = injectStripe(CheckoutForm);

class App extends React.Component {
  constructor() {
    super();
    this.state = { stripe: null };
  }

  componentDidMount() {
    this.setState({ stripe: window.Stripe('test_key') });
  }

  render() {
    // 增加判断，避免Stripe未初始化完成时渲染组件
    if (!this.state.stripe) {
      return <div>Loading...</div>;
    }
    
    return (
      <StripeProvider stripe={this.state.stripe}>
        <Elements>
          {/* 不再手动传递stripe属性 */}
          <InjectedCheckoutForm />
        </Elements>
      </StripeProvider>
    );
  }
}

export default App;

额外提示 #

• 哪怕你改用单个CardElement，也必须遵循这个模式，只能用injectStripe注入的stripe对象调用createToken
• 建议保留App组件里的stripe实例存在判断，避免Stripe脚本未加载完成时渲染Elements组件，减少初始化异常

内容的提问来源于stack exchange，提问作者Sachin Karia