Guia passo a passo do Stripe Payments em React

• Substituir Checkout.js por Stripe.js
• Remoção do botão Checkout.js
• Adicionar campos obrigatórios do Stripe
• Integração da ação do formulário com o Stripe.js

Quando o senhor cria uma integração com o Stripe pela primeira vez, a vantagem do Checkout.js em relação ao Stripe.js é a facilidade de integração e a velocidade de um aplicativo em funcionamento. No entanto, ele não permite adicionar nenhum campo de entrada adicional. Em muitas situações, o senhor desejará coletar outros valores, como Quantidade, um menu suspenso de produtos, endereço de entrega etc., e enviá-los com o mesmo formulário que coleta os detalhes de pagamento. Ou talvez o senhor queira apenas um estilo uniforme com o restante do aplicativo que não exija a exibição de uma caixa de diálogo modal. A biblioteca de front-end menor do Stripe, chamada Stripe.js, não inclui nenhum elemento de UI, mas tem toda a funcionalidade da API do lado do cliente para gerar tokens de pagamento. A personalização do formulário de pagamento não exigirá alterações na funcionalidade de back-end do seu aplicativo Node.js, porque o front-end ainda estará gerando o mesmo token de pagamento.

Agora que temos um componente React com o Stripe.js carregado, vamos começar a criar o formulário de pagamento personalizado. No mínimo, precisamos coletar quatro valores para que o Stripe gere um token de pagamento para nós: número do cartão de crédito, mês de validade, ano de validade e cvc.

var React = require('react');
var ReactScriptLoaderMixin = require('react-script-loader').ReactScriptLoaderMixin;

var PaymentForm = React.createClass({
  mixins: [ ReactScriptLoaderMixin ],

  getInitialState: function() {
    return {
      stripeLoading: true,
      stripeLoadingError: false,
      submitDisabled: false,
      paymentError: null,
      paymentComplete: false,
      token: null
    };
  },

  getScriptURL: function() {
    return 'https://js.stripe.com/v2/';
  },

  onScriptLoaded: function() {
    if (!PaymentForm.getStripeToken) {
      // Put your publishable key here
      Stripe.setPublishableKey('pk_test_xxxx');

      this.setState({ stripeLoading: false, stripeLoadingError: false });
    }
  },

  onScriptError: function() {
    this.setState({ stripeLoading: false, stripeLoadingError: true });
  },

  onSubmit: function(event) {
    var self = this;
    event.preventDefault();
    this.setState({ submitDisabled: true, paymentError: null });
    // send form here
    Stripe.createToken(event.target, function(status, response) {
      if (response.error) {
        self.setState({ paymentError: response.error.message, submitDisabled: false });
      }
      else {
        self.setState({ paymentComplete: true, submitDisabled: false, token: response.id });
        // make request to your server here!
      }
    });
  },

  render: function() {
    if (this.state.stripeLoading) {
      return <div>Loading</div>;
    }
    else if (this.state.stripeLoadingError) {
      return <div>Error</div>;
    }
    else if (this.state.paymentComplete) {
      return <div>Payment Complete!</div>;
    }
    else {
      return (<form onSubmit={this.onSubmit} >
        <span>{ this.state.paymentError }</span><br />
        <input type="text" data-stripe="number" placeholder="credit card number" /><br />
        <input type="text" data-stripe="exp-month" placeholder="expiration month" /><br />
        <input type="text" data-stripe="exp-year" placeholder="expiration year" /><br />
        <input type="text" data-stripe="cvc" placeholder="cvc" /><br />
        <input disabled={this.state.submitDisabled} type="submit" value="Purchase" />
      </form>);
    }
  }
});

module.exports = PaymentForm;

Depois que o Stripe.js é carregado, nosso componente de formulário de pagamento retorna um formulário com os campos de entrada obrigatórios. Adicionamos os atributos data-stripe necessários de acordo com a documentação do Stripe. O evento onSubmit do formulário invoca um manipulador em nosso componente que chama Stripe.createToken(). Se um erro for retornado, mostraremos isso aos nossos usuários definindo state.paymentError igual à mensagem de erro. Caso contrário, definimos que o pagamento foi concluído com this.paymentComplete, e esse também é o ponto em que passaríamos o token e as informações de compra necessárias ao nosso servidor com um módulo como o superagente.

Como o senhor pode ver, não é muito difícil eliminar o Checkout.js para usar seu próprio formulário de pagamento com estilo personalizado. Ao transformar isso em um componente e carregar o Stripe.js dinamicamente, ele também mantém os recursos que devem ser carregados pelo cliente em um nível mínimo e permite que você coloque isso em qualquer lugar que precise concluir uma compra em seu aplicativo React;
Depois de configurar esse componente React padrão para interagir com o Stripe.js, você pode adicionar outros campos relacionados ao produto que o usuário está comprando ou até mesmo tornar a coleta de informações de cartão de crédito uma etapa contínua do seu processo de inscrição. Seus usuários nunca saberão que o senhor depende do Stripe para fazer isso.