Klarna Docs - JavaScript API

JavaScript API

The Express Button JavaScript library includes a number of methods that merchants can leverage to get the maximum amount of functionality from the Express Button product.

These methods can be found on the `Klarna.ExpressButton` object after the Klarna Express Button lib has been loaded and fully executed.

The 'on' method allows merchants to register to specific callback methods provided by the Express Button. It has one mandatory parameter that represents the name of the specific callback being registered as well as an undetermined number of optional properties - dependent on which callback is being registered.

The 'user-authenticated' callback on the 'on' method lets the merchant know that the Express Button flow has completed, as well as providing pre-fill data for the user who just completed the flow.

window.klarnaExpressButtonAsyncCallback = function(){
 Klarna.ExpressButton.on('user-authenticated', function (callbackData) {
    // ... implement pre-fill logic here
    // callbackData (see schema below) can be used to map user properties
    // to already existing fields/forms in your checkout flow

Example of data returned in the callback:

  first_name: "John",   
  last_name: "Doe",
  email: "example@example.com",
  date_of_birth: "1990-01-01",
  phone: "+18004444444",
  address: {
    street_address: "3100 Pear Road",
    street_address2: null,
    postal_code: "93309",

For the base integration, it is expected that most merchants will only need Express Button placements added to the page on initial page load. In which case, this method is not necessary for the vast majority of Express Button integrations.

However, some merchants may have dynamic content on their page (ex. a pop-up mini-cart), and they may look to re-paint certain parts of their page which may include the Express Button. Normally, this behavior would lead to the content within the <klarna-express-button /> tag to be removed from the page. To mitigate this problem, a method is exposed - 'refreshButtons' - which allows merchants to refresh Express Button placements if there has been a re-paint on a part of the page where an Express Button placement might exist.

const someRepaintingFunction = () => {
  * Put relevant merchant-specific code here for repainting the page
  * Be sure to call 'refreshButtons' method after re-paint has completed