Inicializar el componente

Una vez que ya tienes el payload y un nonce vigente, el siguiente paso es crear la instancia de FlexPaymentForms y renderizar el formulario dentro de tu DOM.

Parámetros de inicialización

Campo	Obligatorio	Tipo	Descripción
`nonce`	SI	Alfanumérico	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.
`settings`	NO	Objeto	Configuraciones generales del comportamiento visual del componente.
`settings.display_result_screen`	NO	Boolean	Muestra la pantalla de resultado al finalizar el proceso.
`settings.show_close_button`	NO	Boolean	Muestra el botón para cerrar el componente.
`settings.show_border`	NO	Boolean	Activa o desactiva el borde visual del componente.
`settings.show_operation_number`	NO	Boolean	Muestra el número de operación dentro del flujo.
`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.
`i18n`	NO	Objeto	Configuración de idioma del componente.
`i18n.mode`	NO	String	Modo de idiomas. Para este flujo se usa `multi`.
`i18n.default_language`	NO	String	Idioma por defecto del formulario. Valores soportados: `es` o `en`.
`i18n.languages`	NO	Array de String	Lista de idiomas habilitados para el componente. Actualmente solo se soporta `es` y `en`.

Qué defines en este paso

Seguridad

Envías el nonce generado en backend para que Flex pueda iniciar el flujo de forma segura.

Datos de la operación

Reutilizas el payload que construiste para el request de autorización ecommerce.

Métodos visibles

Puedes limitar qué medios aparecen en pantalla con display_settings.methods.

Comportamiento visual

Controlas pantallas de resultado, botón de cierre, borde y visibilidad del número de operación.

Idiomas

Puedes configurar i18n, pero actualmente el componente solo soporta es y en.

Crear la instancia

var paymentForm = new FlexPaymentForms({
    nonce,
    payload,
    settings: {
        display_result_screen: true,
        show_close_button: true,
        show_border: false,
        show_operation_number: true
    },
    display_settings: {
        methods: ["QR", "BANK_TRANSFER", "CARD"]
    },
    i18n: {
        mode: "multi",
        default_language: "es",
        languages: ["es", "en"]
    }
});

Si no envías display_settings.methods, Flex mostrará todos los métodos habilitados para el comercio según su configuración.

En i18n, actualmente solo están disponibles los idiomas es y en. Si defines default_language, debe ser uno de esos dos valores.

Montar el formulario en el DOM

Después de crear la instancia, renderiza el componente dentro del contenedor donde quieres mostrar el formulario.

paymentForm.init(
    document.querySelector("#demo"),
    responseCallback,
    trackingCallback,
    onErrorCallback
);

#demo es solo un ejemplo. Debe existir previamente en tu HTML o en el árbol del framework donde integrarás Flex.

El segundo, tercer y cuarto parámetro de paymentForm.init(...) son funciones callback. Si quieres entender cómo procesarlas y cómo interpretar el JSON final, continúa con la guía de callbacks.

Siguiente paso

Capturar funciones callback

Define responseCallback, trackingCallback y onErrorCallback para reaccionar correctamente al flujo.

Construcción del payload

Si todavía no armaste el objeto de la operación, vuelve a la guía del payload.

Primeros pasos

Integración

Pagos

Gestión y Operaciones

Parámetros de inicialización

Qué defines en este paso

Seguridad

Datos de la operación

Métodos visibles

Comportamiento visual

Idiomas

Crear la instancia

Montar el formulario en el DOM

Siguiente paso

Capturar funciones callback

Construcción del payload

​Parámetros de inicialización

​Qué defines en este paso

Seguridad

Datos de la operación

Métodos visibles

Comportamiento visual

Idiomas

​Crear la instancia

​Montar el formulario en el DOM

​Siguiente paso

Capturar funciones callback

Construcción del payload

Parámetros de inicialización

Qué defines en este paso

Crear la instancia

Montar el formulario en el DOM

Siguiente paso