This is the interface definition of the Klarna.mjs WebSDK.

The SDK bundles all Klarna products, Pay with Klarna, Sign-in with Klarna, and Conversion Boost products.

Including Klarna.mjs

The Klarna.mjs follows JavaScript module approach and should be included in places where you need to have a reference to the SDK such as while rendering any components or initiating a payment flow. The script should always be loaded directly from https://js.klarna.com/web-sdk/v1/klarna.mjs, rather than included in a bundle or hosted yourself.

Initiating the SDK with credentials

Klarna Web SDK can be imported directly as JS module:

<script type="module">
  const { KlarnaSDK } = await import("https://js.klarna.com/web-sdk/v1/klarna.mjs")

  const Klarna = await KlarnaSDK({ 
    "clientId": "[client-id]",
    "accountId": "[account-id]"
  })

  // Klarna SDK ready to be utilized
  // Klarna.Payment.button().mount('#payment_container')
</script>
Copy

You can also load the module dynamically when required with following approach:

<script type="module">
  async function enableKlarnaPayment() {
    const { KlarnaSDK } = await import("https://js.klarna.com/web-sdk/v1/klarna.mjs")

    const Klarna = await KlarnaSDK({ 
      "clientId": "[client-id]",
      "accountId": "[account-id]"
    })

    // Klarna SDK ready to be utilized
    // Klarna.Payment.button().mount('#payment_container')
  }

  // invoke the function when required
  enableKlarnaPayment()
</script>
Copy

Loading SDK with bundlers

Since the SDK is offered as JS a module, you can import the module directly in any JavaScript file. However, module bundlers such as webpack / rollup will try to load the library while compiling which is not possible since its loaded from a CDN and not as npm module. To avoid any errors, please use appropriate ignore mechanism for respective bundlers. For webpack, the syntax will be following:

const { KlarnaSDK } = await import(/* webpackIgnore: true */ "https://js.klarna.com/web-sdk/v1/klarna.mjs")
Copy

Supported browsers:

Klarna.js supports the following set of browsers:

• the last 2 versions of all browsers (not including those considered 'dead'),
• any browser used by more than 0.5% of people,
• Firefox Extended Support Release (ESR),
• iOS versions greater than 10.

You can see the full supported list here. Ensure that your usage of the SDK aligns with these browsers to guarantee full functionality.