Interface KlarnaSDK

Function to initialize the Klarna SDK asynchronously.

Including Klarna Web SDK

The Klarna Web SDK follows [JavaScript module] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) 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/v2/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. The products array should be updated according to your needs, ensuring that only the utilized products are specified for the best performance:

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

  const Klarna = await KlarnaSDK({
    clientId: "[client-id]",
    products: ["PAYMENT"],
  });

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

For Acquiring Partners or integrators with complex account setups

For Acquiring Partners or integrators with complex account setups, the partnerAccountId field can be specified to refer to a specific Klarna Partner Account:

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

  const Klarna = await KlarnaSDK({
    clientId: "[client-id]",
    products: ["PAYMENT"],
    partnerAccountId: "[partner-account-id]",
  });

  // Klarna SDK ready to be utilized
  // Klarna.Payment.button().mount('#payment_container')
</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/v2/klarna.mjs");
Copy

Supported browsers:

Klarna Web SDK 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] (https://browsersl.ist/#q=last+2+versions%2C+not+dead%2C+>+0.5%25%2C+Firefox+ESR%2C+iOS+>+10). Ensure that your usage of the SDK aligns with these browsers to guarantee full functionality.