Overview

Hosted Fields allow you to securely collect payment details using iframes that are hosted by Buckaroo.
By using Hosted Fields, sensitive payment information is never directly handled by your servers, reducing your PCI compliance burden.

Key Features

Security: Sensitive payment data is handled securely (PCI compliant).
Customization: Hosted Fields can be styled to match the look and feel of your site.
Flexibility: Can be used with various payment methods, including credit cards, debit cards, and more.

Getting Started

Prerequisites

Access to Buckaroo External APIs (Token API).
Token API credentials (credentials or API key) from Buckaroo.
Basic knowledge of HTML, CSS, and JavaScript.

Set up your payment page

Load the Buckaroo Hosted Fields SDK

Include the Hosted Fields SDK on your webpage. For example:

<script src="https://hostedfields-externalapi.alpha.buckaroo.aws/v1/sdk"></script>

<script src="https://hostedfields-externalapi.prod-pci.buckaroo.io/v1/sdk"></script>

Create HTML Elements for Hosted Fields

Required: Add HTML Wrappers where the Hosted Fields will be embedded. For example:

<div id="cc-name-wrapper"></div>
<div id="cc-number-wrapper"></div>
<div id="cc-expiry-wrapper"></div>
<div id="cc-cvc-wrapper"></div>

Optional: Add error code wrappers where validation errors from the SDK will be rendered. For example:

<div>
<div id="cc-name-wrapper"></div>
<p id="cc-name-error"></p>
</div>

Optional: Adding labels for each field for documentation purposes only.
The SDK will not affect labels. For example:

<div>
<label id="cc-name-label">
<div id="cc-name-wrapper"></div>
<p id="cc-name-error"></p>
</div>

Required: Add Pay button:

<button id="pay" type="button">Submit</button>

Initialize Hosted Fields

Steps to initialize Buckaroo Hosted Fields:

ℹ️
Merchants should implement their own internal logic to retrieve a token from the token API using their own credentials or API key. Once the token is obtained, it should be passed to the SDK for further processing.

See Token API Documentation: [X]

Replace jwt-token with retrieved token from Token API.

const init = async function () {
    var sdkClient = new BuckarooHostedFieldsSdk.HFClient("jwt-token");

Language

Optional: Set the language of the SDK. Validation errors will appear in selected language.

<button id="pay" type="button">Submit</button>

Language	Value
English (default)	en
Dutch	nl
German	de
French	fr
Spanish	es

Expiry Date Format

Optional: Set the expiry date format for credit card.

sdkClient.setExpiryDateFormat('MM/YYYY');

Supported formats
MM / YY (default)
MM / YYYY

Disable Card Logos

Optional: Card Brand Logos will not be rendered at all. (By default, Card Logos are shown)

sdkClient.disableCardLogos();

Supported credit cards

Brand	Logo	Example
Visa		4563 5500 0000 0005
Mastercard		5386 8600 0000 0000
Maestro		No test transaction found in
American Express		3718 4997 1840 005
Bancontact		6703 4200 5545 65015 - not supported yet

Validation

Get the pay button HTML element.

let payButton = document.getElementById("pay");

Starting a payment session.

await sdkClient.startSession(function (event) {

Handling validation errors.

The SDK will automatically render the error codes on the provided error wrappers.

ℹ️
The sdkClient.handleValidation() function requires parameters in a specific order:

event,

ID of the error element for cardholder name,

ID of the error element for card number,

ID of the error element for expiry

ID of the error element for CVC.

sdkClient.handleValidation(event, 'cc-name-error', 'cc-number-error', 'cc-expiry-error', 'cc-cvc-error');

Disabling the pay button.

ℹ️
sdkClient.formIsValid() will perform validation on each mounted field resulting in:
true - if all inputs are valid
false - if any of inputs is invalid.

 if (payButton) {
     payButton.disabled = !sdkClient.formIsValid();

Service Detection

Declare string where Service type is going to be stored.

let service = null; or let service = "";

Inside event handler, initialize service by:

 service = sdkClient.getService();

Finally send Payment request based on Service.

Styling

Styling Details:

All CSS parameters are nullable, meaning they can be customized or left undefined.
Each parameter also has a default value, ensuring consistent appearance if no customization is applied.
Card Logo Detection and Styling: The SDK includes advanced functionality for detecting card logos and applying custom styling. For example:

 let cardLogoStyling = {
    height:"80%",
    position: 'absolute',
    border: '1px soli gray',
    radius: '5px',
    opacity:'1',
    transition:'all 0.3s ease',
    right:'5px',
    backgroundColor:'inherit'
};

Attribute	Default Value	Supported Values
height	80%	All CSS units (ex. `100px; 1.2rem; 100%;`)
position	absolute	All CSS units (ex. `absolute; relative;`)
border	1px solid gray	All CSS units (ex. `solid; 1.2rem solid;`)
radius	5px	All CSS units (ex. `100px; 10%;`)
opacity	1	All CSS units (ex. `1; 0; 0.5;`)
transition	`all 0.3s ease`	All CSS units (ex. `all 0.3s ease;`)
right	`5px`	All CSS units (ex. `5px; 1.2rem; 10%;`)
backgroundColor		All CSS units (ex. `brown; red; #F3F3F3;`)

❗️
Important
It's at the discretion of the merchant whether to apply cardLogoStyling, as many card issuers do not allow modification of their logos' appearance.

Custom Field Styling: Merchants can leverage the SDK to customize the styling of fields, allowing for tailored visual presentations that align with specific design requirements.

let styling = {
    fontSize:"14px",
    fontFamily: 'Consolas, Liberation Mono, Menlo, Courier, monospace',
    textAlign: 'left',
    background: 'inherit',
    color:'black',
    placeholderColor:'grey',
    cardLogoStyling: cardLogoStyling
};

Attribute	Default Value	Supported Values
fontSize	100%	All CSS units (ex. `100px; 1.2rem; 100%;`)
fontFamily	Arial, sans-serif	All CSS units (ex. `Arial, sans-serif`)
height	100	Only Pixels Supported
width	200	Only Pixels Supported
letterSpacing	normal	All CSS units (ex. `normal; 1px; 1rem;`)
textAlign	left	All CSS units (ex. `right; left;`)
textDecoration	none	All CSS units (ex. `underline`;)
textTransform	none	All CSS units (ex. `capitalize; lowercase;`)
background	inherit	All CSS units (ex. `inherit; green;`)
color	light-dark	All CSS units (ex. `red; #F3F3F3;`)
placeholderColor	grey	All CSS units (ex. `red; #F3F3F3;`)

ℹ️
Note:
For consistency in design, consider applying cardLogoStyling within baseStyling where appropriate.

Our SDK supports multiple styling objects to cater to different states of the input fields:

baseStyling: Styling applied to the hosted field in its default state.
validStyling: Optional styling for when the input is valid.
invalidStyling: Optional styling for when the input is invalid.

This flexibility enables merchant to customize the appearance of hosted fields based on various conditions, enhancing user interaction and visual feedback.

Mounting Fields

Cardholder Name

Explanation:

chnameOptions is an object that configures the Cardholder Name field with the following properties:

id: The element ID to be used for the Cardholder Name input field.
placeHolder: A string to be displayed as a placeholder in the input field. For example, "John Doe".
labelSelector: The CSS selector for the label associated with this input field. This should match the label declared by the merchant for this input.
baseStyling: An object defining the base styling for the input field.
validStyling: An optional object to customize the appearance of the input field when the input is valid.
invalidStyling: An optional object to customize the appearance of the input field when the input is invalid.

The mountCardHolderName function mounts the input field into the specified wrapper element (#cc-name-wrapper in this example). The then method is used to focus on the field once it is mounted. Note that the focus should be applied only to the input field that the merchant wants to focus on.

let chnameOptions = {
    id: "ccname",
    placeHolder: "John Doe",
    labelSelector: "#cc-name-label",
    baseStyling: styling,
    validStyling: validStyling, //optinal
    invalidStyling: invalidStyling, //optional
};

await sdkClient.mountCardHolderName("#cc-name-wrapper", chnameOptions)
    .then(function (cardHolderNameField) {
        cardHolderNameField.focus();
    });

The same approach can be applied to mount other fields like CardNumber, Expiry Date, and CVC.
Each field will have its corresponding mounting function and options object. Below you will find examples of mounting the other fields:

Card Number

let ccOptions = {
    id: "cc",
    placeHolder: "555x xxxx xxxx xxxx",
    labelSelector: "#cc-number-label",
    baseStyling: styling,
    cardLogoStyling: cardLogoStyling (optional - read in Styling)
};

await sdkClient.mountCardNumber("#cc-number-wrapper", ccOptions);

Expiry Date

let expiryDateOptions = {
    id: "expiry",
    placeHolder: "MM / YY",
    labelSelector: "#cc-expiry-label",
    baseStyling: styling
};

await sdkClient.mountExpiryDate("#cc-expiry-wrapper", expiryDateOptions);

CVC

let cvcOptions = {
    id: "cvc",
    placeHolder: "1234",
    labelSelector: "#cc-cvc-label",
    baseStyling: styling
};

await sdkClient.mountCvc("#cc-cvc-wrapper", cvcOptions);

Handling Payment Submission

payButton.addEventListener("click", async function () {
    let paymentToken = await sdkClient.submitSession();
});

The submitSession method will:

Return a sessionId, which serves as a payment token.
Close the current session.

After retrieving the sessionId, the merchant must set up the payment request to process the payment.

{
    "Currency": "EUR",
    "AmountDebit": 0.01,
    "Invoice": "MasterCard PayWithToken {{#buck_timestamp}}",
    "Description": "MasterCard PayWithToken",
    "ReturnUrl": "https://www.buckaroo.nl ",
    "ReturnUrlCancel": "https://www.buckaroo.nl/Cancel",
    "ReturnUrlError": "https://www.buckaroo.nl/Error",
    "ReturnUrlReject": "https://www.buckaroo.nl/Reject",
    "PushUrl": "https://www.google.com ",
    "PushUrlFailure": "https://www.google.com ",
    "Services": {
        "ServiceList": [
            {        
                "Name": "Mastercard",
                "Action": "PayWithToken",
                "Parameters": [
                    {
                        "Name": "SessionId",
                        "Value": "hf_43ab37u53XIDOpJg"
                    }
                ]
            }
        ]
    }
}

This approach ensures that when the user clicks the payment button, the SDK handles the session submission, providing a sessionId that the merchant can use to complete the payment process. It is important for the merchant to properly set up and handle the payment request using this sessionId to ensure a seamless transaction experience.

To view a sample of the implementation of SDK:

@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment env

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="theme-color" content="#ffffff">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" sizes="128x128" href="https://resources.wehkamp.nl/latest/images/favicon/favicon-128.png">
    <link rel="preload" as="font" type="font/woff2" crossorigin="true"
          href="https://resources.wehkamp.nl/latest/fonts/gibson-light.woff2">
    <link rel="preload" as="font" type="font/woff2" crossorigin="true"
          href="https://resources.wehkamp.nl/latest/fonts/gibson-regular.woff2">
    <link rel="preload" as="font" type="font/woff2" crossorigin="true"
          href="https://resources.wehkamp.nl/latest/fonts/gibson-semibold.woff2">
    <link rel="preload" as="font" type="font/woff2" crossorigin="true"
          href="https://resources.wehkamp.nl/13.10.1/fonts/wehkamp-icons.woff2">

    <style type="text/css">
        @@font-face {
            font-family: Gibson;
            src: url(https://resources.wehkamp.nl/latest/fonts/gibson-regular.woff2) format("woff2"), url(https://resources.wehkamp.nl/latest/fonts/gibson-regular.woff) format("woff"), url(https://resources.wehkamp.nl/latest/fonts/gibson-regular.ttf) format("ttf");
            font-weight: 400;
            font-display: fallback
        }

        @@font-face {
            font-family: Gibson;
            src: url(https://resources.wehkamp.nl/latest/fonts/gibson-light.woff2) format("woff2"), url(https://resources.wehkamp.nl/latest/fonts/gibson-light.woff) format("woff"), url(https://resources.wehkamp.nl/latest/fonts/gibson-light.ttf) format("ttf");
            font-weight: 100;
            font-display: fallback
        }

        @@font-face {
            font-family: Gibson;
            src: url(https://resources.wehkamp.nl/latest/fonts/gibson-semibold.woff2) format("woff2"), url(https://resources.wehkamp.nl/latest/fonts/gibson-semibold.woff) format("woff"), url(https://resources.wehkamp.nl/latest/fonts/gibson-semibold.ttf) format("ttf");
            font-weight: 700;
            font-display: fallback
        }

        @@font-face {
            font-family: WehkampIcons;
            src: url(https://resources.wehkamp.nl/13.10.1/fonts/wehkamp-icons.woff2) format("woff2"), url(https://resources.wehkamp.nl/13.10.1/fonts/wehkamp-icons.woff) format("woff"), url(https://resources.wehkamp.nl/13.10.1/fonts/wehkamp-icons.ttf) format("ttf");
            font-weight: 400;
            font-display: block
        }

        html,
        body {
            font-family: Gibson, arial, geneva, sans-serif;
        }
    </style>
    <script src="https://localhost:7287/v1/sdk"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="overflow-hidden py-20 bg-gray-200 flex justify-center">
    <div class="w-full max-w-lg">
        <header class="mb-5">
            <svg class="m-auto show-for-tablet-landscape" id="wehkamp_1_" height="40" width="194" x="0px" y="0px" viewBox="0 0 1940 400" xml:space="preserve"><style>
                                                                                                                                                                  .st0 {
                                                                                                                                                                      fill-rule: evenodd;
                                                                                                                                                                      clip-rule: evenodd;
                                                                                                                                                                      fill: #f55
                                                                                                                                                                  }</style><path id="wehkamp_text" class="st0" d="M1857.6 128.5c45.4 0 82.4 36.5 82.4 81.5s-37 81.5-82.4 81.5c-20.9 0-40-7.8-54.6-20.5v59h-27.8V130.7h27.8V149c14.6-12.7 33.7-20.5 54.6-20.5zm-492.9 0c20.9 0 40 7.8 54.6 20.5v-18.3h27.8v119.6c0 9.6 7.6 18.9 10.6 21.6l-19 20.1c-1.4-1.3-11-10.4-16.1-24.2a82.562 82.562 0 01-57.9 23.6c-45.4 0-82.4-36.6-82.4-81.5 0-44.8 36.9-81.4 82.4-81.4zm-197-38.5v103.5l66.5-62.9h40.3l-68.8 65c4.6 4.8 13.5 14.2 22.9 24.1l1.1 1.2c.6.6 1.2 1.2 1.7 1.8l1.7 1.8c8.3 8.7 16.4 17.2 21.7 22.8 7.5 7.1 21.6 17 30 17v27.5c-23.1 0-46.9-22.4-49.6-25l-.4-.4c-12.3-12.9-39.7-41.7-49.3-51.9l-17.9 16.9v57.8h-27.8V90h27.9zm-302.8 38.5c45.4 0 82.4 36.6 82.4 81.5v13.8H812.1c6.2 23.1 27.5 40.2 52.8 40.2v27.5c-45.4 0-82.4-36.5-82.4-81.5s36.9-81.5 82.4-81.5zm811.5 0c42.6 0 77.2 34.2 77.2 76.3v84.6h-27.8v-84.6c0-26.9-22.1-48.8-49.3-48.8s-49.3 21.9-49.3 48.8v84.6h-27.8v-84.6c0-26.9-22.1-48.8-49.3-48.8-27.2 0-49.3 21.9-49.3 48.8v84.6H1473V130.6h27.8v15.5c13.4-11 30.6-17.7 49.3-17.7 26.2 0 49.3 12.9 63.3 32.7 13.7-19.7 36.9-32.6 63-32.6zM991.8 90v56.1c13.4-11 30.6-17.7 49.3-17.7 42.6 0 77.2 34.2 77.2 76.3v84.6h-27.8v-84.6c0-26.9-22.1-48.8-49.3-48.8-27.2 0-49.3 21.9-49.3 48.8v84.6h-27.8V90h27.7zm-481.5 40.6l54.3 123.8 54.3-123.8h30.6l54.3 123.8L758 130.6h30.3L718.9 289l.1.3h-30.6l.1-.3-54.4-124.1L579.8 289l.1.3h-30.6l.1-.3L480 130.6h30.3zM1857.6 156c-30.1 0-54.6 24.2-54.6 54s24.5 54 54.6 54 54.6-24.2 54.6-54-24.5-54-54.6-54zm-492.9 0c-30.1 0-54.6 24.2-54.6 54s24.5 54 54.6 54 54.6-24.2 54.6-54-24.5-54-54.6-54zm-499.8 0c-25.3 0-46.6 17.1-52.8 40.2h105.6c-6.2-23.1-27.5-40.2-52.8-40.2z"></path><path id="wehkamp_icon" class="st0" d="M200 0c110.5 0 200 89.5 200 200s-89.5 200-200 200S0 310.5 0 200 89.5 0 200 0zM78.8 131.7H49.2l67.9 156.7-.1.3h29.9l-.1-.3L200 165.6l53.2 122.8-.1.3H283l-.1-.3 67.9-156.7h-29.7L268 254.2l-53-122.5h-30l-53.1 122.5-53.1-122.5z"></path></svg>
        </header>
        <div class="shadow-md rounded overflow-hidden mb-4">
            <div class="bg-[#ff5555] px-8 pt-6 pb-8 text-white">
                <h2 class="text-2xl font-bold">Shopping Cart</h2>
                <div class="mt-3">
                    <div class="flex align-justify full-width type-label-l">
                        <div class="flex-auto pr-2">1x</div>
                        <div class="flex-auto flex-free">
                            <span class="text-capitalize-reset">
                                JACK &amp; JONES JEANS
                                INTELLIGENCE - Slim Fit Jeans
                            </span>
                            <div>
                                <span class="flex-auto text-sm text-gray-900">
                                    Blue,
                                    Size 29-34
                                </span>
                            </div>
                        </div>
                        <div class="pl-2">
                            <div class="text-align-right"></div>
                            <div class="blaze-row no-padding sub-row align-right">
                                <span class="position-relative type-price">89.99</span>
                            </div>
                        </div>
                    </div>
                </div>
                <hr class="my-3" />
                <footer class="Basket__basketFooter___nIEdr">
                    <div>
                        <div class="flex align-justify">
                            <div class="flex-1">Shipping</div>
                            <div class="flex-1 text-right">
                                <span class="position-relative type-price type-label-l">Free</span>
                            </div>
                        </div>
                        <div class="flex align-justify font-bold">
                            <div class="flex-1">Total</div>
                            <div class="flex-1 text-right">
                                <span class="position-relative type-price type-label-l-heading">89.99</span>
                            </div>
                        </div>
                    </div>
                </footer>
            </div>
            <form class="bg-white px-8 pt-6 pb-8">
                <div class="mb-4">
                    <h1 class="text-2xl font-bold">Payment</h1>
                </div>
                <div class="mb-4">
                    <label id="cc-name-label" class="block text-gray-700 text-sm font-bold mb-2">
                        Cardholder Name
                    </label>
                    <div id="cc-name-wrapper"
                         class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                    </div>
                    <p id="cc-name-error" class="text-red-500 text-xs italic mt-1"></p>
                </div>
                <div class="mb-4">
                    <label id="cc-number-label" class="block text-gray-700 text-sm font-bold mb-2">
                        Card Number
                    </label>
                    <div id="cc-number-wrapper"
                         class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                    </div>
                    <p id="cc-number-error" class="text-red-500 text-xs italic mt-1"></p>
                </div>
                <div class="mb-6">
                    <div class="grid grid-cols-2 gap-4">
                        <div class="col-span-1">
                            <label id="cc-expiry-label" class="block text-gray-700 text-sm font-bold mb-2">
                                Expiry Date
                            </label>
                            <div id="cc-expiry-wrapper"
                                 class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                            </div>
                            <p id="cc-expiry-error"  class="text-red-500 text-xs italic mt-1"></p>
                        </div>
                        <div class="col-span-1">
                            <label id="cc-cvc-label" class="block text-gray-700 text-sm font-bold mb-2">
                                CVC
                            </label>
                            <div id="cc-cvc-wrapper"
                                 class="shadow h-12 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                            </div>
                            <p id="cc-cvc-error" class="text-red-500 text-xs italic mt-1"></p>
                        </div>
                    </div>
                </div>
                <div class="flex items-center justify-between">
                    <button id="pay"
                            class="bg-[#ff5555] hover:bg-blue-700 text-white py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                            type="button">
                        Submit
                    </button>
                    <a class="inline-block align-baseline text-sm text-gray-500 hover:text-gray-800" href="#">
                        Cancel
                    </a>
                </div>
            </form>
        </div>
        <p class="text-center text-gray-500 text-xs">
            &copy; @DateTime.Now.Year checkout.wehkamp.nl
        </p>
    </div>
    <script>
        const init = async function () {

            // Initialize SDK
            var sdkClient = new BuckarooHostedFieldsSdk.HFClient("eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MzBaREo0NFRtVDZOdlVuIiwic3ViIjoibV80MmdlaElPUjVZVWZrbWRHIiwic2NvcGUiOiJob3N0ZWRmaWVsZHM6c2F2ZSIsIm5iZiI6MTcxMTUzOTMzOCwiZXhwIjozODg4OTkyMTM4fQ.EQWfcVvlV2AChtWs3yusXkN3mx40dxnmtHwWis4_W_xJi7r5-aV2Y2hfde4I-nJNOL-tDirTSM-jJmpX66UjeJIyGtV_Fbt6jGCFNasGQOyCrUJSyreRfGgCYU1BDADalZ7mCUbzktd51aDQ50AlhpWaFkCO1wI6cma13kkJ5x_fKuEplSpl6TqqPNHPqa5TVg8vQ01oc6BSp_6LsdyhizLr-Wg7A4YPG5_Myuv6UMHiOKQBgkmb8g8CwfU4HIb1rokKxm8amaVTn2aI-tiv1cChPQnkZdOYEpR6kNYgc3rwnvS0rJ3JsKI-f71wSZGIcJVPIdHqGREwjgfBmmOzm8t_xbLYyThccoN-uehtKm9-6Nc7hJ3HS3Uj-MTR_6WXnH_bhnPYtzvy8dtG-hXMAlVhnjCYo59XFeFG4fF1vV1WtgfvqsLv9rkJ7E7omQyCwBU9Q3_zKt7oAJR_JHbepAQkDXwzhlaBC9eqeF9SlQw2k_g7Cloj-rWFuKFS0uEr");

            // Language of appearing errors.
            sdkClient.setLanguage('en');

            // Payment button (Submit)
            let payButton = document.getElementById("pay");
            
            let service = "";
            
            // Start Session
            await sdkClient.startSession(function (event) {
                // Event, CardHolderName, CardNumber, CardExpiry, CVC - error id's
                sdkClient.handleValidation(event, 'cc-name-error', 'cc-number-error', 'cc-expiry-error', 'cc-cvc-error');

                if (payButton) {
                    let disabled = !sdkClient.formIsValid();

                    payButton.disabled = disabled;

                    if (disabled) {
                        payButton.style.backgroundColor = "#ff5555";
                        payButton.style.cursor = "not-allowed";
                        payButton.style.opacity = "0.5";
                    } else {
                        payButton.style.backgroundColor = "";
                        payButton.style.cursor = "";
                        payButton.style.opacity = "";
                    }
                }
              
               service = sdkClient.getService();
            });

            // Styling of all fields.
            let styling = {
                fontSize:"14px",
                fontFamily: 'Consolas, Liberation Mono, Menlo, Courier, monospace',
                textAlign: 'left',
                background: 'inherit',
                color:'black',
                placeholderColor:'grey'
            };

            // Options for CardholderName.
            let chnameOptions = {
                id: "ccname",
                placeHolder: "John Doe",
                labelSelector: "#cc-name-label",
                baseStyling: styling
            };

            // Mount CardholderName and focus in it
            await sdkClient.mountCardHolderName("#cc-name-wrapper", chnameOptions)
                .then(function (cardHolderNameField) {
                    cardHolderNameField.focus();
                });

            // Options for Cardnumber. optional: CardLogoStyling
            let ccOptions = {
                id: "cc",
                placeHolder: "555x xxxx xxxx xxxx",
                labelSelector: "#cc-number-label",
                baseStyling: styling
            };

            // Mount CardNumber.
            await sdkClient.mountCardNumber("#cc-number-wrapper", ccOptions);

            // Options for CVC.
            let cvcOptions = {
                id: "cvc",
                placeHolder: "1234",
                labelSelector: "#cc-cvc-label",
                baseStyling: styling
            };

            // Mount CVC.
            await sdkClient.mountCvc("#cc-cvc-wrapper", cvcOptions);

            // Options for Expiry Date.
            let expiryDateOptions = {
                id: "expiry",
                placeHolder: "MM / YY",
                labelSelector: "#cc-expiry-label",
                baseStyling: styling
            };

            // Mount Expiry Date.
            await sdkClient.mountExpiryDate("#cc-expiry-wrapper", expiryDateOptions);

            // Button to submit payment, and close session: returns SessionId
            payButton.addEventListener("click", async function () {
                // Replace with your payment strategy
                console.log(service); 
                let paymentToken = await sdkClient.submitSession();
                console.log(paymentToken)
            });
        }

        init();
    </script>

</body>

</html>

Hosted Fields

Overview

Key Features

Getting Started

Set up your payment page

Initialize Hosted Fields

ℹ️

Language

Expiry Date Format

Disable Card Logos

Supported credit cards

Validation

ℹ️
The `sdkClient.handleValidation()` function requires parameters in a specific order:

ℹ️
sdkClient.formIsValid() will perform validation on each mounted field resulting in:

Service Detection

Styling

❗️
Important

ℹ️
Note:

Mounting Fields

Overview

Key Features

Getting Started

Set up your payment page

Initialize Hosted Fields

ℹ️

Language

Expiry Date Format

Disable Card Logos

Supported credit cards

Validation

ℹ️The sdkClient.handleValidation() function requires parameters in a specific order:

ℹ️sdkClient.formIsValid() will perform validation on each mounted field resulting in:

Service Detection

Styling

❗️Important

ℹ️Note:

Mounting Fields

ℹ️
The `sdkClient.handleValidation()` function requires parameters in a specific order:

ℹ️
sdkClient.formIsValid() will perform validation on each mounted field resulting in:

❗️
Important

ℹ️
Note: