Klarna Docs - Express button JavaScript library

Express button JavaScript library

Use the methods in the Express button JavaScript library to get the most out of the Express button.

You can find the listed methods in the Klarna.ExpressButton object once the Express button library is loaded and fully executed.

The on method in the Klarna.ExpressButton object lets you register to specific callback methods provided by the Express button. It consists of one mandatory parameter that represents the name of the specific callback being registered, as well as a number of optional properties, depending on which callback is being registered.

The user-authenticated callback on the Klarna.Expressbutton.on method lets you know that the Express button flow has completed.

JAVASCRIPT
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
 })
}

An example of user-authenticated callback on the Klarna.Expressbutton.on method.

In response to the callback, you get the personal details of the authenticated user.

JSON
{
  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",

A sample response to the user-authenticated callback.

In most Express button integrations, the buttons are added to the cart or product page on the initial page load. However, if your page contains dynamic content, for example, a pop-up mini-cart, you can use the refreshButtons method to repaint the parts of a page that contain the Express button. 

The refreshButtons method lets you avoid the contents of the klarna-express-button tag being removed from the page during the repaint.

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

Use the refreshButtons method to repaint a page containing an Express button placement.