Customization of the Hosted Payment Page

When creating an HPP Session you have some optional parameters that will let you modify the look and feel of Klarna’s Hosted Payment Page in order to better match your own branding.

Overview

Standard versionCustomized
Standard version
Customized
Standard version
Customized

Generic confirmation pages

When creating an HPP Session you can define the URL that you want the Consumer to be redirected to after making an action on the payment page. These URLs are in the merchant_urls block, but they are also optional. When you don’t put any value in there, generic pages are displayed to the Consumer.

SuccessFailureCancellation
Success
Failure
Cancellation

Parameters

A description of the options that can be passed to HPP. All of these are optional, some default to a sensible value if omitted in the call.

When provided your logo will appear on the Hosted Payment Page, its position will depend on the Consumer’s browser capacities as HPP as different responsive designs. Image has to be served over HTTPS to avoid all kind of security warning on the Consumer’s browser.

Keylogo_url
Key
Description
logo_url
Url of the logo, must be served over HTTPS.
Key
Type
logo_url
String
Key
Default
logo_url
none
1
2
3
4
5
{
    "options": {
        "logo_url": "https://example.com/logo.jpg"
    }
}

Background Images

Use this parameter to send a list of images to use as backgrounds on the payment page. HPP will use the image that fits the better to the Consumer’s browser capacities using the width parameter given. Images have to be served over HTTPS to avoid all kind of security warning on the Consumer’s browser.

Keybackground_images
Key
Description
background_images
A list of images to be used as the background for HPP
Key
Type
background_images
Array
Key
Default
background_images
none
ParameterTypeUsage
Parameter
url
Type
String
Usage
Url of the image, must be served over HTTPS
Parameter
width
Type
Int
Usage
Width of the screen the image works best on

Example Code: Background Images

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
    "options": {
        "background_images": [
            {
                "url": "https://example.com/background.jpg",
                "width": 1280
            },
            {
                "url": "https://example.com/background_small.jpg",
                "width": 480
            }
        ]
    }
}

Page Title

Use this parameter to modify the title of the Hosted Payment Page. This title is shown in the page and as header of the Consumer’s browser. As it is defined by you, you are responsible of its localization to the Locale of the Consumer.

Keypage_title
Key
Description
page_title
Title on top of the Hosted Payment Page
Key
Type
page_title
String
Key
Default
page_title
Complete your purchase

Example Code: Page Title

1
2
3
4
5
{
    "options": {
        "page_title": "Complete your purchase"
    }
}

Complete purchase button labeling

Depending on the kind of goods you are selling, use this parameter to change the label of the button on which the Consumer will click to finalize the purchase. Label is localized in the locale of the Session.

Keypurchase_type
Key
Description
purchase_type
Purchase type, reflected in the complete purchase button on the bottom of HPP
Key
Type
purchase_type
Enum
Key
Accepted values
purchase_type
BUY, RENT, BOOK, SUBSCRIBE, DOWNLOAD, ORDER, CONTINUE
Key
Default
purchase_type
BUY
ValueButton label in English
Value
BOOK
Button label in English
Book Now
Value
BUY
Button label in English
Buy
Value
CONTINUE
Button label in English
Buy
Value
DOWNLOAD
Button label in English
Download Now
Value
ORDER
Button label in English
Buy
Value
RENT
Button label in English
Rent Now
Value
SUBSCRIBE
Button label in English
Subscribe Now

Example Code: Purchase type

1
2
3
4
5
{
    "options": {
        "purchase_type": "buy"
    }
}

Styling of payment methods

Documented in the KP docs