#StackBounty: #payment-gateway #payment #klarna #klarna-widget How to get the form in the Klarna Payments Widget displayed?

Bounty: 100

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>
https://x.klarnacdn.net/kp/lib/v1/api.js
<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__()


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.