Monday, 16 August 2021

How to get Klarna Pay Over Time widget displayed correctly?

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-

enter image description here

-ACTUAL (MISSING BUTTON)-

enter image description here

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": "test@gmail.com",
  "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);
      })
  1. 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.


from How to get Klarna Pay Over Time widget displayed correctly?

No comments:

Post a Comment