Checkout SDK

Checkout SDK uses a JavaScript Client-Side Library that can be easily integrated into your payment page.

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

To use the SDK, it will be necessary to first generate an order in Paylands. This order should contain the UUID of the checkout created earlier. For example:

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

On our webpage, we will load the checkout script.

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

And then we will initialize the SDK.

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

Request
token	Mandatory	Token of the previously generated order
language	Optional Default: "es"	Language of the checkout
environment	Optional Values: "PRODUCTION", "SANDBOX" Default: "PRODUCTION"	Environment

This will grant us access to all the functions of the SDK.

Redirection

It will redirect the user to the previously created and customized checkout.

await paylandsCheckout.redirect();

Rendering

It allows us to render the created and customized checkout on our own page.

await paylandsCheckout.render('renderContainer');

Request
container	Mandatory	ID of the container where the checkout will be rendered

Once the user completes the payment, an event will be sent on the webpage with one of the following values that should be handled by the merchant:

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

Card Form

It allows us to render a customizable card form on our page.

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

Request
container	Mandatory	ID of the container where the form will be rendered
form (Object)	Mandatory	Form configuration
customization (Object)	Mandatory	Form customization

form (Object)
holderLabel	Optional	Label for the cardholder input
holderError	Optional	Error message to show if the value is incorrect
panLabel	Optional	Label for the card PAN input
panError	Optional	Error message to show if the value is incorrect
expiryLabel	Optional	Label for the card expiry date input
expiryError	Optional	Error message to show if the value is incorrect
cvvLabel	Optional	Label for the card CVV input
cvvError	Optional	Error message to show if the value is incorrect

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Input border color
borderRadius	Optional	Input border radius
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 communicates through the card_valid event.

window.addEventListener('message', event => {
    if (event.data.card_valid === true) {
        console.log('The form is valid');
    }
    if (event.data.card_valid === false) {
        console.log('The form contains errors');
    }
});

How to submit? Send a pay event with the value card.

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

This event will be captured by the SDK to process the payment. Once processed, it will send a new event on the webpage with one of the following values that should be handled by the merchant:

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

Google Pay

It allows us to render a Google Pay button. It's necessary to have it previously configured.

await paylandsCheckout.google_pay('renderContainer');

Request
container	Mandatory	ID of the container where the Google Pay button will be rendered

Once the user completes the payment, an event will be sent on the webpage with one of the following values that should be handled by the merchant:

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

Apple Pay

It allows us to render an Apple Pay button. It's necessary to have it configured previously. Keep in mind that Apple Pay is only compatible with Apple devices and Safari. In any other case, the button will not be displayed.

await paylandsCheckout.apple_pay('renderContainer');

Request
container	Mandatory	ID of the container where the Apple Pay button will be rendered

Once the user completes the payment, an event will be sent on the webpage with one of the following values that should be handled by the merchant:

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

PayPal

It allows us to render a PayPal button. It's necessary to have it configured previously.

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

Request
container	Mandatory	ID of the container where the button will be rendered
form (Object)	Mandatory	Button configuration
customization (Object)	Mandatory	Button customization

form (Object)
prefilledAddress	Optional	User's address if known
prefilledCountry	Optional	User's country if known

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

Once the user completes the payment, an event will be sent on the webpage with one of the following values that should be handled by the merchant:

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

Crypto

It allows us to render a Crypto button.

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

Request
container	Mandatory	ID of the container where the button will be rendered
customization (Object)	Mandatory	Button customization

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

Once the user completes the payment, an event will be sent on the webpage with one of the following values that should be handled by the merchant:

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

Pix

It allows us to render a Pix button.

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

Request
container	Mandatory	ID of the container where the button will be rendered
customization (Object)	Mandatory	Button customization

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

Once the user completes the payment, an event will be sent on the webpage with one of the following values that should be handled by the merchant:

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

Floa

It allows us to render a Floa button.

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

Request
container	Mandatory	ID of the container where the button will be rendered
customization (Object)	Mandatory	Button customization

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

Once the user completes the payment, an event will be sent on the webpage with one of the following values that should be handled by the merchant:

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

PSE

It allows us to render a PSE button.

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

Request
container	Mandatory	ID of the container where the button will be rendered
customization (Object)	Mandatory	Button customization

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

Once the user completes the payment, an event will be sent on the webpage with one of the following values that should be handled by the merchant:

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

SPEI

It allows us to render a SPEI button.

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

Request
container	Mandatory	ID of the container where the button will be rendered
customization (Object)	Mandatory	Button customization

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

Once the user completes the payment, an event will be sent on the webpage with one of the following values that should be handled by the merchant:

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

Bizum

It allows us to render a Bizum form on our page.

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

Request
container	Mandatory	ID of the container where the form will be rendered
form (Object)	Mandatory	Configuration of the form
customization (Object)	Mandatory	Form customization

form (Object)
prefixLabel	Optional	Label for the phone prefix input
prefixError	Optional	Error message to display if the value is incorrect
phoneLabel	Optional	Label for the phone number input
phoneError	Optional	Error message to display if the value is incorrect
prefilledPrefix	Optional	User's phone prefix if known
prefilledPhone	Optional	User's phone number if known

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Text color for errors
borderColor	Optional	Border color of inputs
borderRadius	Optional	Border radius of inputs
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 communicates through the bizum_valid event.

window.addEventListener('message', event => {
    if (event.data.bizum_valid === true) {
        console.log('The form is valid');
    }
    if (event.data.bizum_valid === false) {
        console.log('The form contains errors');
    }
});

How to submit? Send a pay event with the value bizum.

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

This event will be captured by the SDK to process the payment. Once processed, it will send a new event on the webpage with one of the following values that should be handled by the merchant:

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

Cofidis

It allows us to render a Cofidis form on our page.

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

Request
container	Mandatory	ID of the container where the form will be rendered
form (Object)	Mandatory	Configuration of the form
customization (Object)	Mandatory	Form customization

form (Object)
nameLabel	Optional	Label for the name input
nameError	Optional	Error message to display if the value is incorrect
lastNameLabel	Optional	Label for the last name input
lastNameError	Optional	Error message to display if the value is incorrect
emailLabel	Optional	Label for the email input
emailError	Optional	Error message to display if the value is incorrect
prefilledName	Optional	User's name if known
prefilledLastName	Optional	User's last name if known
prefilledEmail	Optional	User's email if known

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Text color for errors
borderColor	Optional	Border color of inputs
borderRadius	Optional	Border radius of inputs
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 communicates through the cofidis_valid event.

window.addEventListener('message', event => {
    if (event.data.cofidis_valid === true) {
        console.log('The form is valid');
    }
    if (event.data.cofidis_valid === false) {
        console.log('The form contains errors');
    }
});

How to submit? Send a pay event with the value cofidis.

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

This event will be captured by the SDK to process the payment. Once processed, it will send a new event on the webpage with one of the following values that should be handled by the merchant:

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

Giropay

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

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

Request
container	Mandatory	ID of the container where the form will be rendered
form (Object)	Mandatory	Form configuration
customization (Object)	Mandatory	Form customization

form (Object)
nameLabel	Optional	Label for the name input
nameError	Optional	Error message to display if the value is incorrect
lastNameLabel	Optional	Label for the last name input
lastNameError	Optional	Error message to display if the value is incorrect
emailLabel	Optional	Label for the email input
emailError	Optional	Error message to display if the value is incorrect
addressLabel	Optional	Label for the address input
addressError	Optional	Error message to display if the value is incorrect
zipCodeLabel	Optional	Label for the zip code input
zipCodeError	Optional	Error message to display if the value is incorrect
cityLabel	Optional	Label for the city input
cityError	Optional	Error message to display if the value is incorrect
countryLabel	Optional	Label for the country input
countryError	Optional	Error message to display if the value is incorrect
prefilledName	Optional	User's name if known
prefilledLastName	Optional	User's last name if known
prefilledEmail	Optional	User's email if known
prefilledAddress	Optional	User's address if known
prefilledZipCode	Optional	User's zip code if known
prefilledCity	Optional	User's city if known
prefilledCountry	Optional	User's country if known

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Input fields border color
borderRadius	Optional	Input fields border radius
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 communicates through the giropay_valid event.

window.addEventListener('message', event => {
    if (event.data.giropay_valid === true) {
        console.log('The form is valid');
    }
    if (event.data.giropay_valid === false) {
        console.log('The form contains errors');
    }
});

How to submit? Send a pay event with the value giropay.

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

This event will be captured by the SDK to process the payment. Once processed, it will send a new event on the page itself with one of the following values that should be handled by the merchant:

Response
redirect	URL to redirect the user to 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 that occurred.

Ideal

It will allow us to render an iDEAL form on our page.

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

Request
container	Mandatory	ID of the container where the form will be rendered
form (Object)	Mandatory	Form configuration
customization (Object)	Mandatory	Form customization

form (Object)
nameLabel	Optional	Label for the name input
nameError	Optional	Error message to display if the value is incorrect
lastNameLabel	Optional	Label for the last name input
lastNameError	Optional	Error message to display if the value is incorrect
emailLabel	Optional	Label for the email input
emailError	Optional	Error message to display if the value is incorrect
addressLabel	Optional	Label for the address input
addressError	Optional	Error message to display if the value is incorrect
zipCodeLabel	Optional	Label for the zip code input
zipCodeError	Optional	Error message to display if the value is incorrect
cityLabel	Optional	Label for the city input
cityError	Optional	Error message to display if the value is incorrect
countryLabel	Optional	Label for the country input
countryError	Optional	Error message to display if the value is incorrect
prefilledName	Optional	User's name if known
prefilledLastName	Optional	User's last name if known
prefilledEmail	Optional	User's email if known
prefilledAddress	Optional	User's address if known
prefilledZipCode	Optional	User's zip code if known
prefilledCity	Optional	User's city if known
prefilledCountry	Optional	User's country if known

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Input fields border color
borderRadius	Optional	Input fields border radius
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 communicates through the ideal_valid event.

window.addEventListener('message', event => {
    if (event.data.ideal_valid === true) {
        console.log('The form is valid');
    }
    if (event.data.ideal_valid === false) {
        console.log('The form contains errors');
    }
});

How to submit? Send a pay event with the value ideal.

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

This event will be captured by the SDK to process the payment. Once processed, it will send a new event on the page itself with one of the following values that should be handled by the merchant:

Response
redirect	URL to redirect the user to 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 that occurred.

Klarna

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

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

Request
container	Mandatory	ID of the container where the form will be rendered
form (Object)	Mandatory	Form configuration
customization (Object)	Mandatory	Form customization

form (Object)
nameLabel	Optional	Label for the name input
nameError	Optional	Error message to display if the value is incorrect
lastNameLabel	Optional	Label for the last name input
lastNameError	Optional	Error message to display if the value is incorrect
emailLabel	Optional	Label for the email input
emailError	Optional	Error message to display if the value is incorrect
addressLabel	Optional	Label for the address input
addressError	Optional	Error message to display if the value is incorrect
zipCodeLabel	Optional	Label for the zip code input
zipCodeError	Optional	Error message to display if the value is incorrect
cityLabel	Optional	Label for the city input
cityError	Optional	Error message to display if the value is incorrect
countryLabel	Optional	Label for the country input
countryError	Optional	Error message to display if the value is incorrect
prefilledName	Optional	User's name if known
prefilledLastName	Optional	User's last name if known
prefilledEmail	Optional	User's email if known
prefilledAddress	Optional	User's address if known
prefilledZipCode	Optional	User's zip code if known
prefilledCity	Optional	User's city if known
prefilledCountry	Optional	User's country if known

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Input fields border color
borderRadius	Optional	Input fields border radius
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 communicates through the klarna_valid event.

window.addEventListener('message', event => {
    if (event.data.klarna_valid === true) {
        console.log('The form is valid');
    }
    if (event.data.klarna_valid === false) {
        console.log('The form contains errors');
    }
});

How to submit? Send a pay event with the value klarna.

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

This event will be captured by the SDK to process the payment. Once processed, it will send a new event on the page itself with one of the following values that should be handled by the merchant:

Response
redirect	URL to redirect the user to 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 that occurred.

MBWay

It will allow us to render an MBWay form on our page.

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

Request
container	Mandatory	ID of the container where the form will be rendered
form (Object)	Mandatory	Form configuration
customization (Object)	Mandatory	Form customization

form (Object)
nameLabel	Optional	Label for the name input
nameError	Optional	Error message to display if the value is incorrect
lastNameLabel	Optional	Label for the last name input
lastNameError	Optional	Error message to display if the value is incorrect
emailLabel	Optional	Label for the email input
emailError	Optional	Error message to display if the value is incorrect
prefixLabel	Optional	Label for the telephone prefix input
prefixError	Optional	Error message to display if the value is incorrect
phoneLabel	Optional	Label for the telephone number input
phoneError	Optional	Error message to display if the value is incorrect
prefilledName	Optional	User's name if known
prefilledLastName	Optional	User's last name if known
prefilledEmail	Optional	User's email if known
prefilledPrefix	Optional	User's telephone prefix if known
prefilledPhone	Optional	User's telephone number if known

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Input fields border color
borderRadius	Optional	Input fields border radius
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 communicates through the mbway_valid event.

window.addEventListener('message', event => {
    if (event.data.mbway_valid === true) {
        console.log('The form is valid');
    }
    if (event.data.mbway_valid === false) {
        console.log('The form contains errors');
    }
});

How to submit? Send a pay event with the value mbway.

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

This event will be captured by the SDK to process the payment. Once processed, it will send a new event on the page itself with one of the following values that should be handled by the merchant:

Response
redirect	URL to redirect the user to 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 that occurred.

Multibanco

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

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

Request
container	Mandatory	ID of the container where the form will be rendered
customization (Object)	Mandatory	Form customization

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

Once the user completes the payment, an event will be sent on the webpage with one of the following values that should be handled by the merchant:

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

Sofort

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

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

Request
container	Mandatory	ID of the container where the form will be rendered
form (Object)	Mandatory	Form configuration
customization (Object)	Mandatory	Form customization

form (Object)
nameLabel	Optional	Label for the name input
nameError	Optional	Error message to display if the value is incorrect
lastNameLabel	Optional	Label for the last name input
lastNameError	Optional	Error message to display if the value is incorrect
emailLabel	Optional	Label for the email input
emailError	Optional	Error message to display if the value is incorrect
addressLabel	Optional	Label for the address input
addressError	Optional	Error message to display if the value is incorrect
zipCodeLabel	Optional	Label for the postal code input
zipCodeError	Optional	Error message to display if the value is incorrect
cityLabel	Optional	Label for the city input
cityError	Optional	Error message to display if the value is incorrect
countryLabel	Optional	Label for the country input
countryError	Optional	Error message to display if the value is incorrect
prefilledName	Optional	User's name if known
prefilledLastName	Optional	User's last name if known
prefilledEmail	Optional	User's email if known
prefilledAddress	Optional	User's address if known
prefilledZipCode	Optional	User's postal code if known
prefilledCity	Optional	User's city if known
prefilledCountry	Optional	User's country if known

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Input fields border color
borderRadius	Optional	Input fields border radius
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 communicates through the sofort_valid event.

window.addEventListener('message', event => {
    if (event.data.sofort_valid === true) {
        console.log('The form is valid');
    }
    if (event.data.sofort_valid === false) {
        console.log('The form contains errors');
    }
});

How to submit? Send a pay event with the value sofort.

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

This event will be captured by the SDK to process the payment. Once processed, it will send a new event on the page itself with one of the following values that should be handled by the merchant:

Response
redirect	URL to redirect the user to 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 that occurred.

Bank Transfer

It will allow us to render a bank transfer button on our page.

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

Request
container	Mandatory	ID of the container where the button will be rendered
customization (Object)	Mandatory	Button customization

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

Once the user completes the payment, an event will be sent on the webpage with one of the following values that should be handled by the merchant:

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

Viacash

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

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

Request
container	Required	ID of the container where the form will be rendered
form (Object)	Required	Form configuration
customization (Object)	Required	Form customization

form (Object)
nameLabel	Optional	Label for the name input
nameError	Optional	Error message to display if the value is incorrect
lastNameLabel	Optional	Label for the last name input
lastNameError	Optional	Error message to display if the value is incorrect
emailLabel	Optional	Label for the email input
emailError	Optional	Error message to display if the value is incorrect
prefilledName	Optional	User's name if known
prefilledLastName	Optional	User's last name if known
prefilledEmail	Optional	User's email if known

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Input border color
borderRadius	Optional	Input border radius
padding	Optional	Spacing
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 communicates through the viacash_valid event.

window.addEventListener('message', event => {
    if (event.data.viacash_valid === true) {
        console.log('The form is valid');
    }
    if (event.data.viacash_valid === false) {
        console.log('The form contains errors');
    }
});

How to submit? Send a pay event with the value viacash.

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

This event will be captured by the SDK to process the payment. Once processed, it will send a new event back to the page with one of the following values, which the merchant needs to handle:

Response
redirect	URL to redirect the user to with the payment result (OK/KO)
render	HTML content to render on the page. This occurs because the user's intervention is required, usually to complete the 3DS
error	HTML content with the error that occurred

Mach

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

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

Request
container	Required	ID of the container where the form will be rendered
form (Object)	Required	Form configuration
customization (Object)	Required	Form customization

form (Object)
nameLabel	Optional	Label for the name input
nameError	Optional	Error message to display if the value is incorrect
lastNameLabel	Optional	Label for the last name input
lastNameError	Optional	Error message to display if the value is incorrect
emailLabel	Optional	Label for the email input
emailError	Optional	Error message to display if the value is incorrect
prefilledName	Optional	User's name if known
prefilledLastName	Optional	User's last name if known
prefilledEmail	Optional	User's email if known

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Input border color
borderRadius	Optional	Input border radius
padding	Optional	Spacing
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 communicates through the mach_valid event.

window.addEventListener('message', event => {
    if (event.data.mach_valid === true) {
        console.log('The form is valid');
    }
    if (event.data.mach_valid === false) {
        console.log('The form contains errors');
    }
});

How to submit? Send a pay event with the value mach.

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

This event will be captured by the SDK to process the payment. Once processed, it will send a new event back to the page with one of the following values, which the merchant needs to handle:

Response
redirect	URL to redirect the user to with the payment result (OK/KO)
render	HTML content to render on the page. This occurs because the user's intervention is required, usually to complete the 3DS
error	HTML content with the error that occurred

Khipu

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

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

Request
container	Required	ID of the container where the form will be rendered
form (Object)	Required	Form configuration
customization (Object)	Required	Form customization

form (Object)
nameLabel	Optional	Label for the name input
nameError	Optional	Error message to display if the value is incorrect
lastNameLabel	Optional	Label for the last name input
lastNameError	Optional	Error message to display if the value is incorrect
emailLabel	Optional	Label for the email input
emailError	Optional	Error message to display if the value is incorrect
prefilledName	Optional	User's name if known
prefilledLastName	Optional	User's last name if known
prefilledEmail	Optional	User's email if known

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Input border color
borderRadius	Optional	Input border radius
padding	Optional	Spacing
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 communicates through the khipu_valid event.

window.addEventListener('message', event => {
    if (event.data.khipu_valid === true) {
        console.log('The form is valid');
    }
    if (event.data.khipu_valid === false) {
        console.log('The form contains errors');
    }
});

How to submit? Send a pay event with the value khipu.

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

This event will be captured by the SDK to process the payment. Once processed, it will send a new event back to the page with one of the following values, which the merchant needs to handle:

Response
redirect	URL to redirect the user to with the payment result (OK/KO)
render	HTML content to render on the page. This occurs because the user's intervention is required, usually to complete the 3DS
error	HTML content with the error that occurred

Klap

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

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

Request
container	Required	ID of the container where the form will be rendered
form (Object)	Required	Form configuration
customization (Object)	Required	Form customization

form (Object)
nameLabel	Optional	Label for the name input
nameError	Optional	Error message to display if the value is incorrect
lastNameLabel	Optional	Label for the last name input
lastNameError	Optional	Error message to display if the value is incorrect
emailLabel	Optional	Label for the email input
emailError	Optional	Error message to display if the value is incorrect
prefilledName	Optional	User's name if known
prefilledLastName	Optional	User's last name if known
prefilledEmail	Optional	User's email if known

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Input border color
borderRadius	Optional	Input border radius
padding	Optional	Spacing
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 communicates through the klap_valid event.

window.addEventListener('message', event => {
    if (event.data.klap_valid === true) {
        console.log('The form is valid');
    }
    if (event.data.klap_valid === false) {
        console.log('The form contains errors');
    }
});

How to submit? Send a pay event with the value klap.

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

This event will be captured by the SDK to process the payment. Once processed, it will send a new event back to the page with one of the following values, which the merchant needs to handle:

Response
redirect	URL to redirect the user to with the payment result (OK/KO)
render	HTML content to render on the page. This occurs because the user's intervention is required, usually to complete the 3DS
error	HTML content with the error that occurred

Flowpay

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

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

Request
container	Required	ID of the container where the form will be rendered
form (Object)	Required	Form configuration
customization (Object)	Required	Form customization

form (Object)
nameLabel	Optional	Label for the name input
nameError	Optional	Error message to display if the value is incorrect
lastNameLabel	Optional	Label for the last name input
lastNameError	Optional	Error message to display if the value is incorrect
emailLabel	Optional	Label for the email input
emailError	Optional	Error message to display if the value is incorrect
prefilledName	Optional	User's name if known
prefilledLastName	Optional	User's last name if known
prefilledEmail	Optional	User's email if known

customization (Object)
font	Optional	Text font
textColor	Optional	Text color
backgroundColor	Optional	Background color
errorColor	Optional	Error text color
borderColor	Optional	Input border color
borderRadius	Optional	Input border radius
padding	Optional	Spacing
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 communicates through the flowpay_valid event.

window.addEventListener('message', event => {
    if (event.data.flowpay_valid === true) {
        console.log('The form is valid');
    }
    if (event.data.flowpay_valid === false) {
        console.log('The form contains errors');
    }
});

How to submit? Send a pay event with the value flowpay.

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

This event will be captured by the SDK to process the payment. Once processed, it will send a new event back to the page with one of the following values, which the merchant needs to handle:

Response
redirect	URL to redirect the user to with the payment result (OK/KO)
render	HTML content to render on the page. This occurs because the user's intervention is required, usually to complete the 3DS
error	HTML content with the error that occurred

PicPay

It allows us to render a PicPay button.

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

Request
container	Mandatory	ID of the container where the button will be rendered
customization (Object)	Mandatory	Button customization

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

Once the user completes the payment, an event will be sent on the webpage with one of the following values that should be handled by the merchant:

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

Paysafecard

It allows us to render a Paysafecard button.

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

Request
container	Mandatory	ID of the container where the button will be rendered
customization (Object)	Mandatory	Button customization

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

Once the user completes the payment, an event will be sent on the webpage with one of the following values that should be handled by the merchant:

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

Redirection​

Rendering​

Card Form​

Google Pay​

Apple Pay​

PayPal​

Crypto​

Pix​

Floa​

PSE​

SPEI​

Bizum​

Cofidis​

Giropay​

Ideal​

Klarna​

MBWay​

Multibanco​

Sofort​

Bank Transfer​

Viacash​

Mach​

Khipu​

Klap​

Flowpay​

PicPay​

Paysafecard​

Redirection

Rendering

Card Form

Google Pay

Apple Pay

PayPal

Crypto

Pix

Floa

PSE

SPEI

Bizum

Cofidis

Giropay

Ideal

Klarna

MBWay

Multibanco

Sofort

Bank Transfer

Viacash

Mach

Khipu

Klap

Flowpay

PicPay

Paysafecard