Checkout

El checkout es una pantalla que permite al usuario elegir el método de pago por el que se procesará la operación. En Paylands ofrecemos la posibilidad de personalizar los checkouts para ofrecer más diversidad al cliente.

Tenemos acceso a la configuración de los checkout desde el Backend de Paylands → Administrar → Checkout. Para crear uno simplemente habrá que darle al botón verde situado en la esquina superior derecha de la sección, donde se nos pedirá introducir una descripción para dicho checkout. Acto seguido el checkout estará creado con la configuración por defecto.

Una vez tengamos creado algún checkout podremos acceder tanto a la sección de añadir pagos alternativos (pulsando el botón correspondiente para configurar cada checkout), como a la sección de personalización (pulsando el botón correspondiente de personalización de cada checkout).

En la sección de añadir pagos alternativos deberemos escoger cuales deberán mostrarse en el checkout. Tras seleccionar un pago alternativo, deberemos indicar el servicio de pago que se encargará de procesar los cobros cuando el usuario seleccione dicho pago alternativo.

Para personalizar la visualización de nuestro checkout, deberemos entrar en la sección de personalización y configurar las características que necesitemos.

Nada más tengamos esto, podremos proceder a realizar pagos con el checkout mediante redirección o a través del SDK.

SDK

Para poder utilizar el SDK será necesario previamente haber generado una orden en Paylands. Esta orden deberá contener el uuid del checkout creado previamente. Ejemplo:

"extra_data": {
    "checkout": {"uuid": <UUID de tu checkout>}
}

En nuestra página, cargaremos el script del checkout

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

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

Y a continuación inicializaremos el SDK

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

Request
token	Obligatorio	Token de la orden generada previamente
language	Opcional Por defecto: "es"	Idioma del checkout
environment	Opcional Valores: "PRODUCTION", "SANDBOX" Por defecto: "PRODUCTION"	Entorno
mode	Opcional Valores: "PRODUCTION", "DEMO", "DEV" Por defecto: "PRODUCTION"	Modo

Esto nos dará acceso a todas las funciones del SDK.

Redirección

Redirigirá al usuario al checkout creado y personalizado anteriormente.

await paylandsCheckout.redirect();

Renderizado

Nos permitirá renderizar el checkout creado y personalizado en nuestra propia página.

await paylandsCheckout.render('renderContainer');

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

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.

Formulario de tarjeta

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

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

Request
container	Obligatorio	ID del contenedor sobre 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 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

¿Como 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');
    }
});

¿Como hacer submit? Enviar un evento pay con el valor card.

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

Este evento será capturado por el SDK para procesar el pago. Una vez procesado, enviará un nuevo 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.

Google Pay

Nos permitirá renderizar un botón de Google Pay. Es necesario haberlo configurado previamente.

await paylandsCheckout.google_pay('renderContainer');

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

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.

Apple Pay

Nos permitirá renderizar un botón de Apple Pay. Es necesario haberlo configurado previamente. Ten en cuenta que Apple Pay solo es compatible con dispositivos Apple y Safari. En cualquier otro caso, no se mostrará el botón.

await paylandsCheckout.apple_pay('renderContainer');

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

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.

PayPal

Nos permitirá renderizar un botón de PayPal. Es necesario haberlo configurado previamente.

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

Request
container	Obligatorio	ID del contenedor sobre el que se renderizará el botón
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

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.

Crypto

Nos permitirá renderizar un botón de Crypto.

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

Request
container	Obligatorio	ID del contenedor sobre 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

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.

Pix

Nos permitirá renderizar un botón de Pix.

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

Request
container	Obligatorio	ID del contenedor sobre 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

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.

Floa

Nos permitirá renderizar un botón de Floa.

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

Request
container	Obligatorio	ID del contenedor sobre 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

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.

Pse

Nos permitirá renderizar un botón de Pse.

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

Request
container	Obligatorio	ID del contenedor sobre 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

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.

Spei

Nos permitirá renderizar un botón de Spei.

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

Request
container	Obligatorio	ID del contenedor sobre 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

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.

Bizum

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

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

Request
container	Obligatorio	ID del contenedor sobre 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

¿Como 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');
    }
});

¿Como hacer submit? Enviar un evento pay con el valor bizum.

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

Este evento será capturado por el SDK para procesar el pago. Una vez procesado, enviará un nuevo 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.

Cofidis

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

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

Request
container	Obligatorio	ID del contenedor sobre 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

¿Como 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');
    }
});

¿Como hacer submit? Enviar un evento pay con el valor cofidis.

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

Este evento será capturado por el SDK para procesar el pago. Una vez procesado, enviará un nuevo 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.

Giropay

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

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

Request
container	Obligatorio	ID del contenedor sobre 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
stateLabel	Opcional	Label del input del estado
stateError	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
prefilledState	Opcional	Estado del usuario si lo conocemos (solo para USA)

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

¿Como 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');
    }
});

¿Como hacer submit? Enviar un evento pay con el valor giropay.

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

Este evento será capturado por el SDK para procesar el pago. Una vez procesado, enviará un nuevo 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.

Ideal

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

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

Request
container	Obligatorio	ID del contenedor sobre 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
stateLabel	Opcional	Label del input del estado
stateError	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
prefilledState	Opcional	Estado del usuario si lo conocemos (solo para USA)

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

¿Como 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');
    }
});

¿Como hacer submit? Enviar un evento pay con el valor ideal.

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

Este evento será capturado por el SDK para procesar el pago. Una vez procesado, enviará un nuevo 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.

Klarna

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

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

Request
container	Obligatorio	ID del contenedor sobre 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
stateLabel	Opcional	Label del input del estado
stateError	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
prefilledState	Opcional	Estado del usuario si lo conocemos (solo para USA)

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

¿Como 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');
    }
});

¿Como hacer submit? Enviar un evento pay con el valor klarna.

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

Este evento será capturado por el SDK para procesar el pago. Una vez procesado, enviará un nuevo 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.

MBWay

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

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

Request
container	Obligatorio	ID del contenedor sobre 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

¿Como 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');
    }
});

¿Como hacer submit? Enviar un evento pay con el valor mbway.

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

Este evento será capturado por el SDK para procesar el pago. Una vez procesado, enviará un nuevo 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.

Multibanco

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

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

Request
container	Obligatorio	ID del contenedor sobre 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

¿Como validar el formulario? El formulario tiene su propia validación la cual comunica mediante el evento multibanco_valid.

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

¿Como hacer submit? Enviar un evento pay con el valor multibanco.

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

Este evento será capturado por el SDK para procesar el pago. Una vez procesado, enviará un nuevo 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.

Sofort

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

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

Request
container	Obligatorio	ID del contenedor sobre 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
stateLabel	Opcional	Label del input del estado
stateError	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
prefilledState	Opcional	Estado del usuario si lo conocemos (solo para USA)

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

¿Como 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');
    }
});

¿Como hacer submit? Enviar un evento pay con el valor sofort.

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

Este evento será capturado por el SDK para procesar el pago. Una vez procesado, enviará un nuevo 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.

Transferencia bancaria

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

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

Request
container	Obligatorio	ID del contenedor sobre 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

¿Como validar el formulario? El formulario tiene su propia validación la cual comunica mediante el evento transfer_valid.

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

¿Como hacer submit? Enviar un evento pay con el valor transfer.

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

Este evento será capturado por el SDK para procesar el pago. Una vez procesado, enviará un nuevo 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.

Viacash

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

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

Request
container	Obligatorio	ID del contenedor sobre 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

¿Como 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');
    }
});

¿Como hacer submit? Enviar un evento pay con el valor viacash.

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

Este evento será capturado por el SDK para procesar el pago. Una vez procesado, enviará un nuevo 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.