Customize the messaging

Learn about the customization options you can use to modify the style and layout. If you want to explore these options and get the resulting code snippets, see the interactive messaging tool.

Note: The interactive messaging tool requires a PayPal account to login.

Product or cart amount

If you pass an amount value to each message, the SDK can render more specific messages that bring more value to you and your customers. Without an amount, the SDK will fall back to a more generalized message that, while still effective, has a weaker value proposition to your customers.

For your product detail and product list pages, set the data-pp-amount attribute to the product's price. For your cart or checkout pages, set the attribute to the total cart value.

Example:

<div data-pp-message data-pp-placement="product" data-pp-amount="200.00"></div>

Page type

Use the data-pp-placement attribute to help the SDK identify the type of page where a message appears. This data is processed and presented to you on the analytics dashboard in your merchant account. In this way, you can view the performance breakdown of these messages across different page types on your website.

This attribute accepts home, category, product, cart, and payment as values.

Example:

<div data-pp-message data-pp-placement="product"></div>

Note: The page type attribute is only for your analytics dashboard and doesn't affect the rendered message.

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:

  1. Lightweight text-based messages (data-pp-style-layout="text")
  2. Flexible display banners (data-pp-style-layout="flex")

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>

May render message like so:

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 only available 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

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