Getting Started with a Basic Payment Form

Create a basic form

To create a payment form, you will require the LwHostedFields object; it is a key component of the Lemonway SDK. The LwHostedFields object lets you define individual field configurations in your payment form.

This includes details such as:

• field type
• validation rules
• styling options

Once the fields are configured, they can be mounted to your webpage, integrating the payment form into your website.

Ideally, the SDK should be lazy-loaded when the end user reaches the payment page. This means that the SDK is only loaded when it is required, which generally improves website performance. See SDK Bundle - Integration and SSR.

Basic form example

In the following demo.js example, the LwHostedFields object is imported from the SDK in a script section of index.html.

Optional CVV

By default, the CVV field is required. For payment flows that do not require CVV, such as one-click payments, you can set requireCvv to false:

const config = {
    server: { webkitToken: 'your-token' },
    client: {
        requireCvv: false,
        cardNumber: { containerId: 'card-number' },
        expirationDate: { containerId: 'expiration-date' },
        holderName: { containerId: 'holder-name' },
    }
};

const hostedFields = new LwHostedFields(config);
hostedFields.mount();

When requireCvv is falseThe CVV iframe will not be mounted, and CVV validation will be skipped during form submission.

Once the LwHostedFields object is set up, and the fields are configured, they can be mounted to your webpage using the mount() method. This will integrate the payment form into your website.

The LwHostedFields class can be imported to your application (in index.html) as follows:

Prod

<script src="https://webkit.lemonway.fr/hosted-fields/sdk/@lw/hosted-fields-sdk-2.0.0.js" integrity="sha384-HE1ZALjbEZrCWdWTvn/y8j5sIGJbGql/Aa8iXwQrDdNwOFTigxLgBxJv5Qd0H7/K-" crossorigin="anonymous"></script>

Sandbox

<script src="https://sandbox-webkit.lemonway.fr/hosted-fields/sdk/@lw/hosted-fields-sdk-2.0.0.js" integrity="sha384-oP56IGQvqCCNWXYmN1StTtGnUwruuc3wtzpvts3kVjI+I90TTWjwNDxOou2AW+Gx" crossorigin="anonymous"></script>

We recommend lazy-loading the SDK only when the end user reaches the payment page, rather than eagerly loading it with the script tag.

Prod

let LwHostedFields = (await import("https://webkit.lemonway.fr/hosted-fields/sdk/@lw/hosted-fields-sdk-2.0.0.js")).default

Sandbox

let LwHostedFields = (await import("https://sandbox-webkit.lemonway.fr/hosted-fields/sdk/@lw/hosted-fields-sdk-2.0.0.js")).default

iframes, Event hooks, and Toggle classes

Lemonway ensures that user card data is securely entered on a Lemonway-hosted page, and not exposed to third-party scripts. The data is loaded within an iframe on your website and is transmitted securely to Lemonway when the card is submitted. This ensures the protection of sensitive card information throughout the transaction process.

To enable communication between your website and the Lemonway iframe, you can use the Lemonway SDK's event hooks and toggle classes features.

• Event hooks: Permit you to listen for specific events within the Lemonway iframe — for example, when the user enters (onFocus) or leaves (onBlur) an iframe, or when the form or an individual iframe's content becomes valid or invalid. Read more...
• Toggle classes: Allow you to dynamically modify the appearance of fields based on the iframe's state. In the first example, index.html styled the lw-hosted-fields-valid CSS class because the SDK automatically toggles this class on the container element (the <div> tag) when the iframe content becomes valid. Read more...

By integrating Event hooks and Toggling classes with the Lemonway iframe, you can deliver a payment experience that is both straightforward and secure. Likewise, you maintain full control over the appearance and behaviour of your website.