008. Pagos Online con Fetch y Stripe

Stripe tiene su propia API que en la mayor parte del mundo, este servicio de cobro está habilitado. Es una excelente opción si disponemos de un sitio de correo electrónico. Desde el Dashboard puedes hacer diferentes cosas y para los desarrolladores tiene una gran variedad de diferentes lenguajes de programación.

Lo más interesante es que el checkout para hacer una compra en linea a través de una tarjeta de crédito, Stripe tiene una solución que podemos implementar completamente con código frontend, es decir, con Javascript.

En este capítulo vamos a crear los productos en nuestro Dashboard de Stripe, en el siguiente capítulo accederemos a los productos dinámicamente con Ajax, generando una página donde estén nuestros productos, y en un tercer capítulo veremos la solución del lado del cliente que ofrece Stripe con pura programación Javascript para poder hacer las transacciones correspondientemente.

En Stripe tenemos una sección completa para desarrolladores, como se está tratando con datos sensibles, los endpoints piden una autenticación, para lo que tenemos que ir a las claves API, y nos van a proporcionar dos claves, la clave pública y la clave secreta, ambas las necesitamos, ya que en diferentes momentos las va a solicitar el API de Stripe. La llave secreta comienza por sk (secret key) y pk (public key).

En este capítulo crearemos productos desde la plataforma de Stripe, para lo que hay que hacerse una cuenta de Stripe, y para hacer pruebas, existe la opción de ponerla en modo de prueba.

Una vez creados los productos a través del dashboard de Stripe, vamos a crear un archivo llamado stripe-checkout.html, donde vamos a comenzar a escribir nuestro código. En el mismo crearemos un espacio donde se irán cargando los diferentes productos que hemos creado en nuestra cuenta de Stripe. Vamos a trabajar con la técnica de los templates, que vimos en capítulos pasados.

Para guardar las llaves secretas vamos a trabajar con módulos, para que únicamente nosotros veamos nuestras llaves secretas. También hay que mandar a llamar al script de Stripe, en este caso trabajaremos con uno que habla de la librería stripe.js, que la podemos encontrar desde https://stripe.com/docs/js.

Vamos a crear también un archivo denominado checkout-stripe.js, que va a ser el archivo que programaremos, y lo programaremos por módulos. Adicionalmente crearemos un archivo denominado stripe-keys.js, que traerá las llaves públicas, para que no estén a la vista.

Nota: además de acceder al endpoint de los productos, tenemos que acceder también al endpoint de los precios de los productos.

Para preparar el checkout, tenemos que ir a la documentación de Checkout Sessions de Stripe. Es un método que nos permitirá interactuar con el formulario de pago que ya está en la infraestructura de Stripe, lo único que tenemos que hacer es programar al evento click de cada uno de los productos que tenemos en nuestro front, mandar llamar este servicio, nos pedirá la llave pública.

Archivos

En el siguiente ZIP están todos los archivos de este ejercicio.

Scroll al inicio