Как я могу создать токен, используя полосы js и reactjs?

Question

Я хочу создать токен с ReactJS и полосой, я реализовал formCard:

export default class sForm extends React.Component {

 handleSubmit = (ev) => {
    ev.preventDefault();
    if (this.props.stripe) {
      this.props.stripe
        .createToken()
        .then((payload) => console.log('[token]', payload));
    } else {
      console.log('Form submitted before Stripe.js loaded.');
    }
  };
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>Card details</label>

          <CardElement
          />

        <button disabled={!this.props.stripe}>Pay</button>
      </form>
    );
  }
}

и мои элементы

const stripePromise = loadStripe('pk_test_IqIuWVA2XNYPVx03KrFUNxNB00hMZkyNQt');

 <Elements stripe={stripePromise}>                              
     <ElementsConsumer>
     {({stripe, elements}) => (
      <SForm stripe={stripe} elements={elements} />)}
  </ElementsConsumer></Elements>

Когда я запускаю его, я получаю :

Как это исправить?

Answer 1

Как следует из сообщения об ошибке, вы должны предоставить Stripe Element при создании токена [0]. Предполагая, что вы используете новую библиотеку React ( @ stripe / Reaction-stripe- js), вы могли бы сделать это, импортировав хук useElements, чтобы получить экземпляр элемента, а затем вызвать getElement метод. Например:

import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js";

export const sForm = () => {
 const stripe = useStripe();
 const elements = useElements();

 const handleSubmit = (ev) => {
    ev.preventDefault();

    const cardElement = elements.getElement("card");

    stripe.createToken(cardElement)
      .then((payload) => console.log('[token]', payload));
  };

  return (
    <form onSubmit={handleSubmit}>
     <label>Card details</label>
       <CardElement />
       <button disabled={!stripe}>Pay</button>
    </form>
  );

}

Я подготовил полный рабочий пример, на который вы можете сослаться здесь:

https://codesandbox.io/s/demo-react-stripe-js-starting-point-h10v9

Соответствующий код находится под components/CheckoutForm.jsx.

Надеюсь, это поможет!

[0] https://stripe.com/docs/js/tokens_sources/create_token?type=cardElement#stripe_create_token -tokenType