Klarna Web SDK v1

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

Integration Metadata for tracking integrator and originator information

For Acquiring Partners and platforms that need to track which integration and partner is using the SDK, the integrationMetadata field can be used:

<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]",
    integrationMetadata: {
      integrator: {
        name: "AcquiringPartner",
        moduleName: "SubIntegration",
        moduleVersion: "2.0",
        sessionReference: "xxx",
      },
      originators: [
        {
          name: "ecommerceCompany",
          sessionReference: "5555-474",
          moduleName: "ecommercePlugin",
          moduleVersion: "1.0",
        },
      ],
    },
  });

  // You can also update integration metadata dynamically:
  await Klarna.Config.IntegrationMetadata.setIntegratorSessionReference("new-session-ref");

  await Klarna.Config.IntegrationMetadata.setOriginators([
    {
      name: "ecommerceCompany",
      sessionReference: "5555-474",
      moduleName: "ecommercePlugin",
      moduleVersion: "1.0",
    },
    {
      name: "anotherMerchant",
      sessionReference: "9999-123",
      moduleName: "shopifyPlugin",
      moduleVersion: "2.1",
    },
  ]);
</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.