Widget Installation for Inline Workflow

This workflow describes how to install the Klarna widget and complete a successful transaction. For a description of a successful transaction with the Klarna widget already installed, see Inline Session Workflow.

Add the container for the Klarna widget to the HTML for your checkout page. This is a one-time operation and provides an iframe into which the Klarna widget will be dynamically loaded when the Klarna widget is initialized.

<div id=#klarna_container"></div>

When the customer displays your checkout page, send a create session request to Cybersource. The sessions service creates a unique customer session and returns a pre-approval token. See Creating a HOP Session and Updating a Session.

Present the available payment methods to the customer. When the customer chooses the Klarna payment method on your checkout page, install the Klarna software developer kit (SDK) and initialize it by calling Klarna.Payments.init
. In the request, set the client token field to the value of the pre-approval token returned by Cybersource.

Initializing the Klarna SDK can take up to 10 seconds. Cybersource recommends that you try to initialize the SDK every three seconds, up to a maximum of three attempts.

For additional information about initializing the Klarna SDK, see:

https://docs.klarna.com/klarna-payments/in-depth-knowledge/klarna-payments-sdk-reference/

Klarna.Payments.init({client_token: '<%=processorToken%>'})
    if (count < 3)
    {    
        setTimeout(initializeKlarna.bind(null, count), 3000);
    }
    else
    {
        showError()
    }

Load the Klarna widget into the Klarna container by calling Klarna.Payments.load
and specifying the Klarna container.

Klarna.Payments.load({
    container: "#klarna_container",
    (...)
})

Display the Klarna payment options on your checkout page. The

show_form = true

statement dynamically updates the payment options in the Klarna widget.

if (res["show_form"] == true)
{
    logging("Klarna Available Payment Option");

    document.getElementById("auth_button").innerHTML =
    "<br><button type=\"button\" name=\"buy\"
    onclick=\"authorizeKlarnaOrder();\">Pay</button>"
}
else
{
    logging("Klarna Not Available As A Payment Option");
}

When the customer chooses one of the Klarna payment options:

Send an update session request to Cybersource with available customer information. See Creating a HOP Session and Updating a Session.

Call Klarna.Payments.authorize
to authorize the order with Klarna. In the call, include an empty JSON object. For additional information about Klarna authorizations, see:

https://docs.klarna.com/klarna-payments/api-call-descriptions/authorize-the-purchase/

Klarna.Payments.authorize({}, function(res) {
    var auth_token = res["authorization_token"];
    var isApproved = res["approved"];
    var show_form = res["show_form"];
})

Klarna validates the customer’s information and determines whether to authorize the order. When Klarna authorizes the order, Klarna returns an authorization token.

Send an authorization request to Cybersource. Set the pre-approval token field to the value of the authorization token returned by Klarna. See Authorize a Payment.

When Cybersource approves the authorization, send a capture request to complete the purchase. See Capture a Payment.

When the authorization response indicates that the purchase is pending, send a check status request every hour until the payment status changes. See Check a Request Status.

Widget Installation for Inline Workflow

Figure: