Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.pay-me.com/llms.txt

Use this file to discover all available pages before exploring further.

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

CampoObligatorioTipoDescripción
nonceSIAlfanuméricoCó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.
payloadSIObjeto JSONJSON con los detalles necesarios para inicializar el formulario, incluyendo datos de la compra y datos del comprador.
settingsNOObjetoConfiguraciones generales del comportamiento visual del componente.
settings.display_result_screenNOBooleanMuestra la pantalla de resultado al finalizar el proceso.
settings.show_close_buttonNOBooleanMuestra el botón para cerrar el componente.
settings.show_borderNOBooleanActiva o desactiva el borde visual del componente.
settings.show_operation_numberNOBooleanMuestra el número de operación dentro del flujo.
display_settingsNOObjetoConfiguraciones de visualización del formulario.
display_settings.methodsNOArray de StringMé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.
i18nNOObjetoConfiguración de idioma del componente.
i18n.modeNOStringModo de idiomas. Para este flujo se usa multi.
i18n.default_languageNOStringIdioma por defecto del formulario. Valores soportados: es o en.
i18n.languagesNOArray de StringLista 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.