Express Checkout on SAP Commerce Cloud

This guide provides step-by-step instructions to install and configure the Klarna On-Site Messaging (KOSM) add-on for SAP Commerce.

4 min read

Use Cases

Express Checkout from cart and mini cart

The Express Checkout button is available on the Cart page and Mini Cart popup.
Clicking the button sends Klarna an authorization request with cart details.
After validation:
- A popup prompts customers to input their phone number and verification code.
- Klarna responds with an authorization token, which redirects customers to the merchant's site.

Express Checkout from PDP

The Express Checkout button on PDP creates a new session cart regardless of any existing cart.
Upon clicking:
- The selected product is added to the new cart.
- Cart details are sent to Klarna in the payload for further processing.

Multistep checkout

Suitable for merchants with an Order Review page.
Requires two steps:
1. 2.1.
  Authorize call: Sends cart details and receives a client token.
2. 2.2.
  Finalize call: Converts the client token into an authorization token.
Customers can modify their details (for example, address) on the review page. Acknowledgeable popups are displayed if significant cart value changes occur.
Use the autoFinalize: false parameter during the authorize call to enable multistep checkout.

Integration requirement

Note:

Delivery mode is not part of Klarna's profile. Merchants must programmatically assign a delivery mode based on the selected shipping address.
Redirect customers to the Order Review page before order placement.

Key functionalities

Finalize and create order

Multistep checkout flow:

1.
Customer clicks Place Order, initiating the finalize call using the client token from the authorize call.
2.
Klarna provides an authorization token in the response, completing the payment flow.
3.
Updated order details are submitted during the finalize call, ensuring accuracy in payment.

Collect shipping address

The collectShippingAddress parameter governs whether Klarna collects and shares the shipping address:

true:
- Klarna provides a shipping address, which is applied as both billing and delivery addresses in the cart.
- Guest customers are created using the email provided.
false:
- Customers must add their address on the merchant's site.
- Logged-in customers skip re-entering payment details, as Express Checkout remains preselected.
- Guest customers without Klarna-provided email addresses are redirected to the login page.

Recommended for integration

Note:

Set collectShippingAddress to true for a seamless Express Checkout experience.

Installation and activation

Add-on installation

Express Checkout does not require a separate installation if Klarna is already integrated. However, ensure:

1.
Perform a clean build and system update in the SAP Commerce Backoffice.
2.
Validate the inclusion of the KlarnaExpCheckoutConfig table in the database schema.

Mandatory code changes

Update the storefront extension files to enable Express Checkout functionality.

1. Update master.tag

Add the following snippet to load Klarna's script and configure Express Checkout buttons:

JSP

1 2 3 4 5

<c:if test="${isKlarnaExpCheckoutEnabled}">
    <input type="hidden" name="kecButtonTheme" value="${kecButtonTheme}">
    <script src="${fn:escapeXml(scriptUrlKEC)}" async></script>
</c:if>

2. Update productDetailsPanel.tag

Add code to display the Express Checkout button on the PDP:

JSP

1 2 3 4 5 6

<c:if test="${isKlarnaExpCheckoutEnabled}">
    <div id="klarna_exp_checkout_container_default">
</div>

</c:if>

3. Update cartDisplay.jsp and cartPopup.jsp

Embed code for button visibility on the Cart page and Mini Cart:

JSP

1 2 3 4 5 6

<c:if test="${isKlarnaExpCheckoutEnabled}">
    <div id="klarna_exp_checkout_container_in_cartpopup">
</div>

</c:if>

4. Update acc.checkout.js

Prevent duplicate form submissions by commenting out:

JSP

1 2

// $('#placeOrderForm1').submit();

Configuration

Configure Express Checkout in Backoffice

1.
Navigate to SAP Commerce Backoffice > Klarna > Express Checkout.

1.
Create a new Express Checkout configuration:

Fill in fields like Code, Placements, Theme, and Button Shape.
Save the configuration.

Map Express Checkout to common configurations

1.
Go to Klarna > Common Configuration.
2.
Assign the newly created Express Checkout configuration under Express Checkout Configuration.
3.
Save the changes.

Integration requirement

Note:

Ensure active Klarna Payments (KP) configuration exists for the same base store, as Express Checkout relies on Klarna Payments settings for order creation.

Express Checkout configuration fields

Attribute	Mandatory	Description
Code	Yes	Input any name/code. This will be the internal reference used to recognize and manage Express Checkout configuration within SAP Commerce.
Active	Yes	Check to activate Express Checkout configuration; leave unchecked for it to remain inactive.
Button Theme	No	Color theme of the Express Checkout button: default/light/dark
Button Shape	No	Shape of the Express Checkout button: default/rect/pill

Jump to section...