JSPM

redsys-connect

1.0.4
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
    • Downloads 4
    • Score
      100M100P100Q47427F
    • License ISC

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

    Package Exports

    • redsys-connect
    • redsys-connect/dist/index.mjs

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (redsys-connect) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    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