REDPAY Front End

Este repositorio contiene ejemplos de código, que demuestran la integración de REDPAY para Front End.

Requisitos previos

• Node.js >= 8.x
• NPM

Instalación

npm install redpay

Obtener public key

• Inicia sesión en el Dashboard de RedPay
• Selecciona tu negocio
• Selecciona la opción integración en el menú de la izquierda
• Da clic el Keys
• Da clic en el botón Crear de la sección Public key

Ejemplo

JavaScript

import RedPay from "redpay";

var sucess_callbak = function (sessionId) {
  console.log("SessionId:", sessionId);
};

var error_callbak = function (errorMessage) {
  console.log("Error:", errorMessage);
};

RedPay.configure({
  apiKey: "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", // sustituir por ApiKey
  publicKey: "xxxxxxxxxxxxxx", // sustituir por PublicKey generada desde el dashboard
  isProduction: false, // modificar a true para transaccionar en producción
  fields: {
    card: {
      fistName: "fist_name", // sustituir por id de input de correspondiente
      lastName: "last_name", // sustituir por id de input de correspondiente
      number: "card_number", // sustituir por id de input de correspondiente
      expiryMonth: "expiration_month", // sustituir por id de input de correspondiente
      expiryYear: "expiration_year", // sustituir por id de input de correspondiente
      securityCode: "security_code", // sustituir por id de input de correspondiente
    },
  },
  callbacks: {
    success: (response) => sucess_callbak,
    error: (error) => error_callbak,
  },
});

const onSubmit = (event) => {
  event.preventDefault();
  RedPay.createFormSession();
};

HTML

<form onSubmit="onSubmit(event)">
    <label>Nombre</label>
    <div><input type="text" placeholder="Como aparece en la tarjeta" autocomplete="off" id="fist_name" /></div>
    <label>Apellido</label></div>
    <div><input type="text" placeholder="Como aparece en la tarjeta" autocomplete="off" id="last_name" /></div>
    <label>Número de tarjeta</label></div>
    <div><input type="text" autocomplete="off" id="card_number" /></div>
    <label>Fecha de expiración</label> </div>
    <div>
        <input type="text" placeholder="Mes" id="expiration_month" />
        <input type="text" placeholder="Año" id="expiration_year" />
    </div>
    <label>Código de seguridad</label>
    <div><input type="text" placeholder="3 dígitos" autocomplete="off" id="security_code" /></div>
    <div><button type="submit">Pagar</button></div>
</form>