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 [email protected]

🔗 Links