How to get Klarna Pay Over Time widget displayed correctly?

Question

I'm integrating Klarna in a sandbox environment that is tied to Adyen. I have followed the docs precisely but am having an issue where there is no "continue" button showing in the widget thus blocking the checkout process.

-EXPECTED-

-ACTUAL (MISSING BUTTON)-

Code to re create:

Post to: https://checkout-test.adyen.com/v67/payments

{
  "merchantAccount": "MERCHANTLLC",
  "reference": "123",
  "paymentMethod": {
    "type": "klarna_account"
  },
  "amount": {
    "currency": "USD",
    "value": 18210
  },
  "shopperLocale": "en_US",
  "countryCode": "US",
  "telephoneNumber": "1111111111",
  "shopperEmail": "[email protected]",
  "shopperName": {
    "firstName": "John",
    "lastName": "Doe"
  },
  "returnUrl": "http://someurl.com",
  "lineItems": [
    {
      "quantity": 1,
      "amountExcludingTax": "16900",
      "taxPercentage": "775",
      "description": "asdfasdf",
      "id": "123",
      "taxAmount": 1310,
      "amountIncludingTax": "18210",
      "productUrl": "http://producturl.com"
    }
  ]
}

which returns the client_token: "ABC123". That token is then used to load the widget via the klarna docs:

 window['Klarna']['Payments'].init({
      client_token: 'ABC123'
    })
    window['Klarna']['Payments'].load({
      container: '#klarna-payments-container',
      payment_method_category: 'pay_over_time',
      instance_id: "klarna-payments-instance"
    },
      function (res) {
        console.log(res);
      })

3. What is returned from the callback is {show_form: true} and the widget loads with the ACTUAL (MISSING BUTTON) picture above. What am i missing here?? I don't understand why I don't have a continue button showing up in the widget. This button is what then authorizes the user in Klarna, takes billing info, etc. Any help would be greatly appreciated! The goal is to get the 'Continue' button showing.

Answer 1

Answering my own question after speaking to the Klarna team. On the dev side you need to create your own button and call the 'Authorize' endpoint. Documentation can be found here: https://developers.klarna.com/documentation/klarna-payments/integration-guide/authorize/