Customize the messaging (US)

Learn about the customization options you can use to modify the style and layout for your US-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:

The HTML attribute data-pp-style-layout determines the message's layout. If you omit this attribute, then the SDK will default to the 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. Make sure to include the product price or total cart amount via data-pp-amount attribute to show the most effective message to your customers.

Inline HTML attribute Value
data-pp-style-layout text

Example:

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

Message might render like the following:

For lightweight text-based messages, you can configure the following attributes:

  • Logo type
  • Logo position
  • Text color

Logo type

This attribute sets the logo type used in the message. The default, if it is not provided, is primary.

Inline HTML attribute Possible values
data-pp-style-logo-type inline, primary, alternative, none

Note: The message that is rendered may show a PayPal logo/monogram or a PayPal Credit logo/monogram, depending on the offer presented by the message

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

Value Description Preview
primary Default. Single-line PayPal or PayPal Credit logo Pay Later messaging text primary left black
alternative "PP" monogram or "PP Credit" logo Pay Later messaging alternative left black
inline Recommended. Same as primary logo, but inline with the content Pay Later messaging inline left black
none No logo, text only Pay Later messaging none left black

Example:

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

Renders:

Logo position

Sets the position of the PayPal or PayPal Credit logo in the message.

Inline HTML attribute Possible values
data-pp-style-logo-position left, right, top

Note: This option is available only with data-pp-style-logo-type values primary and alternative.

Value Description Preview
left Default. Logo left of the text Pay Later messaging text primary left black
right Logo right of the text Pay Later messaging text primary right black
top Logo above the text Pay Later messaging text primary top black

Example:

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

Renders:

Text color

Sets the text and logo color of the message.

Inline HTML attribute Possible values
data-pp-style-text-color black, white, monochrome, grayscale

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

Value Description Preview
black Default. Black text with colored logo Pay Later messaging text primary left black
white White text with a white logo Pay Later messaging text primary left white
monochrome Black text with a black logo Pay Later messaging text primary left black
grayscale Black text with a grayscale logo Pay Later messaging text primary left black

Example:

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

Renders:

Text size

Sets the size of the message text.

Object property (path) Inline HTML attribute Possible values
style.text.size data-pp-style-text-size 10, 11, 12, 13, 14, 15, 16

Set this option to one of these values:

Value Description
10 Sets font size to 10px
11 Sets font size to 11px
12 Default. Sets font size to 12px
13 Sets font size to 13px
14 Sets font size to 14px
15 Sets font size to 15px
16 Sets font size to 16px

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 that they can buy now and pay later.

Inline HTML attribute Value
data-pp-style-layout flex

Example:

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

For lightweight text-based messages, you can configure the following attributes:

  • Color
  • Ratio

Renders:

Credit messaging flex 1x1 blue

Color

Sets the background color of the flexible banner.

Inline HTML attribute Possible values
data-pp-style-color blue, black, white, white-no-border, gray, monochrome, grayscale

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

Value Description Preview
blue Default. Blue background with white text and white logo Pay Later messaging flex 1x1 blue
black Black background with white text and white logo Pay Later messaging flex 1x1 black
white White background with blue text, colored logo, and blue border Pay Later messaging flex 1x1 white
white-no-border White background with blue text and colored logo Pay Later messaging flex 1x1 white no border
gray Light gray background with blue text and colored logo Pay Later messaging flex 1x1 gray
monochrome White background with black text and black logo Pay Later messaging flex 1x1 monochrome
grayscale White background with black text and grayscale logo Pay Later messaging flex 1x1 grayscale

Example:

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

Renders:

Pay Later messaging flex 1x1 black

Ratio

Sets the shape and size of the flexible banner. All ratios are specified as width x height.

Inline HTML attribute Possible values
data-pp-style-ratio 1x1, 1x4, 8x1, 20x1

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 Pay Later messaging flex 1x1 blue
1x4 Ratio of 1x4 that is 160px wide Pay Later messaging flex 1x4 blue
8x1 Ratio of 8x1 that flexes between 250px and 768px wide Pay Later messaging flex 8x1 blue
20x1 Ratio of 20x1 that flexes between 250px and 1169px wide Pay Later messaging flex 20x1 blue

Example:

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

See also

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

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