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.

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

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's required, this generally improves website performance. Consult SDK Bundle - Integration and SSR

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 following:

Prod

<script src="https://webkit.lemonway.fr/hosted-fields/sdk/@lw/hosted-fields-sdk-2.0.0.iife.js" integrity="sha384-W/usF6qhpdZM22UKBWPzddv8pasYds3fP2NJtFmNvak/15X4uMULJRU6DyIL1e4s" crossorigin="anonymous"></script>

Sandbox

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

We recommend you lazy load the SDK only when the end-user reaches the payment page, instead of 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.iife.js")).default

Sandbox

let LwHostedFields = (await import("https://sandbox-webkit.lemonway.fr/hosted-fields/sdk/@lw/hosted-fields-sdk-2.0.0.iife.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 toggling class features.
  • Event hooks: Permits 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 content becomes valid or invalid. Read more...
  • Toggling classes: is another feature of the Lemonway SDK that allows you to dynamically modify the appearance of the fields based on the iframes state. In the first example, our index.html styled the lw-hosted-fields-valid CSS class because the SDK will automatically toggle this class on the container element (the <div> tag) when the iframe content become 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.