Introducción a los pagos con Stripe en Node.js mediante Express

En este artículo, analizaremos el uso de la API de cargos de Stripe para crear una aplicación de donaciones básica donde podamos crear clientes y enviar pagos.

Prerrequisitos

Es necesario comprender las promesas básicas y cómo configurar un servidor Express.

Instalación

Vamos a necesitar algunas cosas para configurar esto. Body-parsernos permitirá convertir los datos de nuestro formulario en algo más útil, ejsnos permitirá renderizar nuestra página de éxito desde nuestro servidor, expresspara el servidor mismo, nodemonpara recargar nuestro servidor al guardar y, finalmente, stripenos dará acceso a todas las funciones más interesantes que queremos con la API de Stripe.

$ npm i body-parser ejs express nodemon stripe

Ahora, en el sitio web de Stripe, deberá crear una cuenta. Cuando esté en el Panel de control, API Keysdebajo de Developers, encontrará tanto un Publishable keycomo un Secret Key. Esos son los que necesitaremos para tener acceso a los datos más adelante. Primero, deberá usar las claves de prueba.

Configuración de archivos y directorios

Así es como se organizarán los archivos para nuestro proyecto sencillo:

* views    - Handles our front-end code, must be named views for `ejs` to work.  * card.js   * completed.html  * index.html* server.js

Configuración del servidor

Solo un servidor Express básico, necesitaremos todo lo que instalamos, agregaremos nuestro Stripe Secret Keycuando lo requiera stripey lo usaremos express.staticpara representar nuestra carpeta de vistas.

servidor.js

const express = require('express');const bodyParser = require('body-parser');const path = require('path');const stripe = require('stripe')('SECRET_KEY'); // Add your Secret Key Hereconst app = express();// This will make our form data much more usefulapp.use(bodyParser.urlencoded({ extended: true }));// This will set express to render our views folder, then to render the files as normal htmlapp.set('view engine', 'ejs');app.engine('html', require('ejs').renderFile);app.use(express.static(path.join(__dirname, './views')));// Future Code Goes Hereconst port = process.env.PORT || 3000;app.listen(port, () = console.log('Server is running...'));

Al trasladar una aplicación a producción, nunca coloques tus claves API directamente en el código. Independientemente del servicio de alojamiento que uses, recuerda configurar las variables de entorno para que la información pase de forma segura. Probablemente quieras configurar las variables de entorno de inmediato, para que tus claves secretas no se envíen a un repositorio cuyo código pueda quedar expuesto accidentalmente.

Configuración de la interfaz de usuario

Para nuestra interfaz de usuario y front-end, utilizaré Tailwind CSS y también necesitaremos obtener el script de front-end de Stripe justo antes de nuestro propio código de front-end.

En la parte inferior de nuestro formulario necesitamos dos div"vacíos" con los identificadores de card-elementy card-errorpara que Stripe muestre sus entradas de tarjeta y mensajes de error.

índice.html

!DOCTYPE htmlhtmlhead  meta charset="UTF-8"  meta name="viewport" content="width=device-width, initial-scale=1.0"  meta http-equiv="X-UA-Compatible" content="ie=edge"  link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"  titleDonation App/title/headbody  nav    h1Donation App/h1  /nav  div    form action="/charge" method="POST"      input type="text" name="name" placeholder="Name"      input type="email" name="email" placeholder="Email"      input type="text" name="amount" placeholder="Amount"      div/div      div role="alert"/div      buttonSubmit Payment/button    /form  /div/bodyscript src="https://js.stripe.com/v3/"/scriptscript src="card.js"/script/html

Código de interfaz de usuario

Primero, debemos configurar las entradas y la validación de nuestra tarjeta. Afortunadamente, Stripe también nos ayudará con eso. Esto parecerá un poco complicado, así que vamos a explicarlo un poco.

• Necesitamos crear nuestras entradas de tarjeta usando la función de elementos de Stripe, agregando algunos estilos para que coincidan con el resto de la aplicación y agregándolos a nuestra card-elementidentificación para que se representen en nuestro front-end.
• Cree una función que agregará una entrada invisible a nuestro formulario con el valor de nuestro argumento justo antes de que se envíe el formulario.
• Agregue un detector de eventos de envío a nuestro formulario para crear un nuevo token de Stripe, que cifrará los datos de la tarjeta de nuestro usuario y lo pasará a nuestra función para que se envíe en nuestra entrada oculta.

Simplemente estamos creando nuestras entradas, asegurando los datos que pasamos a ellas y agregando esos datos cifrados a nuestro formulario antes de enviarlo a nuestro servidor.

tarjeta.js

const stripe = Stripe('PUBLISHABLE_KEY'); // Your Publishable Keyconst elements = stripe.elements();// Create our card inputsvar style = {  base: {    color: "#fff"  }};const card = elements.create('card', { style });card.mount('#card-element');const form = document.querySelector('form');const errorEl = document.querySelector('#card-errors');// Give our token to our formconst stripeTokenHandler = token = {  const hiddenInput = document.createElement('input');  hiddenInput.setAttribute('type', 'hidden');  hiddenInput.setAttribute('name', 'stripeToken');  hiddenInput.setAttribute('value', token.id);  form.appendChild(hiddenInput);  form.submit();}// Create token from card dataform.addEventListener('submit', e = {  e.preventDefault();  stripe.createToken(card).then(res = {    if (res.error) errorEl.textContent = res.error.message;    else stripeTokenHandler(res.token);  })})

Cargos básicos

Ahora, en nuestro servidor, vamos a crear un nuevo punto final de API POST para /charge. Simplemente estamos haciendo una promesa que crea un cliente con nuestra información básica (puedes jugar con todas las opciones aquí), y lo más importante, el token que creamos a partir de la entrada de la tarjeta.

Con nuestro nuevo cliente, crearemos un nuevo cargo en su tarjeta, pasando el importe en céntimos. Si todo ha ido bien, mostraremos nuestra completed.htmlpágina.

app.post("/charge", (req, res) = {  try {    stripe.customers      .create({        name: req.body.name,        email: req.body.email,        source: req.body.stripeToken      })      .then(customer =        stripe.charges.create({          amount: req.body.amount * 100,          currency: "usd",          customer: customer.id        })      )      .then(() = res.render("completed.html"))      .catch(err = console.log(err));  } catch (err) {    res.send(err);  }});

Página completa

Cuando hayamos enviado con éxito la donación, podremos mostrar otra página con un mensaje de agradecimiento y un botón que nos lleve de vuelta a nuestra página de inicio:

!DOCTYPE htmlhtmlhead  meta charset="UTF-8"  meta name="viewport" content="width=device-width, initial-scale=1.0"  meta http-equiv="X-UA-Compatible" content="ie=edge"  link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"  titleDonation Completed/title/headbody  nav    h1Donation App/h1  /nav  div    pThank you for your generous donation./p    pYour payment has been received./p    a href="/"buttonReturn/button/a  /div/body/html

Ahora, al localhost:3000probarlo, Stripe nos brinda una lista de números de tarjetas de prueba. En nuestro Panel de Control, podemos ver los detalles de cualquier pago de prueba.

Conclusión

Obviamente, esta publicación solo ha tocado la superficie y los casos de uso más complejos requerirán que investigues la excelente documentación de Stripe. Un sistema de pago más sólido también se ocuparía de cuestiones como el manejo de errores y evitar cargos duplicados si un usuario intenta procesar el cargo dos veces seguidas por accidente. Sin embargo, como viste, Stripe facilita mucho la creación de páginas de pago sin tener que lidiar con datos confidenciales como números de tarjetas de crédito. Ellos se encargan de manejar los datos confidenciales por nosotros.

Esperamos que esta breve introducción haya sido útil para facilitar su comprensión del funcionamiento del procesamiento de pagos en línea con Stripe y Node.js. Si tuvo algún problema al implementar el código aquí, no dude en consultar este repositorio de Github.