Checkout Customization

We allow you to configure the Klarna Checkout to fuse with your e-store’s visual design and buying experience.


Colors

To make Klarna Checkout fit your e-store’s visual design and brand colors, you have the option to set the color of certain elements in Klarna Checkout. The color is set as an option in the api when loading Klarna Checkout.

The below elements are available for customization:

  • options.color_button
  • options.color_button_text
  • options.color_checkbox
  • options.color_checkbox_checkmark
  • options.color_header
  • options.color_link
  • options.radius_border

For example, to set the button color to red:

$orderData['options']['color_button'] = '#ff0000"
orderData.getOptions().setColorButton("#ff69b4");
orderData.Options.ColorButton = "#ff69b4";

Note: Only hexadecimal values are allowed. The default color scheme will show if no values are set.

The settlement application will also be affected by the color settings.


Shipping information note

In order to clarify the customer experience, you can present a sentence regarding shipping on the confirmation page. The sentence can be a maximum of 70 characters long and will be presented under the headline "Delivery" (see image below). If no info is set, the headline will not be displayed.

It is set when creating or updating an order:

{
  //...
  "options": {
    "shipping_details": "Delivered within 1-3 days"
  }
}

Custom Checkbox

This feature will allow you to add a custom checkbox to the checkout. For example to create a newsletter opt-in as part of the customer’s checkout process.

You can freely define the text, whether or not the checkbox should be pre-ticked, and whether or not the checkbox should be mandatory to tick for the customer. The text can include links in the format [link text](url).

To enable the custom checkbox you add a checkbox object in the options part of the call to create the order. You can then read the status of the checkbox as part of the merchant_requested object on the order. You can find out more about the checkbox object and the merchant_requested object in the API Reference. Below is an example of how to use it.

{
  //...
  "options": {
    "additional_checkbox": {
      "text": "Lorem ipsum dollar sit amet. [Link](http://klarna.com)", // Would generate `Lorem ipsum dolor sit amet. <a href="http://klarna.com" target="_blank">Link</a>`
      "checked": true,
      "required": false
    }
  }
}

When reading the order from the API there will be a field called additional_checkbox withing the merchant_requested object. This field will be set to true if the checkbox was checked.

{
  "merchant_requested": {
    "additional_checkbox": true
  }
}