Integration through Vanilla JavaScript SDK

Through our client-side vanilla JavaScript SDK, you can easily and securely integrate Paylands checkout into your website.

This library is responsible for rendering the user interface and handling the necessary communication with the Paylands platform to execute any type of transaction smoothly.

In order to use the SDK it will be necessary to have previously generated a server-side order in Paylands. This order must contain the uuid of the previously created checkout. For more information on how to generate an order with checkout, see section Integration via API.

1. Include the SDK on your website

Load the client-side script:

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

And initialize the SDK providing the token obtained in the payment order generation:

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

This will return an instance of PaylandsCheckout that can be used to interact with the SDK.

2. SDK Functions

Redirect

To redirect the user to the checkout, simply call the redirect function.

await paylandsCheckout.redirect();

Rendering

To render the checkout in a specific container, call the render function.

await paylandsCheckout.render('renderContainer');

Request
container	Required	ID of the container the checkout will be rendered on

Card form

To render a customizable card form in a specific container, call the card function.

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

Request
container	Required	ID of the container the form will be rendered on
form (Object)	Required	Configuration Form
customization (Object)	Required	Customization Form

form (Object)
holderLabel	Optional	Input label for card holder
holderError	Optional	Error to show if value is incorrect
panLabel	Optional	Input label for card Pan
panError	Optional	Error to show if value is incorrect
expiryLabel	Optional	Input label for expiration date card
expiryError	Optional	Error to show if value is incorrect
cvvLabel	Optional	Input label for CVV card
cvvError	Optional	Error to show if value is incorrect

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Inputs color border
borderRadius	Optional	Inputs radius border
padding	Optional	Padding
inputTextSize	Optional	Input text size
labelTextSize	Optional	Label text size
iconSize	Optional	Icon size
iconColor	Optional	Icon color

How to validate the form?

The form has its own validation, the result of which will be sent to the main website in the card_valid event.

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

How to submit?

Send a pay event with the value card.

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

Google Pay button

To render a Google Pay button in a specific container, call the google_pay function. The merchant needs to have Google Pay enabled in their Paylands account. For more information, see the Google Pay section.

await paylandsCheckout.google_pay('renderContainer');

Request
container	Required	ID of the container on which the Google Pay button will be rendered

Apple Pay button

To render an Apple Pay button in a specific container, call the apple_pay function. The merchant needs to have Apple Pay enabled in their Paylands account. For more information, see the Apple Pay section.

await paylandsCheckout.apple_pay('renderContainer');

Request
container	Required	ID of the container on which the Apple Pay button will be rendered

PayPal button

To render a PayPal button in a specific container, call the payPal function. It is necessary that the merchant has PayPal enabled in his Paylands account.

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

Request
container	Required	ID of the container on which the PayPal button will be rendered
form (Object)	Required	Button configuration
customization (Object)	Required	Button customization

form (Object)
prefilledAddress	Optional	User address
prefilledCountry	Optional	User country

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

Crypto button

To render a Crypto button in a specific container, call the crypto function.

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

Request
container	Required	ID of the container on which the Crypto button will be rendered
customization (Object)	Required	Customization button

customization (Object)
buttonText	Optional	Button text
font	Optional	Text font
primaryColor	Optional	Button color
textColor	Optional	Text color
backgroundColor	Optional	Background color
borderRadius	Optional	Border radius color
padding	Optional	Padding
buttonTextSize	Optional	Button text size

Pix button

To render a Pix button in a specific container, call the pix function.

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

Request
container	Required	ID of the container on which the Pix button will be rendered
customization (Object)	Required	Button customization

customization (Object)
buttonText	Optional	Button text
font	Optional	Text font
primaryColor	Optional	Button color
textColor	Optional	Text color
backgroundColor	Optional	Background color
borderRadius	Optional	Border radius color
padding	Optional	Padding
buttonTextSize	Optional	Button text size

Floa button

To render a Floa button in a specific container, call the floa function.

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

Request
container	Required	ID of the container on which the Floa button will be rendered
customization (Object)	Required	Button customization

customization (Object)
buttonText	Optional	Button text
font	Optional	Text font
primaryColor	Optional	Button color
textColor	Optional	Text color
backgroundColor	Optional	Background color
borderRadius	Optional	Border radius color
padding	Optional	Padding
buttonTextSize	Optional	Button text size

PSE button

To render a PSE button in a specific container, call the pse function.

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

Request
container	Required	ID of the container on which the PSE button will be rendered
customization (Object)	Required	Button customization

customization (Object)
buttonText	Optional	Button text
font	Optional	Text font
primaryColor	Optional	Button color
textColor	Optional	Text color
backgroundColor	Optional	Background color
borderRadius	Optional	Border radius color
padding	Optional	Padding
buttonTextSize	Optional	Button text size

Spei button

To render a Spei button in a specific container, call the spei function.

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

Request
container	Required	ID of the container on which the Spei button will be rendered
customization (Object)	Required	Button customization

customization (Object)
buttonText	Optional	Button text
font	Optional	Text font
primaryColor	Optional	Button color
textColor	Optional	Text color
backgroundColor	Optional	Background color
borderRadius	Optional	Border radius color
padding	Optional	Padding
buttonTextSize	Optional	Button text size

Multibanco button

To render a Multibanco button in a specific container, call the multibanco function.

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

Request
container	Required	ID of the container on which the Multibanco button will be rendered
customization (Object)	Required	Button customization

customization (Object)
buttonText	Optional	Button text
font	Optional	Text font
primaryColor	Optional	Button color
textColor	Optional	Text color
backgroundColor	Optional	Background color
borderRadius	Optional	Border radius color
padding	Optional	Padding
buttonTextSize	Optional	Button text size

Bank transfer button

To render a Transfer button in a specific container, call the transfer function.

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

Request
container	Required	ID of the container on which the Transfer button will be rendered
customization (Object)	Required	Button customization

customization (Object)
buttonText	Optional	Button text
font	Optional	Text font
primaryColor	Optional	Button color
textColor	Optional	Text color
backgroundColor	Optional	Background color
borderRadius	Optional	Border radius color
padding	Optional	Padding
buttonTextSize	Optional	Button text size

PicPay button

To render a PicPay button in a specific container, call the picpay function.

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

Request
container	Required	ID of the container on which the PicPay button will be rendered
customization (Object)	Required	Button customization

customization (Object)
buttonText	Optional	Button text
font	Optional	Text font
primaryColor	Optional	Button color
textColor	Optional	Text color
backgroundColor	Optional	Background color
borderRadius	Optional	Border radius color
padding	Optional	Padding
buttonTextSize	Optional	Button text size

Paysafecard button

To render a Paysafecard button in a specific container, call the paysafecard function.

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

Request
container	Required	ID of the container on which the Paysafecard button will be rendered
customization (Object)	Required	Button customization

customization (Object)
buttonText	Optional	Button text
font	Optional	Text font
primaryColor	Optional	Button color
textColor	Optional	Text color
backgroundColor	Optional	Background color
borderRadius	Optional	Border radius color
padding	Optional	Padding
buttonTextSize	Optional	Button text size

Bizum form

To render a Bizum button in a specific container, call the bizum function.

Request
container	Required	ID of the container on which the Bizum button will be rendered
form (Object)	Required	Button configuration
customization (Object)	Required	Button customization

form (Object)
prefixLabel	Optional	Input for user prefix of phone number
prefixError	Optional	Error to show if value is incorrect
phoneLabel	Optional	Input for user phone number
phoneError	Optional	Error to show if value is incorrect
prefilledPrefix	Optional	Input for user prefix
prefilledPhone	Optional	Error to show if value is incorrect

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Inputs color border
borderRadius	Optional	Inputs radius border
padding	Optional	Padding
inputTextSize	Optional	Input text size
labelTextSize	Optional	Label text size
iconSize	Optional	Icon size
iconColor	Optional	Icon color

How to validate the form?

The form has its own validation which it communicates through the bizum_valid event.

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

How to submit?

Send a pay event with the bizum value.

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

Cofidis form

To render a Cofidis form in a specific container, call the cofidis function.

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

Request
container	Required	ID of the container on which the Cofidis button will be rendered
form (Object)	Required	Button configuration
customization (Object)	Required	Button customization

form (Object)
nameLabel	Optional	Input label user name
nameError	Optional	Error to show if value is incorrect
lastNameLabel	Optional	Input label user last name
lastNameError	Optional	Error to show if value is incorrect
emailLabel	Optional	Input label user email
emailError	Optional	Error to show if value is incorrect
prefilledName	Optional	User name
prefilledLastName	Optional	User last name
prefilledEmail	Optional	User email

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Inputs color border
borderRadius	Optional	Inputs radius border
padding	Optional	Padding
inputTextSize	Optional	Input text size
labelTextSize	Optional	Label text size
iconSize	Optional	Icon size
iconColor	Optional	Icon color

How to validate the form?

The form has its own validation which it communicates through the cofidis_valid event.

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

**How to submit?

Send a pay event with the value cofidis.

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

Giropay form

To render a Giropay form in a specific container, call the giropay function.

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

Request
container	Required	ID of the container on which the Giropay button will be rendered
form (Object)	Required	Button configuration
customization (Object)	Required	Button customization

form (Object)
nameLabel	Optional	Name input label
nameError	Optional	Error to show if value is incorrect
lastNameLabel	Optional	Last name input label
lastNameError	Optional	Error to show if value is incorrect
emailLabel	Optional	Email input label
emailError	Optional	Error to show if value is incorrect
addressLabel	Optional	Address input label
addressError	Optional	Error to show if value is incorrect
zipCodeLabel	Optional	Zip code input label
zipCodeError	Optional	Error to show if value is incorrect
cityLabel	Optional	City input label
cityError	Optional	Error to show if value is incorrect
countryLabel	Optional	Country input label
countryError	Optional	Error to show if value is incorrect
prefilledName	Optional	User name
prefilledLastName	Optional	User last name
prefilledEmail	Optional	User email
prefilledAddress	Optional	User address
prefilledZipCode	Optional	User zip code
prefilledCity	Optional	User city
prefilledCountry	Optional	User country

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Inputs color border
borderRadius	Optional	Inputs radius border
padding	Optional	Padding
inputTextSize	Optional	Input text size
labelTextSize	Optional	Label text size
iconSize	Optional	Icon size
iconColor	Optional	Icon color

How to validate the form?

The form has its own validation which it communicates through the giropay_valid event.

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

**How to submit?

Send a pay event with the giropay value.

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

Ideal form

To render a Ideal form in a specific container, call the ideal function.

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

Request
container	Required	ID of the container on which the Ideal button will be rendered
form (Object)	Required	Button configuration
customization (Object)	Required	Button customization

form (Object)
nameLabel	Optional	Name input label
nameError	Optional	Error to show if value is incorrect
lastNameLabel	Optional	Last name input label
lastNameError	Optional	Error to show if value is incorrect
emailLabel	Optional	Email input label
emailError	Optional	Error to show if value is incorrect
addressLabel	Optional	Address input label
addressError	Optional	Error to show if value is incorrect
zipCodeLabel	Optional	Zip code input label
zipCodeError	Optional	Error to show if value is incorrect
cityLabel	Optional	City input label
cityError	Optional	Error to show if value is incorrect
countryLabel	Optional	Country input label
countryError	Optional	Error to show if value is incorrect
prefilledName	Optional	User name
prefilledLastName	Optional	User last name
prefilledEmail	Optional	User email
prefilledAddress	Optional	User address
prefilledZipCode	Optional	User zip code
prefilledCity	Optional	User city
prefilledCountry	Optional	User country

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Inputs color border
borderRadius	Optional	Inputs radius border
padding	Optional	Padding
inputTextSize	Optional	Input text size
labelTextSize	Optional	Label text size
iconSize	Optional	Icon size
iconColor	Optional	Icon color

How to validate the form?

The form has its own validation which it communicates through the ideal_valid event.

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

**How to submit?

Send a pay event with the ideal value.

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

Klarna form

To render a Klarna form in a specific container, call the klarna function.

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

Request
container	Required	ID of the container on which the Klarna button will be rendered
form (Object)	Required	Button configuration
customization (Object)	Required	Button customization

form (Object)
nameLabel	Optional	Name input label
nameError	Optional	Error to show if value is incorrect
lastNameLabel	Optional	Last name input label
lastNameError	Optional	Error to show if value is incorrect
emailLabel	Optional	Email input label
emailError	Optional	Error to show if value is incorrect
addressLabel	Optional	Address input label
addressError	Optional	Error to show if value is incorrect
zipCodeLabel	Optional	Zip code input label
zipCodeError	Optional	Error to show if value is incorrect
cityLabel	Optional	City input label
cityError	Optional	Error to show if value is incorrect
countryLabel	Optional	Country input label
countryError	Optional	Error to show if value is incorrect
prefilledName	Optional	User name
prefilledLastName	Optional	User last name
prefilledEmail	Optional	User email
prefilledAddress	Optional	User address
prefilledZipCode	Optional	User zip code
prefilledCity	Optional	User city
prefilledCountry	Optional	User country

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Inputs color border
borderRadius	Optional	Inputs radius border
padding	Optional	Padding
inputTextSize	Optional	Input text size
labelTextSize	Optional	Label text size
iconSize	Optional	Icon size
iconColor	Optional	Icon color

How to validate the form?

The form has its own validation which it communicates through the klarna_valid event.

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

**How to submit?

Send a pay event with the klarna value.

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

MBWay form

To render a MBWay form in a specific container, call the mbway function.

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

Request
container	Required	ID of the container on which the MBWay button will be rendered
form (Object)	Required	Button configuration
customization (Object)	Required	Button customization

form (Object)
nameLabel	Optional	Name input label
nameError	Optional	Error to show if value is incorrect
lastNameLabel	Optional	Last name input label
lastNameError	Optional	Error to show if value is incorrect
emailLabel	Optional	Email input label
emailError	Optional	Error to show if value is incorrect
prefixLabel	Optional	Input for user prefix of phone number
prefixError	Optional	Error to show if value is incorrect
phoneLabel	Optional	Input for user phone number
phoneError	Optional	Error to show if value is incorrect
prefilledPrefix	Optional	Input for user prefix
prefilledPhone	Optional	Error to show if value is incorrect

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Inputs color border
borderRadius	Optional	Inputs radius border
padding	Optional	Padding
inputTextSize	Optional	Input text size
labelTextSize	Optional	Label text size
iconSize	Optional	Icon size
iconColor	Optional	Icon color

How to validate the form?

The form has its own validation which it communicates through the mbway_valid event.

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

**How to submit?

Send a pay event with the mbway value.

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

Sofort form

To render a Sofort form in a specific container, call the sofort function.

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

Request
container	Required	ID of the container on which the Sofort button will be rendered
form (Object)	Required	Button configuration
customization (Object)	Required	Button customization

form (Object)
nameLabel	Optional	Name input label
nameError	Optional	Error to show if value is incorrect
lastNameLabel	Optional	Last name input label
lastNameError	Optional	Error to show if value is incorrect
emailLabel	Optional	Email input label
emailError	Optional	Error to show if value is incorrect
addressLabel	Optional	Address input label
addressError	Optional	Error to show if value is incorrect
zipCodeLabel	Optional	Zip code input label
zipCodeError	Optional	Error to show if value is incorrect
cityLabel	Optional	City input label
cityError	Optional	Error to show if value is incorrect
countryLabel	Optional	Country input label
countryError	Optional	Error to show if value is incorrect
prefilledName	Optional	User name
prefilledLastName	Optional	User last name
prefilledEmail	Optional	User email
prefilledAddress	Optional	User address
prefilledZipCode	Optional	User zip code
prefilledCity	Optional	User city
prefilledCountry	Optional	User country

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Inputs color border
borderRadius	Optional	Inputs radius border
padding	Optional	Padding
inputTextSize	Optional	Input text size
labelTextSize	Optional	Label text size
iconSize	Optional	Icon size
iconColor	Optional	Icon color

How to validate the form?

The form has its own validation which it communicates through the sofort_valid event.

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

**How to submit?

Send a pay event with the sofort value.

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

Viacash form

To render a Viacash form in a specific container, call the viacash function.

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

Request
container	Required	ID of the container on which the Viacash button will be rendered
form (Object)	Required	Button configuration
customization (Object)	Required	Button customization

form (Object)
nameLabel	Optional	Input label user name
nameError	Optional	Error to show if value is incorrect
lastNameLabel	Optional	Input label user last name
lastNameError	Optional	Error to show if value is incorrect
emailLabel	Optional	Input label user email
emailError	Optional	Error to show if value is incorrect
prefilledName	Optional	User name
prefilledLastName	Optional	User last name
prefilledEmail	Optional	User email

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Inputs color border
borderRadius	Optional	Inputs radius border
padding	Optional	Padding
inputTextSize	Optional	Input text size
labelTextSize	Optional	Label text size
iconSize	Optional	Icon size
iconColor	Optional	Icon color

How to validate the form?

The form has its own validation which it communicates through the viacash_valid event.

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

**How to submit?

Send a pay event with the viacash value.

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

Mach form

To render a Mach form in a specific container, call the mach function.

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

Request
container	Required	ID of the container on which the Mach button will be rendered
form (Object)	Required	Button configuration
customization (Object)	Required	Button customization

form (Object)
nameLabel	Optional	Input label user name
nameError	Optional	Error to show if value is incorrect
lastNameLabel	Optional	Input label user last name
lastNameError	Optional	Error to show if value is incorrect
emailLabel	Optional	Input label user email
emailError	Optional	Error to show if value is incorrect
prefilledName	Optional	User name
prefilledLastName	Optional	User last name
prefilledEmail	Optional	User email

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Inputs color border
borderRadius	Optional	Inputs radius border
padding	Optional	Padding
inputTextSize	Optional	Input text size
labelTextSize	Optional	Label text size
iconSize	Optional	Icon size
iconColor	Optional	Icon color

How to validate the form?

The form has its own validation which it communicates through the mach_valid event.

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

**How to submit?

Send a pay event with the mach value.

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

Khipu form

To render a Khipu form in a specific container, call the khipu function.

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

Request
container	Required	ID of the container on which the Khipu button will be rendered
form (Object)	Required	Button configuration
customization (Object)	Required	Button customization

form (Object)
nameLabel	Optional	Input label user name
nameError	Optional	Error to show if value is incorrect
lastNameLabel	Optional	Input label user last name
lastNameError	Optional	Error to show if value is incorrect
emailLabel	Optional	Input label user email
emailError	Optional	Error to show if value is incorrect
phoneLabel	Opcional	Input label to user phone
phoneError	Opcional	Error to show if value is incorrect
prefilledName	Optional	User name
prefilledLastName	Optional	User last name
prefilledEmail	Optional	User email

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Inputs color border
borderRadius	Optional	Inputs radius border
padding	Optional	Padding
inputTextSize	Optional	Input text size
labelTextSize	Optional	Label text size
iconSize	Optional	Icon size
iconColor	Optional	Icon color

How to validate the form?

The form has its own validation which it communicates through the khipu_valid event.

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

**How to submit?

Send a pay event with the khipu value.

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

Klap form

To render a Klap form in a specific container, call the klap function.

It will allow us to render a Klap form on our page.

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

Request
container	Required	ID of the container on which the Klap button will be rendered
form (Object)	Required	Button configuration
customization (Object)	Required	Button customization

form (Object)
nameLabel	Optional	Input label user name
nameError	Optional	Error to show if value is incorrect
lastNameLabel	Optional	Input label user last name
lastNameError	Optional	Error to show if value is incorrect
emailLabel	Optional	Input label user email
emailError	Optional	Error to show if value is incorrect
phoneLabel	Opcional	Input label to user phone
phoneError	Opcional	Error to show if value is incorrect
prefilledName	Optional	User name
prefilledLastName	Optional	User last name
prefilledEmail	Optional	User email

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Inputs color border
borderRadius	Optional	Inputs radius border
padding	Optional	Padding
inputTextSize	Optional	Input text size
labelTextSize	Optional	Label text size
iconSize	Optional	Icon size
iconColor	Optional	Icon color

How to validate the form?

The form has its own validation which it communicates through the klap_valid event.

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

**How to submit?

Send a pay event with the klap value.

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

FlowPay form

To render a FlowPay form in a specific container, call the flowpay function.

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

Request
container	Required	ID of the container on which the FlowPay button will be rendered
form (Object)	Required	Button configuration
customization (Object)	Required	Button customization

form (Object)
nameLabel	Optional	Input label user name
nameError	Optional	Error to show if value is incorrect
lastNameLabel	Optional	Input label user last name
lastNameError	Optional	Error to show if value is incorrect
emailLabel	Optional	Input label user email
emailError	Optional	Error to show if value is incorrect
phoneLabel	Opcional	Input label to user phone
phoneError	Opcional	Error to show if value is incorrect
prefilledName	Optional	User name
prefilledLastName	Optional	User last name
prefilledEmail	Optional	User email

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Inputs color border
borderRadius	Optional	Inputs radius border
padding	Optional	Padding
inputTextSize	Optional	Input text size
labelTextSize	Optional	Label text size
iconSize	Optional	Icon size
iconColor	Optional	Icon color

How to validate the form?

The form has its own validation which it communicates through the flowpay_valid event.

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

**How to submit?

Send a pay event with the flowpay value.

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

Pago Fácil form

To render a Pago Fácil form in a specific container, call the pago_facil function.

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

Request
container	Required	ID of the container on which the Pago Fácil button will be rendered
form (Object)	Required	Button configuration
customization (Object)	Required	Button customization

form (Object)
nameLabel	Optional	Name input label
nameError	Optional	Error to show if value is incorrect
lastNameLabel	Optional	Last name input label
lastNameError	Optional	Error to show if value is incorrect
emailLabel	Optional	Email input label
emailError	Optional	Error to show if value is incorrect
addressLabel	Optional	Address input label
addressError	Optional	Error to show if value is incorrect
zipCodeLabel	Optional	Zip code input label
zipCodeError	Optional	Error to show if value is incorrect
cityLabel	Optional	City input label
cityError	Optional	Error to show if value is incorrect
countryLabel	Optional	Country input label
countryError	Optional	Error to show if value is incorrect
prefilledName	Optional	User name
prefilledLastName	Optional	User last name
prefilledEmail	Optional	User email
prefilledAddress	Optional	User address
prefilledZipCode	Optional	User zip code
prefilledCity	Optional	User city
prefilledCountry	Optional	User country

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Inputs color border
borderRadius	Optional	Inputs radius border
padding	Optional	Padding
inputTextSize	Optional	Input text size
labelTextSize	Optional	Label text size
iconSize	Optional	Icon size
iconColor	Optional	Icon color

How to validate the form?

The form has its own validation which it communicates through the pago_facil_valid event.

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

**How to submit?

Send a pay event with the pago_facil value.

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

Efecty form

To render a Efecty form in a specific container, call the efecty function.

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

Request
container	Required	ID of the container on which the Efecty button will be rendered
form (Object)	Required	Button configuration
customization (Object)	Required	Button customization

form (Object)
nameLabel	Optional	Name input label
nameError	Optional	Error to show if value is incorrect
lastNameLabel	Optional	Last name input label
lastNameError	Optional	Error to show if value is incorrect
emailLabel	Optional	Email input label
emailError	Optional	Error to show if value is incorrect
addressLabel	Optional	Address input label
addressError	Optional	Error to show if value is incorrect
zipCodeLabel	Optional	Zip code input label
zipCodeError	Optional	Error to show if value is incorrect
cityLabel	Optional	City input label
cityError	Optional	Error to show if value is incorrect
countryLabel	Optional	Country input label
countryError	Optional	Error to show if value is incorrect
prefilledName	Optional	User name
prefilledLastName	Optional	User last name
prefilledEmail	Optional	User email
prefilledAddress	Optional	User address
prefilledZipCode	Optional	User zip code
prefilledCity	Optional	User city
prefilledCountry	Optional	User country

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Inputs color border
borderRadius	Optional	Inputs radius border
padding	Optional	Padding
inputTextSize	Optional	Input text size
labelTextSize	Optional	Label text size
iconSize	Optional	Icon size
iconColor	Optional	Icon color

How to validate the form?

The form has its own validation which it communicates through the efecty_valid event.

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

**How to submit?

Send a pay event with the efecty value.

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

Loterica form

To render a Loterica form in a specific container, call the loterica function.

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

Request
container	Required	ID of the container on which the Loterica button will be rendered
form (Object)	Required	Button configuration
customization (Object)	Required	Button customization

form (Object)
nameLabel	Optional	Name input label
nameError	Optional	Error to show if value is incorrect
lastNameLabel	Optional	Last name input label
lastNameError	Optional	Error to show if value is incorrect
emailLabel	Optional	Email input label
emailError	Optional	Error to show if value is incorrect
prefilledName	Optional	User name
prefilledLastName	Optional	User last name
prefilledEmail	Optional	User email
prefilledDocumentIdentificationNumber	Optional	User Document Identification Number
documentIdentificationNumberLabel	Optional	Document Identification Number input label
documentIdentificationNumberError	Optional	Error to show if value is incorrect
prefixLabel	Optional	Input for user prefix of phone number
prefixError	Optional	Error to show if value is incorrect
phoneLabel	Optional	Input for user phone number
phoneError	Optional	Error to show if value is incorrect
prefilledPrefix	Optional	Input for user prefix
prefilledPhone	Optional	Error to show if value is incorrect

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Inputs color border
borderRadius	Optional	Inputs radius border
padding	Optional	Padding
inputTextSize	Optional	Input text size
labelTextSize	Optional	Label text size
iconSize	Optional	Icon size
iconColor	Optional	Icon color

How to validate the form?

The form has its own validation which it communicates through the loterica_valid event.

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

**How to submit?

Send a pay event with the loterica value.

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

Boleto form

To render a Boleto form in a specific container, call the boleto function.

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

Request
container	Required	ID of the container on which the Boleto button will be rendered
form (Object)	Required	Button configuration
customization (Object)	Required	Button customization

form (Object)
nameLabel	Optional	Name input label
nameError	Optional	Error to show if value is incorrect
lastNameLabel	Optional	Last name input label
lastNameError	Optional	Error to show if value is incorrect
emailLabel	Optional	Email input label
emailError	Optional	Error to show if value is incorrect
prefilledName	Optional	User name
prefilledLastName	Optional	User last name
prefilledEmail	Optional	User email
prefilledDocumentIdentificationNumber	Optional	User Document Identification Number
documentIdentificationNumberLabel	Optional	Document Identification Number input label
documentIdentificationNumberError	Optional	Error to show if value is incorrect
zipCodeLabel	Optional	Zip code input label
zipCodeError	Optional	Error to show if value is incorrect
cityLabel	Optional	City input label
cityError	Optional	Error to show if value is incorrect
prefilledZipCode	Optional	User zip code
prefilledCity	Optional	User city

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Inputs color border
borderRadius	Optional	Inputs radius border
padding	Optional	Padding
inputTextSize	Optional	Input text size
labelTextSize	Optional	Label text size
iconSize	Optional	Icon size
iconColor	Optional	Icon color

How to validate the form?

The form has its own validation which it communicates through the boleto_valid event.

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

**How to submit?

Send a pay event with the boleto value.

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

Servipag form

To render a Servipag form in a specific container, call the servipag function.

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

Request
container	Required	ID of the container on which the Servipag button will be rendered
form (Object)	Required	Button configuration
customization (Object)	Required	Button customization

form (Object)
nameLabel	Optional	Name input label
nameError	Optional	Error to show if value is incorrect
lastNameLabel	Optional	Last name input label
lastNameError	Optional	Error to show if value is incorrect
emailLabel	Optional	Email input label
emailError	Optional	Error to show if value is incorrect
prefilledName	Optional	User name
prefilledLastName	Optional	User last name
prefilledEmail	Optional	User email

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Inputs color border
borderRadius	Optional	Inputs radius border
padding	Optional	Padding
inputTextSize	Optional	Input text size
labelTextSize	Optional	Label text size
iconSize	Optional	Icon size
iconColor	Optional	Icon color

How to validate the form?

The form has its own validation which it communicates through the servipag_valid event.

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

**How to submit?

Send a pay event with the servipag value.

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

Webpay form

To render a Webpay form in a specific container, call the webpay function.

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

Request
container	Required	ID of the container on which the Webpay button will be rendered
form (Object)	Required	Button configuration
customization (Object)	Required	Button customization

form (Object)
nameLabel	Optional	Name input label
nameError	Optional	Error to show if value is incorrect
lastNameLabel	Optional	Last name input label
lastNameError	Optional	Error to show if value is incorrect
emailLabel	Optional	Email input label
emailError	Optional	Error to show if value is incorrect
addressLabel	Optional	Address input label
addressError	Optional	Error to show if value is incorrect
zipCodeLabel	Optional	Zip code input label
zipCodeError	Optional	Error to show if value is incorrect
cityLabel	Optional	City input label
cityError	Optional	Error to show if value is incorrect
countryLabel	Optional	Country input label
countryError	Optional	Error to show if value is incorrect
prefilledName	Optional	User name
prefilledLastName	Optional	User last name
prefilledEmail	Optional	User email
prefilledAddress	Optional	User address
prefilledZipCode	Optional	User zip code
prefilledCity	Optional	User city
prefilledCountry	Optional	User country

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Inputs color border
borderRadius	Optional	Inputs radius border
padding	Optional	Padding
inputTextSize	Optional	Input text size
labelTextSize	Optional	Label text size
iconSize	Optional	Icon size
iconColor	Optional	Icon color

How to validate the form?

The form has its own validation which it communicates through the webpay_valid event.

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

**How to submit?

Send a pay event with the webpay value.

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

3. The customer completes the payment

Once the user completes the payment, an event will be sent on the page itself with one of the following values to be handled by the merchant:

Response
redirect	URL to redirect the user with the payment result OK/KO
render	HTML content to render on the page. This happens because user intervention is required again, usually to complete the 3DS.
error	HTML content with the error occurred.

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;
    }

Note: This is not necessary if you have used the redirect or render function of the SDK. In this case, the SDK will redirect the client to the corresponding redirect URL according to the result of the operation:

• If the payment has been made successfully it is redirected to the url specified in the url_ok field of the order.
• In any other case it redirects to the url specified in the url_ko field of the order.