Customize Pay Later messages

Learn about the customization options you can use to modify the style and layout for your Pay Later messaging.

Note: If you want to explore these options and get the resulting code snippets, see the interactive messaging tool, which requires a PayPal account to login.

On this page

• Product or cart amount
• Page type
• Layout and style

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 falls 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="120.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:

• Lightweight text-based messages (data-pp-style-layout="text")
• 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.

Example

<div
  data-pp-message
  data-pp-placement="product"
  data-pp-amount="120.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
• Text size
• Text align

Logo type

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

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
alternative	"PP" monogram or "PP Credit" logo
inline	Recommended. Same as primary logo, but inline with the content
none	No logo, text only

Example

<div
  data-pp-message
  data-pp-placement="product"
  data-pp-amount="120.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.

Note: This option is available only if the data-pp-style-logo-type value is primary.

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="120.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.

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

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

Example

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

Renders

Text size

Sets the size of the message text.

Set this option to one of these values:

Value	Description	Preview
10, 11	Smaller text sizes.
12	Default. Standard text size.
13, 14, 15, 16	Larger text sizes.

Text align

Sets the direction the text aligns for text layout messages.

Set this option to one of these values:

Value	Description	Preview
left	Default. Text is left aligned
center	Text is center aligned
right	Text is right aligned

Example

<div
  data-pp-message
  data-pp-placement="home"
  data-pp-amount="120.00"
  data-pp-style-layout="text"
  data-pp-style-text-align="center"
></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 that they can buy now and pay later.

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

Color

Sets the background color of the flexible banner.

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
white-no-border	White background with blue text and colored logo
gray	Light gray background with blue text and colored logo
monochrome	White background with black text and black logo
grayscale	White background with black text and grayscale logo

Example

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

Renders

Ratio

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

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="120.00"
  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.