Пользовательская форма Stripe с Reactjs

При создании пользовательской формы при отправке вам необходимо отправить форму на сервер. Это довольно просто с DOM-селекторами. Здесь:

var $form = $('#payment-form');
Stripe.createToken($form, this.stripe_response_handler);

Однако не следует напрямую пытаться модифицировать или обращаться к DOM при использовании React. Чтобы преодолеть это, я использовал ref. Здесь:

<Form onSubmit={this.select_plan} ref={(ref) => this.paymentForm = ref} >
...
</Form>

а затем

Stripe.createToken(this.paymentForm, this.stripe_response_handler);

Однако это привело к ошибке:

Uncaught TypeError: преобразование круговой структуры в JSON

Каков правильный способ сделать это в React?

Ответы

Ответ 1

Существует несколько способов использования Stripe.js, вы можете передать форму DOMElement (и вам не нужно использовать ref, потому что вы можете получить элемент формы из e.target в onSubmit) где имеются атрибуты данных для Stripe

var StripeComponent = React.createClass({
  componentDidMount: function () {
    Stripe.setPublishableKey(); // set your test public key
  },

  handleSubmit: function (e) {
    e.preventDefault();
    Stripe.card.createToken(e.currentTarget, function (status, response) {
      console.log( status, response );      
    });
  },

  render: function() {
    return <form method="post" onSubmit={ this.handleSubmit }>
      <input size="20" data-stripe="number" placeholder="number"/>
      <input size="4" data-stripe="cvc" placeholder="cvc" />
      <input size="2" data-stripe="exp-month" placeholder="exp-month" />
      <input size="4" data-stripe="exp-year" placeholder="exp-year" />
      <button type="submit">Pay</button>
    </form>;
  }
});

Example

или вы можете создать пользовательский объект данных, подобный этому

var StripeComponent = React.createClass({
  getInitialState: function () {
    return {
      card: {
        number: '',
        cvc: '',
        exp_month: '',
        exp_year: ''
      }
    }
  },

  componentDidMount: function () {
    Stripe.setPublishableKey(); // set your test public key
  },

  handleSubmit: function (e) {
    e.preventDefault();
    Stripe.createToken(this.state.card, function (status, response) {
      console.log( status, response );
    });
  },

  handleChange: function (e) {
    let card = this.state.card;
    card[e.target.name] = e.target.value
    this.setState(card);
  },

  render: function() {
    return <form onSubmit={ this.handleSubmit }>
      <input size="20" name="number" onChange={this.handleChange} />
      <input size="4" name="cvc" onChange={this.handleChange} />
      <input size="2" name="exp_month" onChange={this.handleChange} />
      <input size="4" name="exp_year" onChange={this.handleChange} />
      <button type="submit">Pay</button>
    </form>
  }
});

Example

Примечание. Для тестирования примеров вам нужно установить открытый ключ