Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

redsys-connect

ark-platforms53ISC1.0.4TypeScript support: included

A simple and secure NPM package to integrate the RedSys payment gateway with modern web technologies like React, Next.js, and Angular.

RedSys, payment gateway, ecommerce, payment integration, NPM package, React, Next.js, Angular, secure payment, RedSys API, redsys, payment, gateway, interface, tpv, pos, sabadell, caixabank, bbva, credit, card, webservice

readme

RedSys-Connect

RedSys-Connect es un paquete NPM ligero diseñado para simplificar la integración de la pasarela de pagos RedSys en aplicaciones web modernas. Este paquete funciona a la perfección con tecnologías como React, Next.js, Angular y otras.

Características

  • Fácil integración: Convierte rápidamente los parámetros del comercio a un formato compatible con RedSys.
  • Codificación Base64: Codifica automáticamente los parámetros en Base64 para una comunicación segura con RedSys.
  • Generación de firma: Genera la firma HMAC-SHA256 necesaria para las transacciones de RedSys.
  • Formulario de pago personalizable: Genera y personaliza el formulario de pago según tus necesidades.

Instalación

Para instalar el paquete, simplemente ejecuta:

npm install redsys-connect

Uso de RedSys-Connect con Formulario propio

Importar las funciones necesarias primero, importe las funciones necesarias del paquete:

import { MerchantParams, orderNumber } from "redsys-connect";

Definir los parámetros del comercio:

Debes definir los parámetros del comercio que se enviarán a RedSys. Estos parámetros son requeridos por la API de RedSys para la transacción.

const params: MerchantParams = {
  amount: '1000', // Importe en céntimos (p. ej., 10,00 EUR = 1000)
  currency: 'EUR', // código de moneda
  merchantCode: '123456789', // Su código de comerciante de RedSys
  merchantUrl: 'https://your-merchant-url.com', // La URL de tu comercio
  order: orderNumber(), // Orden - La orden se ppuede generar automaticamente
  terminal: '1', // número de terminal
  transactionType: '0', // tipo de transacción
  urlPaymentDenied: 'https://your-site.com/payment-denied', // URL de pago denegado
  urlPaymentSuccess: 'https://your-site.com/payment-success', // URL de pago exitoso
};

Pasa los parámetros a Base64

Para pasar los merchantParams puedes usar la función createMerchantParameters

const parametrosDelComercio = createMerchantParameters(params);

Define tu clave secreta (clave Comercio)

Debes proporcionar tu clave secreta (RedSys la proporciona):

const claveComercio = "your-secret-key";

Generar la firma

RedSys requiere que los datos enviados esten en Base64, por lo cual para generar la firma puedes hacerlo usando createMerchantSignature

const dsSignature = createMerchantSignature(
  params,
  parametrosDelComercio,
  claveComercio
);

Botón para pagar

Una vez realizado todo el proceso anterior puede realizar tu formulario, recuerda que los campos no pueden ser visibles:

<form
  name="formularioPago"
  method="POST"
  action="https://sis-t.redsys.es:25443/sis/realizarPago">
    <input
      type="text" hidden name="DS_MERCHANTPARAMETERS" value={parametrosDelComercio}/>
    <input type="text" hidden name="DS_SIGNATURE" value={dsSignature} />
    <input type="text" name="DS_SIGNATUREVERSION" value={signatureVersion} /> `Puedes importarla de: import { signatureVersion } from "redsys-connect";`
    <input type="submit" value="REALIZAR PAGO" />
</form>

URL para produción y desarrollo:

Las url para desarrollo es:

https://sis-t.redsys.es:25443/sis/realizarPago

para produción es:

https://sis.redsys.es/sis/realizarPago

Formulario integrado

Importar las funciones necesarias

import { generatePaymentForm, orderNumber } from "redsys-connect";
import { MerchantParams } from "redsys-connect";

Definir los parámetros del comercio

Define un objeto MerchantParams con los parámetros necesarios para crear el formulario de pago. A continuación se muestran algunos de los parámetros clave que debes configurar:

const params: MerchantParams = {
  amount: '1000', // Importe en céntimos (p. ej., 10,00 EUR = 1000)
  currency: 'EUR', // código de moneda
  merchantCode: '123456789', // Su código de comerciante de RedSys
  merchantUrl: 'https://your-merchant-url.com', // La URL de tu comercio
  order: orderNumber(), // Orden - La orden se ppuede generar automaticamente
  terminal: '1', // número de terminal
  transactionType: '0', // tipo de transacción
  urlPaymentDenied: 'https://your-site.com/payment-denied', // URL de pago denegado
  urlPaymentSuccess: 'https://your-site.com/payment-success', // URL de pago exitoso
};

Definir la clave de comercio

La clave de comercio es un valor base64 que se utiliza para firmar el formulario de pago. Este valor es proporcionado por Redsys y se utiliza para garantizar la integridad y seguridad de la transacción.

const claveComercio = " TU CLAVE";

Generar el formulario de pago

Llama a la función generatePaymentForm() para generar el formulario de pago. Asegúrate de proporcionar los parámetros necesarios, incluyendo la clave de comercio, si estás en un entorno de desarrollo (dev = true), y el texto personalizado para el botón de pago.

const dev = true;
const submitText = "PAGAR AHORA"; // Llamada a la acción
const formHTML = generatePaymentForm(params, claveComercio, dev, submitText);

Mostrar el formulario

Una vez que tengas el HTML del formulario, puedes insertarlo en tu aplicación para que el usuario pueda completar el pago.

<div dangerouslySetInnerHTML={{ __html: formHTML }} />

Configuración para producción solo generatePaymentForm

Si estás listo para producción, debes cambiar el parámetro dev a false y utilizar los valores correctos de Redsys para producción.

const dev = false;

Soporte

Para soporte puedes enviarnos un correo a spain@ark-platforms.com

linkedin instagram facebook whatsapp website gmail