[FIXED] How to load (multiple) defined Klarna payment methods?

Issue

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.

The example in the documentation shows, how to load one payment method (pay_later / invoice).

Klarna.Payments.load({
    container: '#klarna-payments-container',
    payment_method_category: 'pay_later'
  }, function (res) {
    console.debug(res);
})

I tried the same with pay_now, but it didn't work (Message "Payment method not available" on the page and {show_form: false} in the res object). And actually I want to see a form with three payment methods: pay_now, pay_later, and pay_over_time.

I took a look at the documentation of the load(). My expectation was to find a parameter like payment_method_categories. But the method only has payment_method_category and it needs to be a string...

How to get a defined list of Klarna payment methods available and loaded?

Probably some settings are in the Klarna backend / "control center" (Playground) or an API call for making the methods available are / is needed. If so, what needs to be done and how to do this?

Solution

The Klarna Payments documentation is a bit confusing or I simply misunderstood it. Anyway, I thought, that the widget provides the (complete) form and that by following its steps I'm going to get the payment form. It's wrong. The widget only displays the block(-s) with the information about the payment method(-s). The actual form (the radio buttons and one or more buttons for the authorize call etc.) a concern of the implementer.

To get multiple defined Klarna payment methods following steps are needed:

1 The methods need to be activated by Klarna for this (test) merchant account.

The available methods are listed in the response of the session initialization call (POST /payments/v1/sessions):

{
    "session_id": "...",
    "client_token": "...",
    "payment_method_categories": [
        {
            "identifier": "direct_bank_transfer",
            ...
        },
        {
            "identifier": "pay_later",
            ...
        },
        {
            "identifier": "pay_over_time",
            ...
        },
        ...
    ]
}

2 Load the single payment blocks into separate HTML containers:

<script>
window.klarnaAsyncCallback = function () {
    Klarna.Payments.init({
        client_token: CLIENT_TOKEN
    });
    Klarna.Payments.load(
        {
            container: '#klarna-payments-container1',
            payment_method_category: 'pay_later'
        },
        function (res) {
            console.debug(res);
        }
    );
    Klarna.Payments.load(
        {
            container: '#klarna-payments-container2',
            payment_method_category: 'pay_over_time'
        },
        function (res) {
            console.debug(res);
        }
    );
    Klarna.Payments.load(
        {
            container: '#klarna-payments-container3',
            payment_method_category: 'direct_bank_transfer'
        },
        function (res) {
            console.debug(res);
        }
    );
};
</script>
<div id="klarna-payments-container1"></div>
<div id="klarna-payments-container2"></div>
<div id="klarna-payments-container3"></div>

The result should be look like this:

That's it. No visible form elements are provided (meaning: it is already the correct result). The implementer is responsible for the form and can now freely create and decorate a custom one.

Answered By - automatix

Answer Checked By - Candace Johnson (PHPFixing Volunteer)