Express button JavaScript library

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.

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

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

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

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.

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