Test your integration

To test your integration, you can use our Playground Environments:

Test vs. live environments

Please use the test environment to test your Klarna Checkout integration. Purchases completed in the test environment are not processed by our production system and will not result in proper invoices or any fees collected on invoices.

Purchases and Order management

  • The API URLs / end-points for our playground environment are found here

Merchant Portal

You can log in to our Merchant Portal in playground to look at logs from your API calls, manage orders and more. Contact our tech sales in order to get a user account.

US-Playground: https://orders.playground.us.portal.klarna.com EU-Playground: https://orders.playground.eu.portal.klarna.com

In Playground, you need a test account, and you can trigger different use cases to see some of the scenarios the consumer will experience.

Get your test-credentials: here

Go-live checklist

Below you can find a list of tasks you need to complete in order to go live with Klarna Checkout. Completing these tasks will help you pass Klarna’s verification of your integration faster and start accepting live transactions sooner.

  1. Have you rendered the checkout correctly
  2. Is your terms and conditions page linked correctly?
  3. Do you save the customer session ?
  4. Is the confirmation page rendered correctly?
  5. Does your platform acknowledge and create the order?
  6. Do you include the relevant information in your packing slips? (Please contact us for more info)
  7. Do you present sufficient information about your store and how consumers can contact you?
  8. Do you pre-fill the checkout for consumers who are logged in?
  9. Have you captured the order to finalize the payment?
  10. Have you contacted Klarna to verify the integration?
  11. Have you reviewed the security of your site? Our security recommendations are a great place to start.
This section only applies to the regions:
Germany, Austria
Please ensure you've reviewed Legal & Privacy information.

Customize your checkout

Now that you’re done with the integration of Klarna Checkout, see our list of additional features for a custom experience that suits your store’s needs.

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:

1
orderData.getOptions().setColorButton("#ff69b4");
1
orderData.Options.ColorButton = "#ff69b4";
1
$orderData['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.

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:

1
2
3
4
5
6
{
  //...
  "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.

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
  }
}