How to Set up Klarna

Klarna is a payment method that allows payments in X amount of days and installments, depending on the customers’ choice. This guide is divided into four sections: creating an account, configuring Klarna Payments as a payment gateway, capturing payments, and setting up on-site messaging.

Create an account and get the important keys for the integration

To sign up for Klarna’s Business Section, head to the Klarna website and click on the sign-up button. You’ll need to provide your email, the URL of your store (i.e., the address of your store on the internet), the country in which your store is based, and an estimate of your annual income. On the next screen, you’ll need to select your type of business: the most common option is “None of the above.”

On the following screen, you’ll need to select your platform. If you don’t see Jumpseller or an “Others” option, simply choose any of the other options (such as WooCommerce) - the setup process will be the same regardless of the selected option. Complete the remaining questions, and your account will be pending until Klarna confirms its creation, usually via email.

Once you’re able to log in to your Klarna Merchant Portal, you’ll see the following screen:

To improve the safety of your account, we recommend following security measures such as enabling two-factor authentication.

To set up your store with Klarna Payments, navigate to the Settings section on the navigation menu and then go to the Klarna API Credentials subsection. Here, you can create the keys needed to connect your store with Klarna Payments.

Once you’ve created a new pair of credentials, it’s important to save both the Key and Password in a secure location. Please note that the Password will only be visible at this stage. If you forget or lose the Password, you’ll need to generate a new pair of credentials.

Configure Klarna as a Payment Gateway in your Jumpseller store

To connect your Jumpseller store with Klarna Payments, go to your Jumpseller Admin Panel and navigate to Settings > Payments. Then, 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’ll also find links for the terms and conditions. These links should be in the format of your store’s URL + “/terms-and-conditions.” For example: https://myjumpsellerstore.com/terms-and-conditions

If needed, you can always edit these terms and conditions by going to your Jumpseller Admin Panel and clicking on Legal.

After saving the settings, we strongly recommend creating a test transaction. If you can successfully navigate to the Klarna portal as a customer, this is confirmation that the integration was successful. If, after following these steps, you encounter an error during the transaction, please contact our support team. Be sure to include the URL of your store and, if possible, attach a screenshot that illustrates the error.

Capture Payments

Once a customer creates an order using Klarna in your store, the order status in Jumpseller will be marked as Paid if Klarna authorizes the transaction. However, please note that an authorized transaction does not guarantee that you will receive the funds. You must manually capture the transaction in the orders management screen in your Klarna account to receive payment. Only fully captured orders will result in the release of funds.

Optional: Set up the on-site messaging

To inform your customers about the Klarna integration, you can add visually appealing snippets to your store. However, the setup process may not be straightforward, as it depends on the theme you’ve installed. Each theme has its own unique structure. In this guide, we’ll show you how to add snippets in the Simple Theme. If you require additional assistance with design, please don’t hesitate to request a quote from our support team.

We recommend placing the Klarna snippets in the following sections of your store:

1. Sitewide (Footer and Header): This will inform your customers about the Klarna integration and its benefits.
2. Product Page: Display the Klarna conditions and installment values here.
3. Cart: Consolidate the total value of the order and provide an installments offer with Klarna to the customer.

By adding Klarna snippets in these sections, you can ensure that your customers are well-informed about the payment options available to them, and it can potentially increase the likelihood of them completing a purchase.

To begin, you need to add the theme options that best suit your store. Follow these steps:

1. Go to your Jumpseller Admin Panel and navigate to Themes > Code Editor.
2. Inside the Code Editor, navigate to Config > options.json.
3. In the second to last } add a , and then press enter, there you will paste the following code, make sure it is contained inside the last }

"Klarna On-site messaging": {
    "icon": "credit-card",
    "help": "",
    "options": {
      "klarna_enable": {
        "name": "Enable Klarna On-site messaging",
        "type": "checkbox",
        "help": "On-site messaging (OSM) is a tool used to let customers know that Klarna is available on your website.",
        "default": false
      },
      "klarna_merchant_id": {
        "name": "Client ID",
        "type": "input",
        "help": "A client ID (is a unique client identification code assigned to every merchant using Klarna.",
        "default": ""
      },
      "klarna_design_theme": {
        "name": "Klarna Theme",
        "type": "select",
        "help": "Theme will be used to define which style of OSM to be used.",
        "default": "automatic",
        "options": [
          {
            "Automatic": "automatic"
          },
          {
            "Dark": "dark"
          },
          {
            "Light": "light"
          }
        ]
      },
      "klarna_placement_type": {
        "name": "Placement Type",
        "type": "select",
        "help": "A unique identifier of a placement's type and size.",
        "default": "credit-promotion-badge",
        "options": [
          {
            "Credit Promotion Badge": "credit-promotion-badge"
          },
          {
            "Top Strip Promotion Badge": "top-strip-promotion-badge"
          }
        ]
      },
      "klarna_locale": {
        "name": "Locale",
        "type": "select",
        "help": "Billing country code of the ad",
        "default": "US",
        "options": [
          {
            "AT": "AT"
          },
          {
            "BE": "BE"
          },
          {
            "CH": "CH"
          },
          {
            "CZ": "CZ"
          },
          {
            "DE": "DE"
          },
          {
            "DK": "DK"
          },
          {
            "ES": "ES"
          },
          {
            "FI": "FI"
          },
          {
            "FR": "FR"
          },
          {
            "GB": "GB"
          },
          {
            "GR": "GR"
          },
          {
            "IE": "IE"
          },
          {
            "IT": "IT"
          },
          {
            "NL": "NL"
          },
          {
            "NO": "NO"
          },
          {
            "PL": "PL"
          },
          {
            "PT": "PT"
          },
          {
            "SE": "SE"
          },
          {
            "CA": "CA"
          },
          {
            "MX": "MX"
          },
          {
            "US": "US"
          },
          {
            "AU": "AU"
          },
          {
            "NZ": "NZ"
          }
        ]
      }
    }
  }

After that, go to your Jumpseller Admin Panel and navigate to Themes > Visual Editor. Inside the Visual Editor, go to General Settings and scroll down to the bottom of the list. You will see Klarna On-site messaging, and you can fill in the appropriate information.

Now, return to your Jumpseller Admin Panel and navigate to Themes > Code Editor > Templates > Layout. Here, locate the <body> tag and paste the Klarna base code just below it, without deleting any other code. Be sure to paste it below the opening <body> tag, and not the closing </body> tag.

{% if options.klarna_enable == true %}
<script
  async
  data-environment="production"
  src="https://osm.klarnaservices.com/lib.js"
  data-client-id="{{options.klarna_merchant_id}}"
></script>
{% endif %}

This code will allow the other snippets to work.

Sitewide (Footer and Header)

First, we will add the “Buy now, pay later with Klarna” placement to the header of our theme.

<!-- Placement v2 -->
<klarna-placement
  data-key="top-strip-promotion-auto-size"
  data-locale="{{languages.first.code}}-{{options.klarna_locale}}"
  data-theme="{{options.klarna_design_theme}}"
></klarna-placement>
<!-- end Placement -->

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

Product page

In this example, we will add a notification to the product page using the following snippet. Please note that this guide is specific to the Simple theme and other themes may require adjustments.

To add the notification, navigate to your Code Editor > Templates > Product > Default and paste the following code:

{% if options.klarna_enable == true %}
<klarna-placement
id="klarna-price"
data-key="{{options.klarna_placement_type}}"
data-locale="{{languages.first.code}}-{{options.klarna_locale}}"
data-purchase-amount="{% if product.discount > 0 %}{{ product.price | minus:product.discount | times: 100 | round: 0}}{%else%}{{product.price | times: 100 | round: 0 }}{%endif%}"
data-theme="{{options.klarna_design_theme}}"
></klarna-placement>
{% endif %}

As always make sure to avoid deleting other code. Paste the code around line 373, before the {% if product.custom_fields != empty %} code.

If your product has variants with different prices, such as a product with different sizes and prices, you will need to make an advanced adjustment. We strongly recommend that you contact our support team for assistance to avoid potential mistakes. However, if you wish to make these adjustments yourself, you will need to find a callback function that is triggered every time a customer chooses a product variant.

Then, in the price section, add the following lines:

• Below the price without discount section

{% if options.klarna_enable == true %}
$("#klarna-price")[0].dataset.purchaseAmount = productInfo.price * 100;
{% endif %}

• Below the price with discount section

{% if options.klarna_enable == true %}
$("#klarna-price")[0].dataset.purchaseAmount = (productInfo.price - parseFloat(productInfo.discount)) * 100;
{% endif %}

• Before the end of the function

{% if options.klarna_enable == true %}
window.Klarna.OnsiteMessaging.refresh();
{% endif %}

It should look something like this:

Cart Page

This is the simplest one, copy the following code:

{% if options.klarna_enable == true %}
<!-- Placement v2 -->
<klarna-placement
  data-key="credit-promotion-badge"
  data-locale="{{languages.first.code}}-{{options.klarna_locale}}"
  data-theme="{{options.klarna_design_theme}}"
  data-purchase-amount="{{order.total | times: 100 | ceil }}" 
></klarna-placement>
<!-- end Placement -->
{% endif %}

And paste in your Code Editor > Templates > Payments > Cart. For example, here should be in the line 187.

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

To ensure that all the changes made are saved, remember to click on the save button after each modification. In some cases, you may need to adjust the design of certain elements on specific pages to improve the overall user experience. If you face any difficulty in doing so, don’t hesitate to contact our support team for assistance.

FAQ

How can I obtain the client ID for OSM (On-site messaging)?

On the Klarna panel go to OSM, select your store, click on “get started” and copy the client ID.

Which EMD should I mark on Klarna’s page in Jumpseller?

This is not a mandatory field for Jumpseller. However, you may be required to mark one or more, based on your Klarna contract. To get more information about a certain EMD you can click on the hyperlink next to it.

For up-to-date information on the status of our system and all its services, please visit status.jumpseller.com. You can also subscribe to receive notifications about any updates or maintenance work on the site.