How to Set up Klarna

Klarna is not only a Payment Gateway; we can describe it as a payment service that aims to improve the entire customer journey in your store. We have divided this guide into three topics: How to create an account, How to configure Klarna as a Payment Gateway, and How to set up the design of your store for the on-site messaging.

Create an account and get the important keys for the integration

Go to Klarna’s Business Section and click on the sign-up button. Complete your email, the URL of your store (This means the address of your store in the internet) and the country in which your store is based, then select an estimate of your annual income. In the next screen you will have to select your type of business, the most common option is “None of the above”.

In the next screen in which you need to select your platform, if you don’t see Jumpseller or an “others” option, choose any of the other options, for example: WooCommerce, the setup will be the same regardless of the selected option. Then complete the rest of the questions and your account will be pending until Klarna confirms its creation, usually by email.

After you are able to enter your Klarna Merchant Portal, you will see this screen:

Follow the recommendations such as the two-factor authentication to improve the safety of your account.

Go to the Settings section on the navigation menu and then to the Klarna API Credentials subsection, here you will create the keys needed to connect your store with Klarna Payments.

After creating a new pair of credentials make sure you save the Key and Password in a safe place, this password will only be visible at this stage. If you forget or lose the password you will need to generate a new pair of credentials.

Configure Klarna as a Payment Gateway in your Jumpseller store

Go to your Jumpseller Admin. Panel > Settings > Payments and insert your Klarna API Username (UID) in the Merchant ID field and your Klarna API Password in the Shared Secret field. On this screen you will also find terms and conditions links, you should be the URL of your store + /terms-and-conditions, for example:

https://myjumpsellerstore.com/terms-and-conditions

You can always edit these terms and conditions in you Jumpseller Admin. Panel > Legal.

After saving the setting we strongly recommend creating a real transaction, if you manage to get to the Klarna portal as a customer this is a confirmation that the integration was successful. If after following these steps you see an error on the transaction please contact our support team indicating the URL of your store and ideally attaching a screenshot that evidences the error.

Capture Payments

After a customer creates an order using Klarna in your store, the order status in Jumpseller will be Paid if Klarna authorizes the transaction. An authorized transaction does not mean that your will receive the funds; you will have to manually capture the transaction in the orders management screen in your Klarna account. You will receive the funds only for fully captured orders.

Optional: Set up the on-site messaging

In order to make your customer aware of the Klarna integration, you will be able to add great-looking snippets through your store. The setup might not be simple because it depends on the theme that you installed in your store, all of these vary in structure. Here we will show you how to do it in the Simple Theme but if you need further assistant with the design you can always request a quote to our support team.

We will place the snippets in all of these sections of the store:

• Sitewide (Footer and Header): To make your customers aware of the integration and benefits of Klarna.
• Product Page: It shows conditions and installment values.
• Cart: Consolidates the total value of the order and it shows an installments offer with Klarna.
• FAQ: Klarna information page.

The first step is to install in your store the base code in your Klarna Merchant Portal, go to the On-site messaging section > Installation and copy the first code on the right side of the screen, the second one below we will use later.

This code will allow the other snippets to work. At this point go back to your Jumpseller Admin. Panel > Themes > Code Editor > Templates > Layout. On this page, we will need to find the <body> tag and paste the Klarna base code just below. Make sure you do it below the <body> tag and not the </body> tag, without deleting other code.

Sitewide (Footer and Header)

First of all we will paste the Buy now, pay later with Klarna. placement in the header of our theme. This is the code you will find on the Klarna Placements, I chose the dark theme for this specific placement.

<!-- Placement v2 -->
<klarna-placement
  data-key="top-strip-promotion-auto-size"
  data-locale="en-PT"
  data-theme="dark"
></klarna-placement>
<!-- end Placement -->

In your Code Editor > Partials > header_area.liquid, remove lines 1 and 9 and replace line 5 with the code above.

In the footer, it won’t be necessary to add a placement. You can just add the Klarna logo in your Admin. Panel: Themes > Visual Editor > Edit Settings > Footer.

Product page

In this example, I will use the following snippet to have a notification inside the product page. Please remember that this guide is focused on the Simple theme, other themes might need adjustments.

In your Code Editor > Templates > Product > Default you will need to paste the following code in two places:

 <!-- Placement v2 -->
 
<klarna-placement
  data-key="credit-promotion-badge"
  data-locale="en-PT"
  data-purchase-amount="{{product.price | times: 100 }}"
></klarna-placement>
<!-- end Placement -->

The first place will be below line 43. And then add it below line 134. As always make sure to avoid deleting other code.

If your product has variants with different prices, for example, a product with different sizes and prices, it will be needed to make an advanced adjustment. We would recommend you for this to contact our support to avoid complications from potential mistakes, but if you want to try yourself, you will need to find a callback function that is triggered every time a customer chooses a product variant and in the Price section add these lines:

• Below the price without discount section

$("klarna-placement").data('data-purchase-amount',productInfo.price)
window.KlarnaOnsiteService.push({ eventName: 'refresh-placements' });

• Below the price with discount section

$("klarna-placement").data('data-purchase-amount',productInfo.price_discount)
window.KlarnaOnsiteService.push({ eventName: 'refresh-placements' });

Cart Page

This is the simplest one, copy the following code:

<!-- Placement v2 -->

<klarna-placement
data-key="credit-promotion-badge"
data-locale="en-PT"
data-purchase-amount="{{order.total | times: 100 }}"
></klarna-placement>

<!-- end Placement -->

And paste right below line 125 in your Code Editor > Templates > Payments > Cart.

After all of these changes now your store should display Klarna notifications like this: