#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:


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Klarna Widget</title>
    window.klarnaAsyncCallback = function () {
            client_token: 'evstbGciOiJSUzI1...'
                container: '#klarna-payments-container',
                payment_method_category: 'pay_later'
            function (res) {
<div id="klarna-payments-container"></div>

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?


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

WebSocket connection to 'wss://' 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
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

Your email address will not be published. Required fields are marked *

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