Customize the messaging (UK)

Learn about the customization options you can use to modify the style and layout for your UK-based customers.

Layout and style

You can configure messages for different layouts and styles using optional HTML attributes.

The message layout determines the available style options. The two layout options are:

• Lightweight text-based messages
• Flexible display banners

The HTML attribute data-pp-style-layout determines the message layout. If you omit this attribute, then the layout uses the default value text. Setting this value to flex renders your message as a flexible display banner.

Lightweight text-based messages

This message layout is ideal for placement underneath product and cart prices throughout your site. Passing in the product price or total cart amount results in a message that shows monthly payment messaging to your customers, informing them of the affordability of your goods and services using Pay Later offers for financing.

• Inline HTML attribute: data-pp-style-layout, value: text

Example:

<div data-pp-message data-pp-placement="product" data-pp-amount="500.00" data-pp-style-layout="text"></div>

Renders:

You can set logo type, logo position, and text color attributes as described below.

Logo type

• Inline HTML attribute: data-pp-style-logo-type

Sets the Pay Later logo used in the message.

Set this attribute's value to one of the following:

Value	Description	Preview
primary	Default. Full PayPal Logo.
alternative	PayPal monogram Logo.
inline	Single line PayPal Logo without monogram.
none	No logo. Text only.

Example:

<div data-pp-message data-pp-placement="product" data-pp-amount="500.00" data-pp-style-layout="text" data-pp-style-logo-type="alternative"></div>

Renders:

Logo position

• Inline HTML attribute: data-pp-style-logo-position

Sets the position of the PayPal logo in the message.

Note: This option is available only with logo.type values: primary, alternative

Set this attribute's value to one of the following:

Value	Description	Preview
left	Default. Logo left of the text.
right	Logo right of the text.
top	Logo above the text.

Example:

<div data-pp-message data-pp-placement="product" data-pp-amount="500.00" data-pp-style-layout="text" data-pp-style-logo-position="top"></div>

Renders:

Text color

• Inline HTML attribute: data-pp-style-text-color

Sets the text and logo color of the message.

Set this attribute's value to one of the following:

Value	Description	Preview
black	Default. Black text with a colored logo.
white	White text with a white logo.

Example:

<div data-pp-message data-pp-placement="product" data-pp-amount="500.00" data-pp-style-layout="text" data-pp-style-text-color="white"></div>

Renders:

Flexible display banners

This message layout is ideal for placement above the fold on your home and product category pages. Designed to be eye-catching, they inform your customers of interest-free installments with Pay Later offers.

• Inline HTML attribute: data-pp-style-layout, value: flex

Example:

<div data-pp-message data-pp-placement="home" data-pp-amount="500.00" data-pp-style-layout="flex"></div>

Renders:

You can set color and ratio attributes as described below.

Color

• Inline HTML attribute: data-pp-style-color

Sets the color of the message.

Set this attribute's value to one of the following:

Value	Description	Preview
blue	Default. Blue background with white text and white logo.
black	Black background with white text and white logo.
white	White background with blue text, colored logo, and blue border.
gray	Light gray background with blue text and colored logo.

Example:

<div data-pp-message data-pp-placement="home" data-pp-amount="500.00" data-pp-style-layout="flex" data-pp-style-color="black"></div>

Renders:

Ratio

• Inline HTML attribute: data-pp-style-ratio

Sets the shape and size of the message.

Set this attribute's value to one of the following:

Value	Description	Preview
1x1	Default. Ratio of 1x1 that flexes between 120px and 300px wide.
1x4	Ratio of 1x4 that is 160px wide.
8x1	Ratio of 8x1 that flexes between 250px and 768px wide.
20x1	Ratio of 20x1 that flexes between 250px and 1169px wide.

Example:

<div data-pp-message data-pp-placement="home" data-pp-amount="500.00" data-pp-style-layout="flex" data-pp-style-ratio="8x1"></div>

Renders:

See also

Learn about the customization options you can use to modify the style and layout if you have US-based customers.

Explore advanced configurations and integrations with JavaScript in our advanced setup guide.