Integración mediante SDK en JavaScript Vanilla

A través de nuestro SDK en JavaScript Vanilla, podrás integrar el checkout en tu web de forma sencilla y segura.

El SDK utiliza una biblioteca del lado del cliente en JavaScript que se puede integrar fácilmente en tu página de pago.

Esta biblioteca se encarga de renderizar la interfaz de usuario y de gestionar la comunicación necesaria con Paylands para ejecutar cualquier tipo de transacción de manera fluida.

Para poder utilizar el SDK será necesario previamente haber generado una orden de pago en Paylands. Esta orden deberá contener el uuid del checkout creado previamente. Para más información sobre cómo generar una orden con checkout, consulta la sección Integración via API.

1. Incluir el SDK en tu web

En nuestra página, cargaremos el script del checkout SDK de Paylands.

<script async src="https://ws-paylands.paynopain.com/assets/checkout/paylands-checkout-sdk.js"></script>

Y a continuación inicializaremos el SDK indicando el token generado en la orden de pago.

const paylandsCheckout = await PaylandsCheckout.create({token: '9fdade323e7...'});

Esto devolverá una instancia de PaylandsCheckout que se puede utilizar para interactuar con el SDK.

2. Funciones del SDK

Redirección

Para redirigir al usuario al checkout, simplemente llama a la función redirect.

await paylandsCheckout.redirect();

Renderizado

Para renderizar el checkout en un contenedor específico, llama a la función render.

await paylandsCheckout.render('renderContainer');

Request
container	Obligatorio	ID del contenedor en el que se renderizará el checkout

Formulario de tarjeta

Para renderizar un formulario de tarjeta personalizable en un contenedor específico, llama a la función card.

await paylandsCheckout.card({
    container: '#renderContainer',
    form: { ... },
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el formulario
form (Object)	Obligatorio	Configuración del formulario
customization (Object)	Obligatorio	Personalización del formulario

form (Object)
holderLabel	Opcional	Label del input del propietario de la tarjeta
holderError	Opcional	Error a mostrar si el valor es incorrecto
panLabel	Opcional	Label del input del PAN de la tarjeta
panError	Opcional	Error a mostrar si el valor es incorrecto
expiryLabel	Opcional	Label del input de la fecha de caducidad de la tarjeta
expiryError	Opcional	Error a mostrar si el valor es incorrecto
cvvLabel	Opcional	Label del input del CVV de la tarjeta
cvvError	Opcional	Error a mostrar si el valor es incorrecto

customization (Object)
font	Opcional	Fuente del texto
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
errorColor	Opcional	Color del texto de error
borderColor	Opcional	Color del borde de los inputs
borderRadius	Opcional	Radio del borde de los inputs
padding	Opcional	Espaciado
inputTextSize	Opcional	Tamaño del texto del input
labelTextSize	Opcional	Tamaño del texto del label
iconSize	Opcional	Tamaño de los iconos
iconColor	Opcional	Color de los iconos

¿Cómo validar el formulario?

El formulario tiene su propia validación la cual comunica mediante el evento card_valid.

window.addEventListener('message', event => {
    if (event.data.card_valid === true) {
        console.log('El formulario es válido');
    }
    if (event.data.card_valid === false) {
        console.log('El formulario contiene errores');
    }
});

¿Cómo hacer submit?

Enviar un evento pay con el valor card.

button.addEventListener("click", () => window.postMessage({ pay: "card" }));

Botón de Google Pay

Para renderizar un botón de Google Pay en un contenedor específico, llama a la función google_pay. Es necesario que el comercio tenga habilitado Google Pay en su cuenta de Paylands. Para más información, consulta la sección Google Pay.

await paylandsCheckout.google_pay('#renderContainer');

Request
container	Obligatorio	ID del contenedor en el que se renderizará el botón de Google Pay

Botón de Apple Pay

Para renderizar un botón de Apple Pay en un contenedor específico, llama a la función apple_pay. Es necesario que el comercio tenga habilitado Apple Pay en su cuenta de Paylands. Para más información, consulta la sección Apple Pay.

await paylandsCheckout.apple_pay('#renderContainer');

Request
container	Obligatorio	ID del contenedor en el que se renderizará el botón de Apple Pay

Botón de PayPal

Para renderizar un botón de PayPal en un contenedor específico, llama a la función payPal. Es necesario que el comercio tenga habilitado PayPal en su cuenta de Paylands. |

await paylandsCheckout.payPal({
    container: '#renderContainer',
    form: { ... },
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el botón de PayPal
form (Object)	Obligatorio	Configuración del botón
customization (Object)	Obligatorio	Personalización del botón

form (Object)
prefilledAddress	Opcional	Dirección del usuario si la conocemos
prefilledCountry	Opcional	País del usuario si lo conocemos

customization (Object)
layout	Opcional	https://developer.paypal.com/sdk/js/reference/#link-layout
color	Opcional	https://developer.paypal.com/sdk/js/reference/#link-color
label	Opcional	https://developer.paypal.com/sdk/js/reference/#link-label
borderRadius	Opcional	https://developer.paypal.com/sdk/js/reference/#link-borderradius

Botón para pagos con criptomoneda

Para renderizar un botón para pagos con criptomonedas en un contenedor específico, llama a la función crypto.

await paylandsCheckout.crypto({
    container: '#renderContainer',
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el botón
customization (Object)	Obligatorio	Personalización del botón

customization (Object)
buttonText	Opcional	Contenido del botón
font	Opcional	Fuente de texto
primaryColor	Opcional	Color del botón
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
borderRadius	Opcional	Radio del borde del botón
padding	Opcional	Espaciado
buttonTextSize	Opcional	Tamaño del texto del botón

Botón de Pix

Para renderizar un botón de Pix en un contenedor específico, llama a la función pix.

await paylandsCheckout.pix({
    container: '#renderContainer',
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el botón
customization (Object)	Obligatorio	Personalización del botón

customization (Object)
buttonText	Opcional	Contenido del botón
font	Opcional	Fuente de texto
primaryColor	Opcional	Color del botón
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
borderRadius	Opcional	Radio del borde del botón
padding	Opcional	Espaciado
buttonTextSize	Opcional	Tamaño del texto del botón

Botón de Floa

Para renderizar un botón de Floa en un contenedor específico, llama a la función floa.

await paylandsCheckout.floa({
    container: '#renderContainer',
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el botón
customization (Object)	Obligatorio	Personalización del botón

customization (Object)
buttonText	Opcional	Contenido del botón
font	Opcional	Fuente de texto
primaryColor	Opcional	Color del botón
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
borderRadius	Opcional	Radio del borde del botón
padding	Opcional	Espaciado
buttonTextSize	Opcional	Tamaño del texto del botón

Botón de PSE

Para renderizar un botón de PSE en un contenedor específico, llama a la función pse.

await paylandsCheckout.pse({
    container: '#renderContainer',
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el botón
customization (Object)	Obligatorio	Personalización del botón

customization (Object)
buttonText	Opcional	Contenido del botón
font	Opcional	Fuente de texto
primaryColor	Opcional	Color del botón
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
borderRadius	Opcional	Radio del borde del botón
padding	Opcional	Espaciado
buttonTextSize	Opcional	Tamaño del texto del botón

Botón de Spei

Para renderizar un botón de Spei en un contenedor específico, llama a la función spei.

await paylandsCheckout.spei({
    container: '#renderContainer',
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el botón
customization (Object)	Obligatorio	Personalización del botón

customization (Object)
buttonText	Opcional	Contenido del botón
font	Opcional	Fuente de texto
primaryColor	Opcional	Color del botón
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
borderRadius	Opcional	Radio del borde del botón
padding	Opcional	Espaciado
buttonTextSize	Opcional	Tamaño del texto del botón

Botón de Multibanco

Para renderizar un botón de Multibanco en un contenedor específico, llama a la función multibanco.

await paylandsCheckout.multibanco({
    container: '#renderContainer',
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el formulario
customization (Object)	Obligatorio	Personalización del formulario

customization (Object)
buttonText	Opcional	Contenido del botón
font	Opcional	Fuente de texto
primaryColor	Opcional	Color del botón
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
borderRadius	Opcional	Radio del borde del botón
padding	Opcional	Espaciado
buttonTextSize	Opcional	Tamaño del texto del botón

Botón de transferencia bancaria

Para renderizar un botón de transferencia bancaria en un contenedor específico, llama a la función transfer.

await paylandsCheckout.transfer({
    container: '#renderContainer',
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el botón
customization (Object)	Obligatorio	Personalización del botón

customization (Object)
buttonText	Opcional	Contenido del botón
font	Opcional	Fuente de texto
primaryColor	Opcional	Color del botón
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
borderRadius	Opcional	Radio del borde del botón
padding	Opcional	Espaciado
buttonTextSize	Opcional	Tamaño del texto del botón

Botón de PicPay

Para renderizar un botón de PicPay en un contenedor específico, llama a la función picpay.

await paylandsCheckout.picpay({
    container: '#renderContainer',
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el botón
customization (Object)	Obligatorio	Personalización del botón

customization (Object)
buttonText	Opcional	Contenido del botón
font	Opcional	Fuente de texto
primaryColor	Opcional	Color del botón
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
borderRadius	Opcional	Radio del borde del botón
padding	Opcional	Espaciado
buttonTextSize	Opcional	Tamaño del texto del botón

Botón de paysafecard

Para renderizar un botón de paysafecard en un contenedor específico, llama a la función paysafecard.

await paylandsCheckout.paysafecard({
    container: '#renderContainer',
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el botón
customization (Object)	Obligatorio	Personalización del botón

customization (Object)
buttonText	Opcional	Contenido del botón
font	Opcional	Fuente de texto
primaryColor	Opcional	Color del botón
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
borderRadius	Opcional	Radio del borde del botón
padding	Opcional	Espaciado
buttonTextSize	Opcional	Tamaño del texto del botón

Formulario de Bizum

Para renderizar un formulario de Bizum en un contenedor específico, llama a la función bizum.

await paylandsCheckout.bizum({
    container: '#renderContainer',
    form: { ... },
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el formulario
form (Object)	Obligatorio	Configuración del formulario
customization (Object)	Obligatorio	Personalización del formulario

form (Object)
prefixLabel	Opcional	Label del input del prefijo telefónico
prefixError	Opcional	Error a mostrar si el valor es incorrecto
phoneLabel	Opcional	Label del input del número telefónico
phoneError	Opcional	Error a mostrar si el valor es incorrecto
prefilledPrefix	Opcional	Prefijo del usuario si lo conocemos
prefilledPhone	Opcional	Número del usuario si lo conocemos

customization (Object)
font	Opcional	Fuente de texto
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
errorColor	Opcional	Color del texto de error
borderColor	Opcional	Color del borde de los inputs
borderRadius	Opcional	Radio del borde de los inputs
padding	Opcional	Espaciado
inputTextSize	Opcional	Tamaño del texto del input
labelTextSize	Opcional	Tamaño del texto del label
iconSize	Opcional	Tamaño de los iconos
iconColor	Opcional	Color de los iconos

¿Cómo validar el formulario?

El formulario tiene su propia validación la cual comunica mediante el evento bizum_valid.

window.addEventListener('message', event => {
    if (event.data.bizum_valid === true) {
        console.log('El formulario es válido');
    }
    if (event.data.bizum_valid === false) {
        console.log('El formulario contiene errores');
    }
});

¿Cómo hacer submit?

Enviar un evento pay con el valor bizum.

button.addEventListener("click", () => window.postMessage({ pay: "bizum" }));

Formulario de Cofidis

Para renderizar un formulario de Cofidis en un contenedor específico, llama a la función cofidis.

await paylandsCheckout.cofidis({
    container: '#renderContainer',
    form: { ... },
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el formulario
form (Object)	Obligatorio	Configuración del formulario
customization (Object)	Obligatorio	Personalización del formulario

form (Object)
nameLabel	Opcional	Label del input del nombre
nameError	Opcional	Error a mostrar si el valor es incorrecto
lastNameLabel	Opcional	Label del input del apellido
lastNameError	Opcional	Error a mostrar si el valor es incorrecto
emailLabel	Opcional	Label del input del email
emailError	Opcional	Error a mostrar si el valor es incorrecto
prefilledName	Opcional	Nombre del usuario si lo conocemos
prefilledLastName	Opcional	Apellido del usuario si lo conocemos
prefilledEmail	Opcional	Email del usuario si lo conocemos

customization (Object)
font	Opcional	Fuente de texto
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
errorColor	Opcional	Color del texto de error
borderColor	Opcional	Color del borde de los inputs
borderRadius	Opcional	Radio del borde de los inputs
padding	Opcional	Espaciado
inputTextSize	Opcional	Tamaño del texto del input
labelTextSize	Opcional	Tamaño del texto del label
iconSize	Opcional	Tamaño de los iconos
iconColor	Opcional	Color de los iconos

¿Cómo validar el formulario?

El formulario tiene su propia validación la cual comunica mediante el evento cofidis_valid.

window.addEventListener('message', event => {
    if (event.data.cofidis_valid === true) {
        console.log('El formulario es válido');
    }
    if (event.data.cofidis_valid === false) {
        console.log('El formulario contiene errores');
    }
});

¿Cómo hacer submit?

Enviar un evento pay con el valor cofidis.

button.addEventListener("click", () => window.postMessage({ pay: "cofidis" }));

Formulario de Giropay

Para renderizar un formulario de Giropay en un contenedor específico, llama a la función giropay.

await paylandsCheckout.giropay({
    container: '#renderContainer',
    form: { ... },
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el formulario
form (Object)	Obligatorio	Configuración del formulario
customization (Object)	Obligatorio	Personalización del formulario

form (Object)
nameLabel	Opcional	Label del input del nombre
nameError	Opcional	Error a mostrar si el valor es incorrecto
lastNameLabel	Opcional	Label del input del apellido
lastNameError	Opcional	Error a mostrar si el valor es incorrecto
emailLabel	Opcional	Label del input del email
emailError	Opcional	Error a mostrar si el valor es incorrecto
addressLabel	Opcional	Label del input de la dirección
addressError	Opcional	Error a mostrar si el valor es incorrecto
zipCodeLabel	Opcional	Label del input del código postal
zipCodeError	Opcional	Error a mostrar si el valor es incorrecto
cityLabel	Opcional	Label del input de la ciudad
cityError	Opcional	Error a mostrar si el valor es incorrecto
countryLabel	Opcional	Label del input del país
countryError	Opcional	Error a mostrar si el valor es incorrecto
prefilledName	Opcional	Nombre del usuario si lo conocemos
prefilledLastName	Opcional	Apellido del usuario si lo conocemos
prefilledEmail	Opcional	Email del usuario si lo conocemos
prefilledAddress	Opcional	Dirección del usuario si la conocemos
prefilledZipCode	Opcional	Código postal del usuario si lo conocemos
prefilledCity	Opcional	Ciudad del usuario si la conocemos
prefilledCountry	Opcional	País del usuario si lo conocemos

customization (Object)
font	Opcional	Fuente de texto
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
errorColor	Opcional	Color del texto de error
borderColor	Opcional	Color del borde de los inputs
borderRadius	Opcional	Radio del borde de los inputs
padding	Opcional	Espaciado
inputTextSize	Opcional	Tamaño del texto del input
labelTextSize	Opcional	Tamaño del texto del label
iconSize	Opcional	Tamaño de los iconos
iconColor	Opcional	Color de los iconos

¿Cómo validar el formulario?

El formulario tiene su propia validación la cual comunica mediante el evento giropay_valid.

window.addEventListener('message', event => {
    if (event.data.giropay_valid === true) {
        console.log('El formulario es válido');
    }
    if (event.data.giropay_valid === false) {
        console.log('El formulario contiene errores');
    }
});

¿Cómo hacer submit?

Enviar un evento pay con el valor giropay.

button.addEventListener("click", () => window.postMessage({ pay: "giropay" }));

Formulario de ideal

Para renderizar un formulario de ideal en un contenedor específico, llama a la función ideal.

await paylandsCheckout.ideal({
    container: '#renderContainer',
    form: { ... },
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el formulario
form (Object)	Obligatorio	Configuración del formulario
customization (Object)	Obligatorio	Personalización del formulario

form (Object)
nameLabel	Opcional	Label del input del nombre
nameError	Opcional	Error a mostrar si el valor es incorrecto
lastNameLabel	Opcional	Label del input del apellido
lastNameError	Opcional	Error a mostrar si el valor es incorrecto
emailLabel	Opcional	Label del input del email
emailError	Opcional	Error a mostrar si el valor es incorrecto
addressLabel	Opcional	Label del input de la dirección
addressError	Opcional	Error a mostrar si el valor es incorrecto
zipCodeLabel	Opcional	Label del input del código postal
zipCodeError	Opcional	Error a mostrar si el valor es incorrecto
cityLabel	Opcional	Label del input de la ciudad
cityError	Opcional	Error a mostrar si el valor es incorrecto
countryLabel	Opcional	Label del input del país
countryError	Opcional	Error a mostrar si el valor es incorrecto
prefilledName	Opcional	Nombre del usuario si lo conocemos
prefilledLastName	Opcional	Apellido del usuario si lo conocemos
prefilledEmail	Opcional	Email del usuario si lo conocemos
prefilledAddress	Opcional	Dirección del usuario si la conocemos
prefilledZipCode	Opcional	Código postal del usuario si lo conocemos
prefilledCity	Opcional	Ciudad del usuario si la conocemos
prefilledCountry	Opcional	País del usuario si lo conocemos

customization (Object)
font	Opcional	Fuente de texto
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
errorColor	Opcional	Color del texto de error
borderColor	Opcional	Color del borde de los inputs
borderRadius	Opcional	Radio del borde de los inputs
padding	Opcional	Espaciado
inputTextSize	Opcional	Tamaño del texto del input
labelTextSize	Opcional	Tamaño del texto del label
iconSize	Opcional	Tamaño de los iconos
iconColor	Opcional	Color de los iconos

¿Cómo validar el formulario?

El formulario tiene su propia validación la cual comunica mediante el evento ideal_valid.

window.addEventListener('message', event => {
    if (event.data.ideal_valid === true) {
        console.log('El formulario es válido');
    }
    if (event.data.ideal_valid === false) {
        console.log('El formulario contiene errores');
    }
});

¿Cómo hacer submit?

Enviar un evento pay con el valor ideal.

button.addEventListener("click", () => window.postMessage({ pay: "ideal" }));

Formulario de Klarna

Para renderizar un formulario de Klarna en un contenedor específico, llama a la función klarna.

await paylandsCheckout.klarna({
    container: '#renderContainer',
    form: { ... },
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el formulario
form (Object)	Obligatorio	Configuración del formulario
customization (Object)	Obligatorio	Personalización del formulario

form (Object)
nameLabel	Opcional	Label del input del nombre
nameError	Opcional	Error a mostrar si el valor es incorrecto
lastNameLabel	Opcional	Label del input del apellido
lastNameError	Opcional	Error a mostrar si el valor es incorrecto
emailLabel	Opcional	Label del input del email
emailError	Opcional	Error a mostrar si el valor es incorrecto
addressLabel	Opcional	Label del input de la dirección
addressError	Opcional	Error a mostrar si el valor es incorrecto
zipCodeLabel	Opcional	Label del input del código postal
zipCodeError	Opcional	Error a mostrar si el valor es incorrecto
cityLabel	Opcional	Label del input de la ciudad
cityError	Opcional	Error a mostrar si el valor es incorrecto
countryLabel	Opcional	Label del input del país
countryError	Opcional	Error a mostrar si el valor es incorrecto
prefilledName	Opcional	Nombre del usuario si lo conocemos
prefilledLastName	Opcional	Apellido del usuario si lo conocemos
prefilledEmail	Opcional	Email del usuario si lo conocemos
prefilledAddress	Opcional	Dirección del usuario si la conocemos
prefilledZipCode	Opcional	Código postal del usuario si lo conocemos
prefilledCity	Opcional	Ciudad del usuario si la conocemos
prefilledCountry	Opcional	País del usuario si lo conocemos

customization (Object)
font	Opcional	Fuente de texto
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
errorColor	Opcional	Color del texto de error
borderColor	Opcional	Color del borde de los inputs
borderRadius	Opcional	Radio del borde de los inputs
padding	Opcional	Espaciado
inputTextSize	Opcional	Tamaño del texto del input
labelTextSize	Opcional	Tamaño del texto del label
iconSize	Opcional	Tamaño de los iconos
iconColor	Opcional	Color de los iconos

¿Cómo validar el formulario?

El formulario tiene su propia validación la cual comunica mediante el evento klarna_valid.

window.addEventListener('message', event => {
    if (event.data.klarna_valid === true) {
        console.log('El formulario es válido');
    }
    if (event.data.klarna_valid === false) {
        console.log('El formulario contiene errores');
    }
});

¿Cómo hacer submit?

Enviar un evento pay con el valor klarna.

button.addEventListener("click", () => window.postMessage({ pay: "klarna" }));

Formulario de MBWay

Para renderizar un formulario de MBWay en un contenedor específico, llama a la función mbway.

await paylandsCheckout.mbway({
    container: '#renderContainer',
    form: { ... },
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el formulario
form (Object)	Obligatorio	Configuración del formulario
customization (Object)	Obligatorio	Personalización del formulario

form (Object)
nameLabel	Opcional	Label del input del nombre
nameError	Opcional	Error a mostrar si el valor es incorrecto
lastNameLabel	Opcional	Label del input del apellido
lastNameError	Opcional	Error a mostrar si el valor es incorrecto
emailLabel	Opcional	Label del input del email
emailError	Opcional	Error a mostrar si el valor es incorrecto
prefixLabel	Opcional	Label del input del prefijo telefónico
prefixError	Opcional	Error a mostrar si el valor es incorrecto
phoneLabel	Opcional	Label del input del número telefónico
phoneError	Opcional	Error a mostrar si el valor es incorrecto
prefilledName	Opcional	Nombre del usuario si lo conocemos
prefilledLastName	Opcional	Apellido del usuario si lo conocemos
prefilledEmail	Opcional	Email del usuario si lo conocemos
prefilledPrefix	Opcional	Prefijo del usuario si lo conocemos
prefilledPhone	Opcional	Número del usuario si lo conocemos

customization (Object)
font	Opcional	Fuente de texto
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
errorColor	Opcional	Color del texto de error
borderColor	Opcional	Color del borde de los inputs
borderRadius	Opcional	Radio del borde de los inputs
padding	Opcional	Espaciado
inputTextSize	Opcional	Tamaño del texto del input
labelTextSize	Opcional	Tamaño del texto del label
iconSize	Opcional	Tamaño de los iconos
iconColor	Opcional	Color de los iconos

¿Cómo validar el formulario?

El formulario tiene su propia validación la cual comunica mediante el evento mbway_valid.

window.addEventListener('message', event => {
    if (event.data.mbway_valid === true) {
        console.log('El formulario es válido');
    }
    if (event.data.mbway_valid === false) {
        console.log('El formulario contiene errores');
    }
});

¿Cómo hacer submit?

Enviar un evento pay con el valor mbway.

button.addEventListener("click", () => window.postMessage({ pay: "mbway" }));

Formulario de Sofort

Para renderizar un formulario de Sofort en un contenedor específico, llama a la función sofort.

await paylandsCheckout.sofort({
    container: '#renderContainer',
    form: { ... },
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el formulario
form (Object)	Obligatorio	Configuración del formulario
customization (Object)	Obligatorio	Personalización del formulario

form (Object)
nameLabel	Opcional	Label del input del nombre
nameError	Opcional	Error a mostrar si el valor es incorrecto
lastNameLabel	Opcional	Label del input del apellido
lastNameError	Opcional	Error a mostrar si el valor es incorrecto
emailLabel	Opcional	Label del input del email
emailError	Opcional	Error a mostrar si el valor es incorrecto
addressLabel	Opcional	Label del input de la dirección
addressError	Opcional	Error a mostrar si el valor es incorrecto
zipCodeLabel	Opcional	Label del input del código postal
zipCodeError	Opcional	Error a mostrar si el valor es incorrecto
cityLabel	Opcional	Label del input de la ciudad
cityError	Opcional	Error a mostrar si el valor es incorrecto
countryLabel	Opcional	Label del input del país
countryError	Opcional	Error a mostrar si el valor es incorrecto
prefilledName	Opcional	Nombre del usuario si lo conocemos
prefilledLastName	Opcional	Apellido del usuario si lo conocemos
prefilledEmail	Opcional	Email del usuario si lo conocemos
prefilledAddress	Opcional	Dirección del usuario si la conocemos
prefilledZipCode	Opcional	Código postal del usuario si lo conocemos
prefilledCity	Opcional	Ciudad del usuario si la conocemos
prefilledCountry	Opcional	País del usuario si lo conocemos

customization (Object)
font	Opcional	Fuente de texto
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
errorColor	Opcional	Color del texto de error
borderColor	Opcional	Color del borde de los inputs
borderRadius	Opcional	Radio del borde de los inputs
padding	Opcional	Espaciado
inputTextSize	Opcional	Tamaño del texto del input
labelTextSize	Opcional	Tamaño del texto del label
iconSize	Opcional	Tamaño de los iconos
iconColor	Opcional	Color de los iconos

¿Cómo validar el formulario?

El formulario tiene su propia validación la cual comunica mediante el evento sofort_valid.

window.addEventListener('message', event => {
    if (event.data.sofort_valid === true) {
        console.log('El formulario es válido');
    }
    if (event.data.sofort_valid === false) {
        console.log('El formulario contiene errores');
    }
});

¿Cómo hacer submit?

Enviar un evento pay con el valor sofort.

button.addEventListener("click", () => window.postMessage({ pay: "sofort" }));

Formulario de Viacash

Para renderizar un formulario de Viacash en un contenedor específico, llama a la función viacash.

await paylandsCheckout.viacash({
    container: '#renderContainer',
    form: { ... },
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el formulario
form (Object)	Obligatorio	Configuración del formulario
customization (Object)	Obligatorio	Personalización del formulario

form (Object)
nameLabel	Opcional	Label del input del nombre
nameError	Opcional	Error a mostrar si el valor es incorrecto
lastNameLabel	Opcional	Label del input del apellido
lastNameError	Opcional	Error a mostrar si el valor es incorrecto
emailLabel	Opcional	Label del input del email
emailError	Opcional	Error a mostrar si el valor es incorrecto
prefilledName	Opcional	Nombre del usuario si lo conocemos
prefilledLastName	Opcional	Apellido del usuario si lo conocemos
prefilledEmail	Opcional	Email del usuario si lo conocemos

customization (Object)
font	Opcional	Fuente de texto
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
errorColor	Opcional	Color del texto de error
borderColor	Opcional	Color del borde de los inputs
borderRadius	Opcional	Radio del borde de los inputs
padding	Opcional	Espaciado
inputTextSize	Opcional	Tamaño del texto del input
labelTextSize	Opcional	Tamaño del texto del label
iconSize	Opcional	Tamaño de los iconos
iconColor	Opcional	Color de los iconos

¿Cómo validar el formulario?

El formulario tiene su propia validación la cual comunica mediante el evento viacash_valid.

window.addEventListener('message', event => {
    if (event.data.viacash_valid === true) {
        console.log('El formulario es válido');
    }
    if (event.data.viacash_valid === false) {
        console.log('El formulario contiene errores');
    }
});

¿Cómo hacer submit?

Enviar un evento pay con el valor viacash.

button.addEventListener("click", () => window.postMessage({ pay: "viacash" }));

Formulario de Mach

Para renderizar un formulario de Mach en un contenedor específico, llama a la función mach.

await paylandsCheckout.mach({
    container: '#renderContainer',
    form: { ... },
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el formulario
form (Object)	Obligatorio	Configuración del formulario
customization (Object)	Obligatorio	Personalización del formulario

form (Object)
nameLabel	Opcional	Label del input del nombre
nameError	Opcional	Error a mostrar si el valor es incorrecto
lastNameLabel	Opcional	Label del input del apellido
lastNameError	Opcional	Error a mostrar si el valor es incorrecto
emailLabel	Opcional	Label del input del email
emailError	Opcional	Error a mostrar si el valor es incorrecto
phoneLabel	Opcional	Label del input del número telefónico
phoneError	Opcional	Error a mostrar si el valor es incorrecto
prefilledName	Opcional	Nombre del usuario si lo conocemos
prefilledLastName	Opcional	Apellido del usuario si lo conocemos
prefilledEmail	Opcional	Email del usuario si lo conocemos

customization (Object)
font	Opcional	Fuente de texto
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
errorColor	Opcional	Color del texto de error
borderColor	Opcional	Color del borde de los inputs
borderRadius	Opcional	Radio del borde de los inputs
padding	Opcional	Espaciado
inputTextSize	Opcional	Tamaño del texto del input
labelTextSize	Opcional	Tamaño del texto del label
iconSize	Opcional	Tamaño de los iconos
iconColor	Opcional	Color de los iconos

¿Cómo validar el formulario?

El formulario tiene su propia validación la cual comunica mediante el evento mach_valid.

window.addEventListener('message', event => {
    if (event.data.mach_valid === true) {
        console.log('El formulario es válido');
    }
    if (event.data.mach_valid === false) {
        console.log('El formulario contiene errores');
    }
});

¿Cómo hacer submit?

Enviar un evento pay con el valor mach.

button.addEventListener("click", () => window.postMessage({ pay: "mach" }));

Formulario de khipu

Para renderizar un formulario de khipu en un contenedor específico, llama a la función khipu.

await paylandsCheckout.khipu({
    container: '#renderContainer',
    form: { ... },
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el formulario
form (Object)	Obligatorio	Configuración del formulario
customization (Object)	Obligatorio	Personalización del formulario

form (Object)
nameLabel	Opcional	Label del input del nombre
nameError	Opcional	Error a mostrar si el valor es incorrecto
lastNameLabel	Opcional	Label del input del apellido
lastNameError	Opcional	Error a mostrar si el valor es incorrecto
emailLabel	Opcional	Label del input del email
emailError	Opcional	Error a mostrar si el valor es incorrecto
phoneLabel	Opcional	Label del input del número telefónico
phoneError	Opcional	Error a mostrar si el valor es incorrecto
prefilledName	Opcional	Nombre del usuario si lo conocemos
prefilledLastName	Opcional	Apellido del usuario si lo conocemos
prefilledEmail	Opcional	Email del usuario si lo conocemos

customization (Object)
font	Opcional	Fuente de texto
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
errorColor	Opcional	Color del texto de error
borderColor	Opcional	Color del borde de los inputs
borderRadius	Opcional	Radio del borde de los inputs
padding	Opcional	Espaciado
inputTextSize	Opcional	Tamaño del texto del input
labelTextSize	Opcional	Tamaño del texto del label
iconSize	Opcional	Tamaño de los iconos
iconColor	Opcional	Color de los iconos

¿Cómo validar el formulario?

El formulario tiene su propia validación la cual comunica mediante el evento khipu_valid.

window.addEventListener('message', event => {
    if (event.data.khipu_valid === true) {
        console.log('El formulario es válido');
    }
    if (event.data.khipu_valid === false) {
        console.log('El formulario contiene errores');
    }
});

¿Cómo hacer submit?

Enviar un evento pay con el valor khipu.

button.addEventListener("click", () => window.postMessage({ pay: "khipu" }));

Formulario de Klap

Para renderizar un formulario de Klap en un contenedor específico, llama a la función klap.

Nos permitirá renderizar un formulario de Klap en nuestra página.

await paylandsCheckout.klap({
    container: '#renderContainer',
    form: { ... },
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el formulario
form (Object)	Obligatorio	Configuración del formulario
customization (Object)	Obligatorio	Personalización del formulario

form (Object)
nameLabel	Opcional	Label del input del nombre
nameError	Opcional	Error a mostrar si el valor es incorrecto
lastNameLabel	Opcional	Label del input del apellido
lastNameError	Opcional	Error a mostrar si el valor es incorrecto
emailLabel	Opcional	Label del input del email
emailError	Opcional	Error a mostrar si el valor es incorrecto
phoneLabel	Opcional	Label del input del número telefónico
phoneError	Opcional	Error a mostrar si el valor es incorrecto
prefilledName	Opcional	Nombre del usuario si lo conocemos
prefilledLastName	Opcional	Apellido del usuario si lo conocemos
prefilledEmail	Opcional	Email del usuario si lo conocemos

customization (Object)
font	Opcional	Fuente de texto
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
errorColor	Opcional	Color del texto de error
borderColor	Opcional	Color del borde de los inputs
borderRadius	Opcional	Radio del borde de los inputs
padding	Opcional	Espaciado
inputTextSize	Opcional	Tamaño del texto del input
labelTextSize	Opcional	Tamaño del texto del label
iconSize	Opcional	Tamaño de los iconos
iconColor	Opcional	Color de los iconos

¿Cómo validar el formulario?

El formulario tiene su propia validación la cual comunica mediante el evento klap_valid.

window.addEventListener('message', event => {
    if (event.data.klap_valid === true) {
        console.log('El formulario es válido');
    }
    if (event.data.klap_valid === false) {
        console.log('El formulario contiene errores');
    }
});

¿Cómo hacer submit?

Enviar un evento pay con el valor klap.

button.addEventListener("click", () => window.postMessage({ pay: "klap" }));

Formulario de FlowPay

Para renderizar un formulario de FlowPay en un contenedor específico, llama a la función flowpay.

await paylandsCheckout.flowpay({
    container: '#renderContainer',
    form: { ... },
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el formulario
form (Object)	Obligatorio	Configuración del formulario
customization (Object)	Obligatorio	Personalización del formulario

form (Object)
nameLabel	Opcional	Label del input del nombre
nameError	Opcional	Error a mostrar si el valor es incorrecto
lastNameLabel	Opcional	Label del input del apellido
lastNameError	Opcional	Error a mostrar si el valor es incorrecto
emailLabel	Opcional	Label del input del email
emailError	Opcional	Error a mostrar si el valor es incorrecto
phoneLabel	Opcional	Label del input del número telefónico
phoneError	Opcional	Error a mostrar si el valor es incorrecto
prefilledName	Opcional	Nombre del usuario si lo conocemos
prefilledLastName	Opcional	Apellido del usuario si lo conocemos
prefilledEmail	Opcional	Email del usuario si lo conocemos

customization (Object)
font	Opcional	Fuente de texto
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
errorColor	Opcional	Color del texto de error
borderColor	Opcional	Color del borde de los inputs
borderRadius	Opcional	Radio del borde de los inputs
padding	Opcional	Espaciado
inputTextSize	Opcional	Tamaño del texto del input
labelTextSize	Opcional	Tamaño del texto del label
iconSize	Opcional	Tamaño de los iconos
iconColor	Opcional	Color de los iconos

¿Cómo validar el formulario?

El formulario tiene su propia validación la cual comunica mediante el evento flowpay_valid.

window.addEventListener('message', event => {
    if (event.data.flowpay_valid === true) {
        console.log('El formulario es válido');
    }
    if (event.data.flowpay_valid === false) {
        console.log('El formulario contiene errores');
    }
});

¿Cómo hacer submit?

Enviar un evento pay con el valor flowpay.

button.addEventListener("click", () => window.postMessage({ pay: "flowpay" }));

Formulario de Pago Fácil

Para renderizar un formulario de Pago Fácil en un contenedor específico, llama a la función pagofacil.

await paylandsCheckout.pago_facil({
    container: '#renderContainer',
    form: { ... },
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el formulario
form (Object)	Obligatorio	Configuración del formulario
customization (Object)	Obligatorio	Personalización del formulario

form (Object)
nameLabel	Opcional	Label del input del nombre
nameError	Opcional	Error a mostrar si el valor es incorrecto
lastNameLabel	Opcional	Label del input del apellido
lastNameError	Opcional	Error a mostrar si el valor es incorrecto
emailLabel	Opcional	Label del input del email
emailError	Opcional	Error a mostrar si el valor es incorrecto
addressLabel	Opcional	Label del input de la dirección
addressError	Opcional	Error a mostrar si el valor es incorrecto
zipCodeLabel	Opcional	Label del input del código postal
zipCodeError	Opcional	Error a mostrar si el valor es incorrecto
cityLabel	Opcional	Label del input de la ciudad
cityError	Opcional	Error a mostrar si el valor es incorrecto
countryLabel	Opcional	Label del input del país
countryError	Opcional	Error a mostrar si el valor es incorrecto
prefilledName	Opcional	Nombre del usuario si lo conocemos
prefilledLastName	Opcional	Apellido del usuario si lo conocemos
prefilledEmail	Opcional	Email del usuario si lo conocemos
prefilledAddress	Opcional	Dirección del usuario si la conocemos
prefilledZipCode	Opcional	Código postal del usuario si lo conocemos
prefilledCity	Opcional	Ciudad del usuario si la conocemos
prefilledCountry	Opcional	País del usuario si lo conocemos

customization (Object)
font	Opcional	Fuente de texto
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
errorColor	Opcional	Color del texto de error
borderColor	Opcional	Color del borde de los inputs
borderRadius	Opcional	Radio del borde de los inputs
padding	Opcional	Espaciado
inputTextSize	Opcional	Tamaño del texto del input
labelTextSize	Opcional	Tamaño del texto del label
iconSize	Opcional	Tamaño de los iconos
iconColor	Opcional	Color de los iconos

¿Cómo validar el formulario?

El formulario tiene su propia validación la cual comunica mediante el evento pago_facil_valid.

window.addEventListener('message', event => {
    if (event.data.pago_facil_valid === true) {
        console.log('El formulario es válido');
    }
    if (event.data.pago_facil_valid === false) {
        console.log('El formulario contiene errores');
    }
});

¿Cómo hacer submit?

Enviar un evento pay con el valor pago_facil.

button.addEventListener("click", () => window.postMessage({ pay: "pago_facil" }));

Formulario de Efecty

Para renderizar un formulario de Efecty en un contenedor específico, llama a la función efecty.

await paylandsCheckout.efecty({
    container: '#renderContainer',
    form: { ... },
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el formulario
form (Object)	Obligatorio	Configuración del formulario
customization (Object)	Obligatorio	Personalización del formulario

form (Object)
nameLabel	Opcional	Label del input del nombre
nameError	Opcional	Error a mostrar si el valor es incorrecto
lastNameLabel	Opcional	Label del input del apellido
lastNameError	Opcional	Error a mostrar si el valor es incorrecto
emailLabel	Opcional	Label del input del email
emailError	Opcional	Error a mostrar si el valor es incorrecto
addressLabel	Opcional	Label del input de la dirección
addressError	Opcional	Error a mostrar si el valor es incorrecto
zipCodeLabel	Opcional	Label del input del código postal
zipCodeError	Opcional	Error a mostrar si el valor es incorrecto
cityLabel	Opcional	Label del input de la ciudad
cityError	Opcional	Error a mostrar si el valor es incorrecto
countryLabel	Opcional	Label del input del país
countryError	Opcional	Error a mostrar si el valor es incorrecto
prefilledName	Opcional	Nombre del usuario si lo conocemos
prefilledLastName	Opcional	Apellido del usuario si lo conocemos
prefilledEmail	Opcional	Email del usuario si lo conocemos
prefilledAddress	Opcional	Dirección del usuario si la conocemos
prefilledZipCode	Opcional	Código postal del usuario si lo conocemos
prefilledCity	Opcional	Ciudad del usuario si la conocemos
prefilledCountry	Opcional	País del usuario si lo conocemos

customization (Object)
font	Opcional	Fuente de texto
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
errorColor	Opcional	Color del texto de error
borderColor	Opcional	Color del borde de los inputs
borderRadius	Opcional	Radio del borde de los inputs
padding	Opcional	Espaciado
inputTextSize	Opcional	Tamaño del texto del input
labelTextSize	Opcional	Tamaño del texto del label
iconSize	Opcional	Tamaño de los iconos
iconColor	Opcional	Color de los iconos

¿Cómo validar el formulario?

El formulario tiene su propia validación la cual comunica mediante el evento efecty_valid.

window.addEventListener('message', event => {
    if (event.data.efecty_valid === true) {
        console.log('El formulario es válido');
    }
    if (event.data.efecty_valid === false) {
        console.log('El formulario contiene errores');
    }
});

¿Cómo hacer submit?

Enviar un evento pay con el valor efecty.

button.addEventListener("click", () => window.postMessage({ pay: "efecty" }));

Formulario de Loterica

Para renderizar un formulario de Loterica en un contenedor específico, llama a la función loterica.

await paylandsCheckout.loterica({
    container: '#renderContainer',
    form: { ... },
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el formulario
form (Object)	Obligatorio	Configuración del formulario
customization (Object)	Obligatorio	Personalización del formulario

form (Object)
nameLabel	Opcional	Label del input del nombre
nameError	Opcional	Error a mostrar si el valor es incorrecto
lastNameLabel	Opcional	Label del input del apellido
lastNameError	Opcional	Error a mostrar si el valor es incorrecto
emailLabel	Opcional	Label del input del email
emailError	Opcional	Error a mostrar si el valor es incorrecto
prefilledName	Opcional	Nombre del usuario si lo conocemos
prefilledLastName	Opcional	Apellido del usuario si lo conocemos
prefilledEmail	Opcional	Email del usuario si lo conocemos
prefilledDocumentIdentificationNumber	Opcional	Numero de identificación personal si lo conocemos
documentIdentificationNumberLabel	Opcional	Label del input de número de identificación personal
documentIdentificationNumberError	Opcional	Error a mostrar si el valor es incorrecto
prefilledPrefix	Opcional	Prefijo del usuario si lo conocemos
prefilledPhone	Opcional	Número del usuario si lo conocemos
prefixLabel	Opcional	Label del input del prefijo telefónico
prefixError	Opcional	Error a mostrar si el valor es incorrecto
phoneLabel	Opcional	Label del input del número telefónico
phoneError	Opcional	Error a mostrar si el valor es incorrecto

customization (Object)
font	Opcional	Fuente de texto
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
errorColor	Opcional	Color del texto de error
borderColor	Opcional	Color del borde de los inputs
borderRadius	Opcional	Radio del borde de los inputs
padding	Opcional	Espaciado
inputTextSize	Opcional	Tamaño del texto del input
labelTextSize	Opcional	Tamaño del texto del label
iconSize	Opcional	Tamaño de los iconos
iconColor	Opcional	Color de los iconos

¿Cómo validar el formulario?

El formulario tiene su propia validación la cual comunica mediante el evento loterica_valid.

window.addEventListener('message', event => {
    if (event.data.loterica_valid === true) {
        console.log('El formulario es válido');
    }
    if (event.data.loterica_valid === false) {
        console.log('El formulario contiene errores');
    }
});

¿Cómo hacer submit?

Enviar un evento pay con el valor loterica.

button.addEventListener("click", () => window.postMessage({ pay: "loterica" }));

Formulario de Boleto

Para renderizar un formulario de Boleto en un contenedor específico, llama a la función boleto.

await paylandsCheckout.boleto({
    container: '#renderContainer',
    form: { ... },
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el formulario
form (Object)	Obligatorio	Configuración del formulario
customization (Object)	Obligatorio	Personalización del formulario

form (Object)
nameLabel	Opcional	Label del input del nombre
nameError	Opcional	Error a mostrar si el valor es incorrecto
lastNameLabel	Opcional	Label del input del apellido
lastNameError	Opcional	Error a mostrar si el valor es incorrecto
emailLabel	Opcional	Label del input del email
emailError	Opcional	Error a mostrar si el valor es incorrecto
prefilledName	Opcional	Nombre del usuario si lo conocemos
prefilledLastName	Opcional	Apellido del usuario si lo conocemos
prefilledEmail	Opcional	Email del usuario si lo conocemos
prefilledDocumentIdentificationNumber	Opcional	Numero de identificación personal si lo conocemos
documentIdentificationNumberLabel	Opcional	Label del input de número de identificación personal
documentIdentificationNumberError	Opcional	Error a mostrar si el valor es incorrecto
prefilledZipCode	Opcional	Código postal del usuario si lo conocemos
prefilledCity	Opcional	Ciudad del usuario si la conocemos
zipCodeLabel	Opcional	Label del input del código postal
zipCodeError	Opcional	Error a mostrar si el valor es incorrecto
cityLabel	Opcional	Label del input de la ciudad
cityError	Opcional	Error a mostrar si el valor es incorrecto

customization (Object)
font	Opcional	Fuente de texto
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
errorColor	Opcional	Color del texto de error
borderColor	Opcional	Color del borde de los inputs
borderRadius	Opcional	Radio del borde de los inputs
padding	Opcional	Espaciado
inputTextSize	Opcional	Tamaño del texto del input
labelTextSize	Opcional	Tamaño del texto del label
iconSize	Opcional	Tamaño de los iconos
iconColor	Opcional	Color de los iconos

¿Cómo validar el formulario?

El formulario tiene su propia validación la cual comunica mediante el evento boleto_valid.

window.addEventListener('message', event => {
    if (event.data.boleto_valid === true) {
        console.log('El formulario es válido');
    }
    if (event.data.boleto_valid === false) {
        console.log('El formulario contiene errores');
    }
});

¿Cómo hacer submit?

Enviar un evento pay con el valor boleto.

button.addEventListener("click", () => window.postMessage({ pay: "boleto" }));

Formulario de Servipag

Para renderizar un formulario de Servipag en un contenedor específico, llama a la función servipag.

await paylandsCheckout.servipag({
    container: '#renderContainer',
    form: { ... },
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el formulario
form (Object)	Obligatorio	Configuración del formulario
customization (Object)	Obligatorio	Personalización del formulario

form (Object)
nameLabel	Opcional	Label del input del nombre
nameError	Opcional	Error a mostrar si el valor es incorrecto
lastNameLabel	Opcional	Label del input del apellido
lastNameError	Opcional	Error a mostrar si el valor es incorrecto
emailLabel	Opcional	Label del input del email
emailError	Opcional	Error a mostrar si el valor es incorrecto
prefilledName	Opcional	Nombre del usuario si lo conocemos
prefilledLastName	Opcional	Apellido del usuario si lo conocemos
prefilledEmail	Opcional	Email del usuario si lo conocemos

customization (Object)
font	Opcional	Fuente de texto
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
errorColor	Opcional	Color del texto de error
borderColor	Opcional	Color del borde de los inputs
borderRadius	Opcional	Radio del borde de los inputs
padding	Opcional	Espaciado
inputTextSize	Opcional	Tamaño del texto del input
labelTextSize	Opcional	Tamaño del texto del label
iconSize	Opcional	Tamaño de los iconos
iconColor	Opcional	Color de los iconos

¿Cómo validar el formulario?

El formulario tiene su propia validación la cual comunica mediante el evento servipag_valid.

window.addEventListener('message', event => {
    if (event.data.servipag_valid === true) {
        console.log('El formulario es válido');
    }
    if (event.data.servipag_valid === false) {
        console.log('El formulario contiene errores');
    }
});

¿Cómo hacer submit?

Enviar un evento pay con el valor servipag.

button.addEventListener("click", () => window.postMessage({ pay: "servipag" }));

Formulario de Webpay

Para renderizar un formulario de Webpay en un contenedor específico, llama a la función webpay.

await paylandsCheckout.webpay({
    container: '#renderContainer',
    form: { ... },
    customization: { ... }
});

Request
container	Obligatorio	ID del contenedor en el que se renderizará el formulario
form (Object)	Obligatorio	Configuración del formulario
customization (Object)	Obligatorio	Personalización del formulario

form (Object)
nameLabel	Opcional	Label del input del nombre
nameError	Opcional	Error a mostrar si el valor es incorrecto
lastNameLabel	Opcional	Label del input del apellido
lastNameError	Opcional	Error a mostrar si el valor es incorrecto
emailLabel	Opcional	Label del input del email
emailError	Opcional	Error a mostrar si el valor es incorrecto
addressLabel	Opcional	Label del input de la dirección
addressError	Opcional	Error a mostrar si el valor es incorrecto
zipCodeLabel	Opcional	Label del input del código postal
zipCodeError	Opcional	Error a mostrar si el valor es incorrecto
cityLabel	Opcional	Label del input de la ciudad
cityError	Opcional	Error a mostrar si el valor es incorrecto
countryLabel	Opcional	Label del input del país
countryError	Opcional	Error a mostrar si el valor es incorrecto
prefilledName	Opcional	Nombre del usuario si lo conocemos
prefilledLastName	Opcional	Apellido del usuario si lo conocemos
prefilledEmail	Opcional	Email del usuario si lo conocemos
prefilledAddress	Opcional	Dirección del usuario si la conocemos
prefilledZipCode	Opcional	Código postal del usuario si lo conocemos
prefilledCity	Opcional	Ciudad del usuario si la conocemos
prefilledCountry	Opcional	País del usuario si lo conocemos

customization (Object)
font	Opcional	Fuente de texto
textColor	Opcional	Color del texto
backgroundColor	Opcional	Color del fondo
errorColor	Opcional	Color del texto de error
borderColor	Opcional	Color del borde de los inputs
borderRadius	Opcional	Radio del borde de los inputs
padding	Opcional	Espaciado
inputTextSize	Opcional	Tamaño del texto del input
labelTextSize	Opcional	Tamaño del texto del label
iconSize	Opcional	Tamaño de los iconos
iconColor	Opcional	Color de los iconos

¿Cómo validar el formulario?

El formulario tiene su propia validación la cual comunica mediante el evento webpay_valid.

window.addEventListener('message', event => {
    if (event.data.webpay_valid === true) {
        console.log('El formulario es válido');
    }
    if (event.data.webpay_valid === false) {
        console.log('El formulario contiene errores');
    }
});

¿Cómo hacer submit?

Enviar un evento pay con el valor webpay.

button.addEventListener("click", () => window.postMessage({ pay: "webpay" }));

3. El cliente completa el pago

Una vez el usuario finalice el pago, se enviará un evento sobre la propia página con alguno de los siguientes valores que deberá ser tratado por el comercio:

Response
redirect	URL hacia la que redirigir al usuario con el resultado del pago OK/KO
render	Contenido HTML para renderizar en la página. Esto sucede porque se requiere la intervención del usuario de nuevo, generalmente para completar el 3DS
error	Contenido HTML con el error ocurrido.

window.addEventListener('message', event => {
    if (event.data.redirect) {
        window.location.href = event.data.redirect;
    }
    if (event.data.render) {
        document.getElementById('renderContainer').innerHTML = event.data.render;
    }
    if (event.data.error) {
        document.getElementById('renderContainer').innerHTML = event.data.error;
    }

Nota: Esto no será necesario si se ha utilizado la función redirect o render del SDK. En este caso, el SDK se encargará de redirigir al cliente a la URL de redirección correspondiente según el resultado de la operación:
Si se ha efectuado el pago correctamente se redirige a la url especificada en el campo url_ok de la orden.
En cualquier otro caso se redirige a la url especificada en el campo url_ko de la orden.

Integración mediante SDK en JavaScript Vanilla

1. Incluir el SDK en tu web​

2. Funciones del SDK​

Redirección​

Renderizado​

Formulario de tarjeta​

Botón de Google Pay​

Botón de Apple Pay​

Botón de PayPal​

Botón para pagos con criptomoneda​

Botón de Pix​

Botón de Floa​

Botón de PSE​

Botón de Spei​

Botón de Multibanco​

Botón de transferencia bancaria​

Botón de PicPay​

Botón de paysafecard​

Formulario de Bizum​

Formulario de Cofidis​

Formulario de Giropay​

Formulario de ideal​

Formulario de Klarna​

Formulario de MBWay​

Formulario de Sofort​

Formulario de Viacash​

Formulario de Mach​

Formulario de khipu​

Formulario de Klap​

Formulario de FlowPay​

Formulario de Pago Fácil​

Formulario de Efecty​

Formulario de Loterica​

Formulario de Boleto​

Formulario de Servipag​

Formulario de Webpay​

3. El cliente completa el pago​

1. Incluir el SDK en tu web

2. Funciones del SDK

Redirección

Renderizado

Formulario de tarjeta

Botón de Google Pay

Botón de Apple Pay

Botón de PayPal

Botón para pagos con criptomoneda

Botón de Pix

Botón de Floa

Botón de PSE

Botón de Spei

Botón de Multibanco

Botón de transferencia bancaria

Botón de PicPay

Botón de paysafecard

Formulario de Bizum

Formulario de Cofidis

Formulario de Giropay

Formulario de ideal

Formulario de Klarna

Formulario de MBWay

Formulario de Sofort

Formulario de Viacash

Formulario de Mach

Formulario de khipu

Formulario de Klap

Formulario de FlowPay

Formulario de Pago Fácil

Formulario de Efecty

Formulario de Loterica

Formulario de Boleto

Formulario de Servipag

Formulario de Webpay

3. El cliente completa el pago