Saltar al contenido principal

Inicio Rápido

Esta guía de inicio rápido muestra cómo usar los SDK principales de Izipay para agregar un formulario de pago a sus aplicaciones basadas en JavaScript.

Objetivo​

Aprenderá a:

  • Instalar el SDK Izipay
  • Inicializar el formulario de pago.
  • Mostrar el Checkout.

Paso 1: Instalar SDK​

Agregue la siguiente etiqueta de secuencia de comandos en el encabezado HEAD de su archivo HTML.

<script src="https://sandbox-checkout.izipay.pe/payments/v1/js/index.js" defer></script>

Paso 2: Inicializar el SDK​

1. Configura los parámetros de entrada.​

const iziConfig = {
  transactionId: '{TRANSACTION_ID}',
  action: 'pay',
  merchantCode: '{MERCHANT_CODE}',
  order: {
    orderNumber: '{ORDER_NUMBER}',
    currency: 'PEN',
    amount: '149.00',
    processType: 'AT',
    merchantBuyerId: '{MERCHANT_BUYER_ID}',
    dateTimeTransaction: '{DATETIME_TRANSACTION}'
  },
  billing: {
    firstName: 'Lucho',
    lastName: 'Torres',
    email: 'luchotorres@izipay.pe',
    phoneNumber: '989897960',
    street: 'Av. Jorge Chávez 275',
    city: 'Lima',
    state: 'Lima',
    country: 'PE',
    postalCode: '15000',
    documentType: 'DNI',
    document: '12345678'
  },
  shipping: {
    firstName: 'Lucho',
    lastName: 'Torres',
    email: 'luchotorres@izipay.pe',
    phoneNumber: '989897960',
    street: 'Av. Jorge Chávez 275',
    city: 'Lima',
    state: 'Lima',
    country: 'PE',
    postalCode: '15000',
    documentType: 'DNI',
    document: '12345679'
  }
};

2. Instancia la clase.​

try {

  const checkout = new Izipay({ config: iziConfig });

} catch ({Errors, message, date}) {

    console.log({Errors, message, date});

};

Paso 3: Mostrar el Checkout.​

Luego de crear la instancia, con los datos enviados correctamente en la configuración, podrás visualizar el formulario llamando al método LoadForm el cual recibe los siguientes parámetros.

ParámetrosDescripciónRequerido
authorizationValor usado para autenticar al sistema que desee consumir un servicio de PuntoWeb. Puede ser generado al consumir el servicio de generación de Token de sesiónSI
keyRSALlave pública que puedes obtenerla desde el panel.SI
callbackResponseValor usado para recibir las respuestas de la transacción.NO

(*) En este apartado podrás encontrar tu llave pública entre otros datos necesarios para la integración.
Tip

Otra manera de leer la respuesta de la transacción es accediendo a la Clase global Izipay de la siguiente manera: Izipay.prototype.Response 

const callbackResponsePayment = (response) => {
  console.log(response);
};

try {
  checkout &&
    checkout.LoadForm({
      authorization: '{TOKEN_SESSION}',
      keyRSA: '{KEY_RSA}',
      callbackResponse: callbackResponsePayment,
    });
} catch ({Errors, message, date}) {
  console.log({Errors, message, date});
};

Importante​

  • La Api de Token de sesión debe ser invocada desde tu Backend.

  • En el ejemplo proporcionado en el paso 1, se mostrará un Formulario de pago con valores por defecto. conoce todos los parámetros de configuración aquí.

  • Puedes apoyarte de los eventos de nuestro checkout para un flujo más personalizado.

  • Puedes visualizar los errores en el apartado del catch.

  • Descarga un ejemplo aquí

Última actualización en