En nuestro post anterior iniciamos la creación de nuestro formulario de pago, en esta sección terminaremos de preparar el formulario para poder aceptar los pagos.

El evento submit

Por ahora tenemos un formulario donde validamos cada cambio en el formulario en el evento onChange pero como dijimos es un formulario por lo que necesitamos subir ese cambio es decir un evento onSubmit y así es como lo escribiremos.

Nos situamos dentro del componente CheckoutForm.js

import React from 'react'
import CardSection from './CardSection'
import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';

const CheckoutForm = () => {
    const stripe = useStripe();
    const elements = useElements();

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

      if (!stripe || !elements) {

        return;

      }

      const cardElement = elements.getElement(CardElement);

      const {error, paymentMethod} = await stripe.createPaymentMethod({
        type: 'card',
        card: cardElement,
      })

      if (error) {
        console.log(['error'], error);
      } else {
        console.log(['PaymentMethod'], paymentMethod);
      }

    }

    return (
        <div className="col-lg-12">
            <form onSubmit={handleSubmit}>
                <h1>Formulario de Pago</h1>
                <div className="form-group">
                    <CardSection/>
                </div>
                <button className="btn btn-primary">Donate</button>
            </form>
        </div>
    )
}

export default CheckoutForm;

Lo primero que estamos haciendo es importar los hooks useStripe y useElements de la librería de stripe. Ahora situándonos en el JSX agregamos el método o prop onSubmit en el formulario.

Ahora la parte mas importante es const cardElement = elements.getElement(CardElement); ya que esta se encargara de buscar el CardElement y con el creara el método de pago.

Para este punto recuerden poner su api key de stripe.

Ahora y para terminar este post tenemos que enviar el método de pago al servidor y esto lo vamos a hacer usando la función fetch de JS, esto se va a hacer dentro del else de la función handleSubmit.

 let response = fetch('http://localhost/api/acept_payment',
          {'payment_method': paymentMethod}).then((response) => {
            console.log(response)
          }).catch((error) => {
            console.log('[error]', error)
          });

y por ahora es todo, en el siguiente post vamos hacer nuestro backend con python y flask donde vamos por fin a aceptar el pago.

Nuevamente les dejo el repo del proyecto de react para que puedan ver todos los cambios. https://github.com/leonardoAlonso/StripeForm

Blog

Meses sin Intereses en Stripe con Python y React parte 3

Leonardo Alonso

El evento submit

Join Our Newsletter. No Spam, Only the good stuff.

Related