SDK Buddle - Integration and SSR

The SDK is available in three different formats: ESM, IIFE, and UMD.

• ESM
• IIFE
• UMD

📘

Note

Lemonway does not own and is not resposible for the content or maintanance of external websites listed on this page.

SDK Formats

ESM (EcmaScript Module)

The standard format can be called from HTML directly in most modern web browsers.

<script type="module">
    import LwHostedFields from 'hosted-fields-sdk';
    const hostedFields = new LwHostedFields(config);
</script>

The ESM format has a larger file size, but has several benefits:

• Can be bundled with your application using tools that support tree-shaking (for example, Rollup or Webpack).
• Can be used for Server-Side Rendering (SSR).
• Can be lazy-loaded (SDK is not loaded until the user navigates to payment page).

Sandbox Example:

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

IIFE (Immediately Invoked Function Expression)

This format is suitable for adding a <script> tag in your HTML. The SDK will be loaded immediately into the LwHostedField namespace.

<script src="https://sandbox-webkit.lemonway.fr/hosted-fields/sdk/@lw/hosted-fields-sdk-2.0.0.iife.js" integrity="sha384-W/usF6qhpdZM22UKBWPzddv8pasYds3fP2NJtFmNvak/15X4uMULJRU6DyIL1e4s" crossorigin="anonymous"></script>
<script>
    const hostedFields = new LwHostedFields(config);
</script>

UMD (Universal Module Definition)

• The format works for both front-end and back-end. Usually used as a fallback for the IIFE format.

<script src="https://sandbox-webkit.lemonway.fr/hosted-fields/sdk/@lw/hosted-fields-sdk-2.0.0.iife.js"></script>
<script>
    const hostedFields = new LwHostedFields(config);
</script>