La pasarela de pago es una tecnología que brinda soluciones en línea para transacciones relacionadas con el dinero, se puede considerar como un canal intermedio para el comercio electrónico o cualquier negocio en línea, que se puede usar para realizar pagos y recibir pagos para cualquier propósito.
Ejemplo de declaración del problema: esta es una página HTML simple donde tenemos un botón para pagar una cantidad de 499,00 rupias. Eventualmente, el usuario hará clic en ese botón y de alguna manera queremos recibir esa cantidad y después de eso, podemos decidir cómo daremos acceso, por supuesto, pero esa no es la parte de la discusión de nuestro artículo.
Enfoque: Razorpay es una de las pasarelas de pago más populares, nos da acceso a todos los modos de pago, incluyendo tarjeta de crédito, tarjeta de débito, banca neta, UPI y también otras billeteras, es decir, dinero de airtel, payZapp, etc. También proporciona un tablero donde todos La actividad puede ser monitoreada. Se puede integrar con cualquier aplicación en línea y hace que sea mucho más fácil para las empresas en línea interactuar con los clientes. Razorpay nos ayuda a proporcionar y procesar todas las funciones esenciales. Aquí discutiremos cómo podemos lograr esto si el backend de nuestra aplicación está en NodeJS.
Diagrama esquemático de comunicación entre Servidores y Frontend
Este es el diagrama básico de cómo todas las cosas internas interactúan entre ellas, si todos los pasos del 1 al 8 tienen éxito, podremos lograr nuestro objetivo con éxito. Del paso 1 al 4 estamos creando el pedido y recibiendo la respuesta y luego del 5 al 6 estamos recibiendo el pago por ese pedido y en los dos últimos pasos estamos verificando la autenticidad de la respuesta, ya sea que provenga del servidor Razorpay o no.
Las flechas están diseñadas según el tiempo.
Implementación paso a paso:
Paso 1: en primer lugar, escriba este comando en su terminal para crear una aplicación nodejs.
npm init
Esto le pedirá algunas configuraciones sobre su proyecto, puede completarlas en consecuencia, también puede cambiarlo más tarde desde el archivo package.json. Luego, cree un archivo app.js para el servidor backend y un archivo index.html para el frontend.
Paso 2: ahora, instale los módulos necesarios
npm install express //To run nodejs server npm install razorpay //To use razorpay utilities
Estructura del proyecto: Tendrá el siguiente aspecto.
Paso 3: como desea acceder a las API de Razorpay, debe necesitar claves, por lo tanto, vaya a Razorpay y regístrese y luego visite la configuración en la sección del tablero , haga clic en Generar claves de API, y luego obtendrá su key_id y key_secret a través de los cuales puede obtener su instancia de Razorpay.
Paso 4: Importe Razorpay y cree una nueva instancia de Razorpay, esta instancia es necesaria para acceder a cualquiera de los recursos de Razorpay. Proporcione un objeto que contenga key_id y key_secret al constructor.
A continuación se muestra la implementación básica del código inicial para el backend y el frontend.
App.js
// Inside app.js
const express = require('express');
const Razorpay = require('razorpay');
// This razorpayInstance will be used to
// access any resource from razorpay
const razorpayInstance = new Razorpay({
// Replace with your key_id
key_id: rzp_test_fiIwmRET6CApc2,
// Replace with your key_secret
key_secret: YAEUthsup8SijNs3iveeVlL1
});
const app = express();
const PORT = process.env.PORT || '5000';
// Here we will create two routes one
// /createOrder and other /verifyOrder
// Replace these comments with the code
// provided later in step 2 & 8 for routes
app.listen(PORT, ()=>{
console.log("Server is Listening on Port ", PORT);
});
index.html
<!-- Inside index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta content= "This is a demo of Web integration of Razorpay in NodeJS" author="Mr. Twinkle Sharma" /> <title>Razorpay Web-Integration</title> </head> <body> <hr/> <h2>Advanced Data Structures & Algorithms Course</h2> <h3>Description</h3> <ul> <li>Best Course for SDE placements</li> <li> Available in 4 major Languages JAVA, C/C++, Python, Javascript </li> <li>Lifetime Access</li> </ul> <span> Cost:- 499 Rupees <button id="pay-button" > Pay Now & Get Access </button> </span> <hr/> <!-- Processing Payment Checkout --> <!-- We will write code for payment here, Replace this comment with the code we are explaining below in step 5 of the article --> </body> </html>
Paso 5: envío de información de pedidos desde Frontend a nuestro servidor NodeJS.
Cree una ruta dentro de app.js para recibir datos de orden de las requests de los usuarios, aquí estamos usando express porque es más simple y lo usan muchos desarrolladores. Hemos configurado nuestra ruta ‘/createOrder’ en nuestro servidor nodejs app.js para recibir datos del cliente y estamos enviando los datos del pedido desde ‘ req. cuerpo’.
Solo para mantener las cosas simples aquí, Postman se ha utilizado como cliente, puede enviar fácilmente requests de publicación desde la interfaz a su manera.
Nota: asegúrese de ejecutar con éxito el servidor cada vez antes de interactuar con él.
Paso 6: Envío de la información del pedido desde nuestro servidor NodeJS al servidor Razorpay.
Tenemos la información del pedido extraída del req.body en nuestro servidor, ahora tenemos que enviarla al servidor de Razorpay para continuar con los procedimientos. La razorpayInstance que hemos creado anteriormente se usará para acceder a la API de pedidos de Razorpay y create es un método que crea un pedido, toma dos parámetros, el primero es un objeto de opciones y el otro es la función de devolución de llamada que luego nos brinda respuesta como error en caso de falla u orden en caso de éxito.
App.js
//Inside app.js
app.post('/createOrder', (req, res)=>{
// STEP 1:
const {amount,currency,receipt, notes} = req.body;
// STEP 2:
razorpayInstance.orders.create({amount, currency, receipt, notes},
(err, order)=>{
//STEP 3 & 4:
if(!err)
res.json(order)
else
res.send(err);
}
)
});
Paso 7: Recibir la respuesta del pedido de Razorpay a nuestro servidor NodeJS.
Luego, el servidor Razorpay procesa los datos recibidos y envía la respuesta del pedido desde su servidor, aquí fusionamos los pasos 3 y 4 porque separarlos en un proyecto tan pequeño no tiene sentido, la separación puede ser útil cuando se trabaja con un base de datos y suficiente proyecto grande. A continuación se muestra la respuesta devuelta con éxito del servidor Razorpay.
Explicación :
Hemos recibido un JSON como respuesta del servidor de Razorpay, con un código de estado 200, lo que significa que todo está bien y que el pedido se ha creado correctamente. La descripción de JSON es la siguiente:
id : se utilizará una identificación de pedido única durante el pago.
entidad : Es una abreviatura para mostrar que la respuesta corresponde a cualquier orden.
cantidad : cantidad total de la orden, en subunidad de moneda .
cantidad_pagada : Cantidad pagada del pedido, se usa cuando tiene pagos parciales.
cantidad_debida : Importe total – Importe pagado parcialmente.
moneda : moneda de la cantidad, consulte la lista completa de monedas admitidas aquí.
recibo : Es el recibo del pedido.
offer_id : se usa para aprovechar alguna oferta, se usa cuando tiene algunos descuentos u ofertas especiales en el pedido.
estado: Es el estado de la orden para que ex-orden pueda ser creada, intentada o pagada.
intentos : número total de intentos realizados por el usuario para el pago.
notas : Este es un objeto simple para información adicional.
created_at : Es la hora en que se creó un pedido y en formato de hora UNIX.
A continuación se muestra el pedido creado en Razorpay Dashboard y el estado creado significa que el pedido acaba de crearse, se intentará si falla algún otro pago y se pagará si se realizó correctamente.
Nota: – Estamos manejando todos los procesos iniciales en un solo punto final de API ‘ /createOrder ‘ pero tan pronto como el proyecto crece, es bueno separar todas las cosas según sea necesario.
Paso 8: Envío de solicitud desde Frontend a Razorpay Server para captura de pago.
Ahora que hemos creado un pedido, podemos proceder a pagar para recibir el monto. A continuación se muestra el fragmento proporcionado por Razorpay para usar dentro de index.html. Maneja todo por sí mismo, desde representar una interfaz de usuario modal en el frontend hasta procesar el proceso de pago en su backend. Lo que requiere son algunas configuraciones, credenciales relacionadas con la banca/billetera y pedido. ID junto con la solicitud.
index.html
<!--Inside index.html -->
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
var options = {
"key": "rzp_test_fiIwmRET6CApc2",
"amount": "49900",
"currency": "INR",
"name": "Dummy Academy",
"description": "Pay & Checkout this Course, Upgrade your DSA Skill",
"image": "https://media.geeksforgeeks.org/wp-content/uploads/
20210806114908/dummy-200x200.png",
"order_id": "order_HdPuQW0s9hY9AU",
"handler": function (response){
console.log(response)
alert("This step of Payment Succeeded");
},
"prefill": {
//Here we are prefilling random contact
"contact":"9876543210",
//name and email id, so while checkout
"name": "Twinkle Sharma",
"email": "smtwinkle@gmail.com" .
},
"notes" : {
"description":"Best Course for SDE placements",
"language":"Available in 4 major Languages JAVA,
C/C++, Python, Javascript",
"access":"This course have Lifetime Access"
},
"theme": {
"color": "#2300a3"
}
};
var razorpayObject = new Razorpay(options);
console.log(razorpayObject);
razorpayObject.on('payment.failed', function (response){
console.log(response);
alert("This step of Payment Failed");
});
document.getElementById('pay-button').onclick = function(e){
razorpayObject.open();
e.preventDefault();
}
</script>
Explicación:
La primera etiqueta de secuencia de comandos está cargando un archivo js desde el servidor Razorpay. Tiene algo de código dentro, que es responsable de ejecutar todo este fragmento de código. En la segunda etiqueta del script, estamos creando un objeto que luego se enviará al servidor de Razorpay para proceder con el pago.
Esta es la descripción de las opciones , los campos con * son obligatorios y otros son opcionales los cuales tienen su valor por defecto en el servidor de Razorpay.
1. clave: su key_id de Razorpay que obtuvo del tablero.
2. cantidad: Cantidad a pagar.
3. moneda: string de moneda de tres caracteres.
4. Nombre: Nombre de la empresa, se mostrará en la interfaz de usuario.
5. order_id: debe ser una identificación de pedido válida generada desde Razorpay, usaremos la que hemos creado anteriormente.
6. descripción: solo una descripción simple de la compra, también se mostrará en el modal.
7. imagen: el enlace del logotipo, debe tener una dimensión mínima de 256 × 256 y un tamaño máximo de 1 MB, de la empresa que se mostrará en modal, en nuestro caso de ejemplo estamos usando un logotipo ficticio.
8. manipulador:Es una función que se ejecutará con el pago exitoso, simplemente estamos haciendo una alerta y un registro de la consola, pero se puede modificar muy fácilmente para personalizar la funcionalidad.
9. tema: un objeto que se puede usar para configurar el tema de modal de acuerdo con la interfaz de usuario de su aplicación, por ejemplo, puede configurar el color y el color de fondo usando el código HEX.
10. precompletar: detalles que desea completar automáticamente cuando se muestre la interfaz de usuario, por ejemplo, puede completar previamente el correo electrónico y el nombre para que el usuario no lo solicite. Además, si de alguna manera puede conocer el historial de un usuario, prellene los modos de pago en base a su preferencia.
11. notas: Este es un objeto simple para información adicional.
Razorpay tiene más opciones que las utilizadas aquí, puede personalizar su aplicación de acuerdo con ellas. Ahora, después de todo esto, llamamos a la función Razorpay que se declara en el archivo incluido en la primera etiqueta del script, toma un objeto como parámetro y devuelve un objeto Razorpay que tendrá algunas funcionalidades predefinidas y otras definidas por el usuario, por eso Razorpay estaba preguntando por nuestras opciones configuradas. Echemos un vistazo a lo que tenemos a partir de allí, use console.log para ver estos detalles.
Tenemos una gran cantidad de datos como retorno, el modal que se mostrará en la pantalla después de que hagamos clic en el botón asociado con eso, la función registrada para el evento ‘pago.fallido’ que luego veremos cómo podemos usar it, el id y también otras cosas requeridas. Ahora, volviendo a la explicación del código, después de obtener el objeto Razorpay, hemos registrado una función de devolución de llamada que estamos ejecutando en el evento ‘ pago.fallido ‘, y Razorpay lo configura. Posteriormente, hemos utilizado una API web básica para obtener el elemento por id, que selecciona el botón asociado con esa id y ejecuta una función. razorpayObject.open(); abre una ventana que acomoda un modal que incluye todas las funcionalidades esenciales para realizar el pago.
e.preventDefault();impide las configuraciones predeterminadas del navegador para eventos.
Producción:
Explicación de la salida anterior:
- El usuario hace clic en el botón asociado con el pago
- Se abre un Modal, proporcionado por Razorpay en el medio de la ventana, ¿observó que el nombre de la empresa, la descripción, el logotipo que hemos establecido antes de enviar la solicitud se ha presentado aquí, también el número de contacto y el correo electrónico están precargados?
- Incluso si hemos completado previamente algunos detalles, también tenemos acceso para cambiarlos durante el proceso de pago.
- Después de eso, podemos proceder al pago, digamos que hemos elegido el método de tarjeta. Aquí hemos ingresado un detalle de tarjeta ficticio «Número de tarjeta 4111 1111 1111 1111» la fecha de vencimiento puede ser cualquier mes/año futuro, CVV puede ser cualquier tres- número de dígito, también el nombre del titular de la tarjeta se completa aquí, pero puede editarlo antes de continuar.
- Luego, inmediatamente, Razorpay procesará el pago.
- Después de completar una vez más, Razorpay le pide permiso para realizar el pago o no, haga clic en éxito para proceder con el pago o haga clic en falla para denegar.
Paso 9: Recibir la respuesta de pago de Razorpay al Frontend.
Después de completar con éxito el paso 8, recibiremos una respuesta de Razorpay que incluye la identificación del pago, la firma, la identificación del pedido, etc. en la interfaz. De lo contrario, la respuesta será de fracaso junto con algunas razones de fracaso. A continuación se muestra el archivo console.log de la respuesta devuelta con éxito.
Paso 10: Envío de respuesta de pago desde la interfaz a nuestro servidor NodeJS
Hemos creado un punto final de API ‘/verifyOrder’ en nuestro servidor para recibir datos de pago. El cartero se usa aquí para enviar datos como un cliente, puede enviar requests de datos posteriores a su manera.
La firma que se recibió de la respuesta de pago se envió a través del encabezado personalizado «x-razorpay-signature», colocar «x-» antes del nombre del encabezado es la convención y el id_pago y el id_pedido se enviaron desde el cuerpo de la solicitud.
Paso 11: Verificación de la autenticidad y envío de la respuesta correspondiente al Usuario
Aunque hemos capturado el pago, no podemos enviar una respuesta al usuario sin verificación. Entonces, este es el paso de verificación, como sabe, tenemos varias cosas como razorpay_payment_id, razorpay_order_id, razorpay_signature y alguna otra información sobre el pago exitoso. Ahora, ¿cómo sabría que esta información corresponde a un pago válido y debe haber sido capturada en su panel de control de Razorpay? Porque puede haber algunos casos en los que de alguna manera cualquiera pueda enviar la respuesta falsa y usted considerará ese pago como capturado. Por lo tanto, para la verificación, cree una firma en su servidor usando el order_id en el que se realizó el pago y el razorpay_payment_id devuelto de la respuesta, también en este paso, necesitará el key_secret que obtuvo anteriormente del panel mientras generaba claves API.
Ahora use el algoritmo SHA256, es una función criptográfica que recibe algunos argumentos y devuelve un hash criptográfico que luego se puede usar para verificar algo basado en el código secreto dado como argumento. Construya un resumen hexadecimal HMAC de acuerdo con la sintaxis predefinida de Razorpay :
generated_signature = HMAC-SHA256(order_id + "|" + razorpay_payment_id, secret);
//HMAC-SHA256:- This is just a naming convention, HMAC-X means the X cryptographic
//function has been used to calculate this hash
if (generated_signature === razorpay_signature) {
//payment is successful, and response has been came from authentic source.
}
Nota: – Si su aplicación es lo suficientemente grande y no quiere hacer esto para la verificación cada vez, hay una forma sencilla de configurar webhook (webhook es una forma de enviar información a otra aplicación en función de los eventos que ocurrieron en tiempo real ) en el panel de control de Razorpay, puede explorarlo.
app.js
//Inside app.js
app.post('/verifyOrder', (req, res)=>{
// STEP 7: Receive Payment Data
const {order_id, payment_id} = req.body;
const razorpay_signature = req.headers['x-razorpay-signature'];
// Pass yours key_secret here
const key_secret = YAEUthsup8SijNs3iveeVlL1;
// STEP 8: Verification & Send Response to User
// Creating hmac object
let hmac = crypto.createHmac('sha256', key_secret);
// Passing the data to be hashed
hmac.update(order_id + "|" + payment_id);
// Creating the hmac in the required format
const generated_signature = hmac.digest('hex');
if(razorpay_signature===generated_signature){
res.json({success:true, message:"Payment has been verified"})
}
else
res.json({success:false, message:"Payment verification failed"})
});
Producción:
Esta es la respuesta que obtuvimos de nuestra API de verificar el pedido, debido a que nuestro pago fue genuino, está devolviendo una respuesta exitosa, con un código de estado 200 significa que todo está bien.
Ahora eso es todo, con esto hemos creado con éxito un pedido, recibido el pago y verificado la autenticidad. Este es el libro
de pagos y pedidos que se muestra en el tablero, el estado capturado significa que hemos recibido el pago con éxito y pagado significa que se pagó el monto del pedido.
Es posible que haya notado que estamos haciendo todas las cosas por separado, es solo para explicar cómo funcionan estas cosas de forma independiente, puede combinarlas fácilmente para trabajar con proyectos del mundo real. Además, tenga en cuenta que Razorpay tiene muchos puntos finales de API que puede usar para personalizar su aplicación de comercio electrónico.
Publicación traducida automáticamente
Artículo escrito por mrtwinklesharma y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA