Cuando se crea una nueva instancia del componente es necesario un objeto de configuración con las propiedades nonce, payload y display_settings.
nonce: valor de seguridad para intercambiar por un token
payload: información de la transacción a procesar
display_settings: configuraciones del formulario
El payload mantiene la misma estructura del API de Autorización - ecommerce sin incluir el objeto payment_method, ya que el método de pago será seleccionado dentro de Flex.
Código encriptado que contiene el valor de la key del comercio. Debe ser generado en backend desde el servicio OAuth de Alignet, a través del API Nonce.
payload
SI
Objeto JSON
JSON con los detalles necesarios para inicializar el formulario, incluyendo datos de la compra y datos del comprador.
display_settings
NO
Objeto
Configuraciones de visualización del formulario.
display_settings.methods
NO
Array de String
Métodos de pago a mostrar. Valores posibles: CARD, YAPE, QR, BANK_TRANSFER, CUOTEALO, PAGOEFECTIVO. Si no se envía, se mostrarán todos los métodos habilitados para el comercio por defecto.
Este es el paso final, donde indicamos dentro de qué elemento del DOM se debe mostrar el formulario y una función callback para ejecutarse al finalizar el proceso.Como parámetros adicionales se pueden agregar dos funciones callback. No son obligatorias, pero sirven para obtener mayor información del proceso:
Callback
Descripción
responseCallback
Se ejecuta cuando se tiene un proceso completado (AUTORIZADO / DENEGADO).
trackingCallback
Se ejecuta por cada evento disparado durante el proceso, por ejemplo click en pagar, click en método de pago o click en información de pago.
onErrorCallback
Se ejecuta cuando hay un error durante el proceso.
function responseCallback(response) { console.log("-------Respuesta-------"); console.log({response});}function trackingCallback(trackdata) { console.log("-------Tracking de Eventos-------"); console.log({trackdata});}function onErrorCallback(error) { console.log("-------Error en el proceso-------"); console.log({error});}paymentForm.init( document.querySelector("#demo"), responseCallback, trackingCallback, onErrorCallback);
El objeto response de la función responseCallback tendrá la misma estructura que la respuesta del API de Autorización - ecommerce. Toma esa sección como referencia principal para request/response del flujo de autorización.
