Klarna Docs - Express button JavaScript library

Express button JavaScript library

Express button solution has been deprecated. If you're interested in the a Express Checkout experience for Klarna payments, you can learn about our new solution Klarna Express Checkout

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

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.

  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.

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

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