Klarna uses a widget to display available Klarna payment options to the customer. To allow this, you will need to render it on your checkout page alongside any other payment methods you may offer. This is done by first initializing it and then loading the widget.
Best practice: You are able to define what payment methods you want to display in the widget. Be sure to think of how to display them in a way that is aligned with the design of your checkout!
client_token does not have any defined expiry time.
To specify where to place the widget, add a page container on your checkout page.
Note: The Klarna widget requires a minimum width of 280px.
You can get more insight in how the Klarna widget could be placed in the checkout at our demo store.
The name and the Klarna logo placement are managed outside of the Klarna widget. You can use the name and asset_urls provided with the create session response and follow the example shown above when adding the widget in your checkout.
Best practice: You are able to customize the look and feel of the widget according to your style guide. Read more about it here.
For more inspiration of how to use the widget in the right way for your shop, go to the get smoooth handbook.
For a description of what categories that exist and what is included in them, please visit the payment method availability page.
The available payment_method_categories for the current session were provided in the response of the create session call.
Best practice: The load function should be called when rendering your checkout page. That way you can ensure that the widget has loaded in full by the time the customer wants to interact with it or selects Klarna as a payment method.
We know that you want to give customers a great checkout experience. Therefore we have created a functionality that quickly alerts your store when a customer cannot use any of the payment methods in the Klarna widget. This is done through the show_form:true/false field, which is used as a response flag to the load call.
The field indicates whether your store may show the Klarna option or not. This boolean is a part of all callbacks, except for re-authorize. Best practice is therefore that you listen to it all the time.
There are three potential cases that you need to handle based on these response flags:
If show_form: true, and there are no errors in the object returned, Klarna renders the payment options available to the customer in the widget.
This is the standard response, unless the customer is rejected.
If show_form: false, the payment method in the loaded widget will not be offered for this order based on Klarna’s pre-assessment. A rejection message is displayed to the consumer in the Widget.
When Klarna returns a show_form: false, your store cannot offer the selected payment method to this customer. You indicate that by setting up one of the following visual arrangements:
There are two ways of propagating card updates to Klarna. The first is to update the session and the second is to do a load with new details. There is no difference in how the updates are treated, no matter what way you do it. Although the effects of the update is only shown to the consumer in the Klarna widget if a load is done.
Thus you may use load to pass any updates to the Klarna session that might have occurred since the session was created. In the following example, the order information has changed since the consumer has added an item to the cart.