payment-gateway payment klarna klarna-widget

How to get the form in the Klarna Payments Widget displayed?

I'm building a kind of sandbox integration of Klarna Payments (to get it working in principle and implement the logic later into a real shop). The first step described in the docu, the session creating, has worked. Now I'm trying to get the Klarna widget displayed:

klarna-widget.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Klarna Widget</title>
</head>
<body>
<script>
    window.klarnaAsyncCallback = function () {
        Klarna.Payments.init({
            client_token: 'evstbGciOiJSUzI1...'
        })
        Klarna.Payments.load(
            {
                container: '#klarna-payments-container',
                payment_method_category: 'pay_later'
            },
            function (res) {
                console.debug(res);
            }
        )
    };
</script>
<script src="https://x.klarnacdn.net/kp/lib/v1/api.js" async></script>
<div id="klarna-payments-container"></div>
</body>
</html>

The current result looks like this:

Klarna Widget without form

Instead of the expected result shown in the documentation:

Klarna Widget form

But the form is not there. How to get it displayed?

UPDATE

Just took a look at the console. There are some warnings and errors:

DevTools failed to load SourceMap: Could not load content for https://x.klarnacdn.net/device-recognition/1f14eaf/main.bundle.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
blob:https://klarna-payments-eu.playground.klarna.com/2ca435b3-87fb-4538-aa91-45c6c94e9243:16

WebSocket connection to 'wss://127.0.0.1:5939/' failed: Error in connection establishment: net::ERR_CONNECTION_CLOSED
td_zM @ blob:https://klarna-payments-eu.playground.klarna.com/2ca435b3-87fb-4538-aa91-45c6c94e9243:16
(anonymous) @ blob:https://klarna-payments-eu.playground.klarna.com/2ca435b3-87fb-4538-aa91-45c6c94e9243:14

(13) WebSocket connection to '<URL>' failed: WebSocket is closed before the connection is established.
...

klarna widget socket error

But the res object seems fine:

{show_form: true}
show_form: true
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

Solution

To answer your question about how to get the form in the Klarna Payments Widget displayed?, you already have it working!

Why it is not working as expected? Let me share few details about integration.

Following is the screenshot depicting Klarna's payment method workflow:

as mentioned in the detailed guide, when user opens checkout page:

Your application creates session with Klarna
Klarna payment selection widget is displayed
User fills in form, selects payment method and completes the order.

Now, when you first create a session with Klarna, your session-get response will have all available payment categories available for your merchant account.

{
   "session": {
       "purchase_country":"de",
       "purchase_currency":"eur",
       "client_token":"eyJhbGciOiJSUzI1...",
       ...,
       "payment_method_categories":[{
          "identifier":"pay_now",
          ...
       },
       {
          "identifier":"pay_over_time",
          ...
         }
       },
       {
          "identifier":"pay_later",
          ...
          }
       }]
    }
}

after that same client_token, is used by JS library to load Klarna widget, and in load call you need to specify payment method to display on the widget, however it could be only one of the available categories received in the session response.

In your case, you are displaying pay_later payment method and as you mentioned in updates to your question, it displays widget like:

also, callback handler passes in load call will be invoked with show_form to true if form was displayed, false otherwise (incase of network error/ account error/ invalid payment method). You can also inspect your container and check network log to verify klarna widget was loaded in the iframe.

Lastly, in order to answer your question about displaying form similar to one on demo store, you can use payment methods received in the session create response and for each method display accordion (expand/collapse) control which on expand will load widget for respective payment method.