Express button solution has been deprecated.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 CheckoutKlarna 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.
<div style="flex: 1; padding: 10px;">
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
})
}
<p>
An example of user-authenticated
callback on the Klarna.Expressbutton.on
method.</p>
</div>
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
*/
Klarna.ExpressButton.refreshButtons()
}
Use the refreshButtons
method to repaint a page containing an Express button placement.