Configuring Klarna Checkout
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
For example, to set the button color to red using the PHP library, use:
1$create['options']['color_button'] = "#ff0000";
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.
Logotype
Your logotype is shown in the settlement application. The logotype used will be the one uploaded to Klarna Online. Together with color controls, this creates a more consistent buying experience for the consumer.
Klarna Checkout and the settlement application will be framed by the Klarna Simplifying buying logotype.
Note: Make sure the logotype set in Klarna Online is 350px wide. This will make sure it looks good on high-res displays.
Shipping information
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:
1 2 3"options": { "shipping_details": "Delivered within 1-3 days" }
Mandatory phone number
If you need to collect phone numbers due to legal reasons or have logistics partners who need phone number to deliver goods, you can make the phone number mandatory.
It is set when creating or updating an order. It is set to false by default:
1 2 3"options": { "phone_mandatory": true }
Mandatory date of birth
If you need to collect date of birth due to legal reasons, you can make the date of birth mandatory.
It is set when creating or updating an order. It is set to false by default:
1 2 3"options": { "date_of_birth_mandatory": true }
For any case, Klarna adds a clarification in the label explaining that the phone number is used for goods delivery.
DHL Packstation
In order to deliver goods to DHL Packstations, customers need to provide their personal 8 digit “Postnummer” and a 3 digit “Packstation Nummer”, which is the ID of the packstation. Klarna will not validate the input for Postnummer or Packstation, neither validate that customers do not enter packstation information into regular shipping address fields when packstation is not enabled. The Packstation information will never be pre-filled for returning customers.
It is set when creating or updating an order. Its is set to false by default:
1 2 3"options": { "packstation_enabled": true }
If you allow DHL Packstation, options.allow_separate_shipping_address must be set to true.
Changes in shipping_address:
When packstation_enabled is set to true, you will receive:
- The 8-digit “Postnummer” in shipping_address.care_of
- The string “Packstation” in shipping_address.street_name
- The 3-digit “Packstation Nummer” in shipping_address.street_number
- All other fields in the shipping address structure will remain
Separate shipping address
It is possible to allow the customer to ship to a different shipping address by using the option allow_separate_shipping_address. Also, If you want to allow DHL Packstation, this option must be set to true.
It is set when creating or updating an order. It is set to true by default:
1 2 3"options": { "allow_separate_shipping_address": false }
Cancellation terms
Two links to merchant terms is available in the checkout (see image below). The general terms link (Den AGB) points directly to merchant.terms_uri. The cancellation rights link (Widerrufsrecht) points at merchant.terms_uri with the anchor #cancellation_right added. (e.g. http://example.com/terms.html#cancellation_right ). You should make sure the cancellation rights can be found in your general terms and add the anchor to the page. German law requires that a direct link to cancellation rights is available in the checkout.
It is set when creating or updating an order.
1 2 3"merchant": { "terms_uri": "http://example.com/terms.html" }
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.
1 2 3 4 5 6 7 8 9 10{ //... "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.
1 2 3 4 5{ "merchant_requested": { "additional_checkbox": true } }