0

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__()
automatix
  • 14,018
  • 26
  • 105
  • 230
  • 1
    did you check in the console? Klarna must have returned some error if form is not displayed: https://developers.klarna.com/documentation/klarna-payments/integration-guide/present-klarna-widget/#2-5-receive-response-from-load-call – Dipen Shah Oct 15 '20 at 02:07
  • @DipenShah Thank you for the hint! Yes, there are actually an error. Please see the updated question. – automatix Oct 15 '20 at 11:26
  • error doesn't say much. Could you please check what war `res` value in load callback function? Also I believe correct form is displayed for `pay_later`, may be you want to add multiple payment options instead of just one like: `"payment_method_categories": [ "pay_later", "pay_now" ]` – Dipen Shah Oct 15 '20 at 11:44
  • @DipenShah Seems to be OK: `{show_form: true}`. – automatix Oct 15 '20 at 12:46
  • That mean correct form is displayed. Let me ask this, what are you expecting to display? – Dipen Shah Oct 15 '20 at 12:49
  • I'm expecting a form like in the [documentation](https://developers.klarna.com/documentation/klarna-payments/integration-guide/present-klarna-widget/#2-3-add-a-container-on-your-page) (https://i.stack.imgur.com/Ftue6.png). In my case it should contain only one pink Klarna: `Pay later.` (for the invoice payment). – automatix Oct 15 '20 at 13:12
  • I believe that is wrong screenshot as clearly you can see there are multiple payment methods in the screenshot. – Dipen Shah Oct 15 '20 at 13:17
  • Yes, the screenshot is wrong, but I still should see one payment option -- and it's not displayed. – automatix Oct 15 '20 at 14:00
  • No but after `pay_later` option is chosen, you should procced with next step which is user clicks on `BUY` or `Checkout` and app proceeds with authorization: https://developers.klarna.com/documentation/klarna-payments/integration-guide/authorize/. – Dipen Shah Oct 15 '20 at 14:18
  • Yes the `authorize` call is also successful. Actually the whole process works and I get an order saved and displayed in the [Klarna Playground](https://playground.eu.portal.klarna.com). I'm only not getting the form. But maybe it's because I'm `load`ing only one method? So there is nothing to chose among and hence no need for a form? Maybe that is the reason, why no form is displayed? – automatix Oct 15 '20 at 14:45
  • Well form is already being displayed for pay later payment type and in your merchant account only supports "pay after 14 days method" ( I hope I didn't misunderstood German) so there is nothing to select. If you look closely in network tab, you will see form is loaded in iframe. I can explain it further as an answer if you like. – Dipen Shah Oct 16 '20 at 01:47
  • Thank you for the explanation and, yes, sure, an answer is a nice idea. – automatix Oct 16 '20 at 06:29
  • added an answer, I did try to keep it short but let me know if I missed anything or if you still have confusion on anything. – Dipen Shah Oct 17 '20 at 06:51

1 Answers1

2

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:

enter image description here

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

  1. Your application creates session with Klarna
  2. Klarna payment selection widget is displayed
  3. 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:

enter image description here

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.

Dipen Shah
  • 25,562
  • 1
  • 32
  • 58
  • Checking in to see if anyone is experiencing a similar issue.. I'm able to get to step 2) Klarna payment selection widget is displayed - but theres no form for a user to enter any information. It's as though the widget is purely view only, displaying the amounts to pay over time. Is this to be expected? I feel like there should be a button to enter customer data? – emarel Aug 11 '21 at 05:10
  • Which payment method are you using? – Dipen Shah Aug 11 '21 at 12:04
  • payment_method_category: 'pay_over_time'. I appreciate your help! – emarel Aug 12 '21 at 00:55
  • To add: The widget shows the amount that will be paid for each interval with terms and conditions but there is no button to continue or purchase where usually what comes after is a modal to enter phone number to get a code, enter billing info, etc. – emarel Aug 12 '21 at 01:06
  • I went ahead and published a question here in detail: https://stackoverflow.com/questions/68776093/how-to-get-klarna-pay-over-time-widget-displayed-correctly – emarel Aug 13 '21 at 17:14
  • I went ahead and added a bounty for your insight. Please let me know if you can help with this issue – emarel Aug 15 '21 at 21:15
  • Hey @emarel sorry for not replying earlier, I am super busy with my new job so couldn't take a look but if time permits will take a look, but I am sure other members in the community will be able to help. – Dipen Shah Aug 16 '21 at 16:27
  • Thanks for the response! I actually just figured it out so all good – emarel Aug 17 '21 at 04:40
  • That is awesome, btw I believe you should post answer to your question and mark it as accepted answer that way other people will not have to struggle with same issue. – Dipen Shah Aug 17 '21 at 14:35