Customize Pay Later messages

Change the style and layout of your Pay Later messaging

DocsCurrentLast updated: November 25th 2023, @ 8:25:22 am


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

On this page

Product or cart amount

You can display a shorter message to your customers by passing in a qualifying amount to the message. Additionally, your customers can see their payment amount and associated fee when they click on the message.

For your product detail and product list pages, include the product's price in the amount parameter. For your cart or checkout pages, include the total cart value in the amount parameter.

Note: Including data-pp-amount only displays a shorter message if the amount that’s passed in is between the minimum and maximum purchase amount.

Example

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

Page type

Use the data-pp-placement attribute to identify the type of page a message appears and if the customer interacted with the message. This attribute accepts home, category, product, cart, and payment as values.

Example

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

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
  2. 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.

1. Lightweight text-based messages

This message layout is ideal for placement underneath product and cart prices throughout your site.

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

Example

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

Renders

French text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a PayPal logo displaying the PayPal icon and name on the left side of the text

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

  • Logo type
  • Logo position
  • Text color
  • Text size
  • Text align

Logo Type

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

Sets the PayPal logo used in the message.

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

ValueDescriptionPreview
primaryDefault. Full PayPal Logo.French text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a PayPal logo displaying the PayPal icon and name on the left side of the text
alternativePayPal monogram Logo.French text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a PayPal logo displaying only the PayPal icon on the left side of the text
inlineSingle line PayPal Logo without monogram.French Pay Later messaging text inline black
noneNo logo. Text only.French Pay Later messaging text none black
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

French text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a PayPal logo displaying only the PayPal icon on the left side of the text

Logo Position

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

Sets the position of the PayPal logo in the message.

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

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

ValueDescriptionPreview
leftDefault. Logo left of the text.French text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a PayPal logo displaying the PayPal icon and name on the left side of the text
rightLogo right of the text.French text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a primary PayPal logo on the right side of the text
topLogo above the text.French text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a primary PayPal logo on top of 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

French text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a primary PayPal logo on top of the text

Text color

Sets the text and logo color of the message.

Inline HTML attributePossible values
data-pp-style-text-colorblack, white, monochrome, grayscale

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

ValueDescriptionPreview
blackDefault. Black text with colored logoFrench text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a PayPal logo displaying the PayPal icon and name on the left side of the text
whiteWhite text with a white logoFrench text message for a Pay Later offer with 12 pixel font, left-aligned, white text on a black background, with a white primary PayPal logo on the left side of the text
monochromeBlack text with a black logoFrench text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a monochrome primary PayPal logo on the left side of the text
grayscaleBlack text with a grayscale logoFrench text message for a Pay Later offer with 12 pixel font, left-aligned, grayscale text on a white background, with a grayscale primary PayPal logo on the left side of the text
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

French text message for a Pay Later offer with 12 pixel font, left-aligned, white text on a black background, with a white primary PayPal logo on the left side of the text

Text size

Sets the size of the message text.

Object property (path)Inline HTML attributePossible values
style.text.sizedata-pp-style-text-size10, 11, 12, 13, 14, 15, 16

Set this option to one of these values:

ValueDescriptionPreview
10, 11Smaller text sizes.Two French text message for a Pay Later offer with 10 and 11 pixel font, left-aligned, black text on a white background, with a PayPal logo displaying only the PayPal icon on the left side of the text
12Default. Standard text size.French text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a PayPal logo displaying only the PayPal icon on the left side of the text
13, 14, 15, 16Larger text sizes.Four French text message for a Pay Later offer with 13, 14, 15, and 16 pixel font, left-aligned, black text on a white background, with a PayPal logo displaying only the PayPal icon on the left side of the text

Text align

Sets the direction the text aligns for text layout messages.

Object property (path)Inline HTML attributePossible values
style.text.aligndata-pp-style-text-alignleft, center, right

Set this option to one of these values:

ValueDescriptionPreview
leftDefault. Text is left alignedFrench text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a PayPal logo displaying the PayPal icon and name on the left side of the text left
centerText is center alignedFrench text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a PayPal logo displaying the PayPal icon and name on the left side of the text center
rightText is right alignedFrench text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a PayPal logo displaying the PayPal icon and name on the left side of the text right
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

French text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a PayPal logo displaying the PayPal icon and name on the left side of the text center

2. 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 pay later offers.

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

Example

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

Renders

A square French flex message for a Pay Later offer with white text and logo on a blue background

You may 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:

ValueDescriptionPreview
blueDefault. Blue background with white text and white logo.A square French flex message for a Pay Later offer with white text and logo on a blue background
blackBlack background with white text and white logo.A square French flex message for a Pay Later offer with white text and logo on a black background
whiteWhite background with blue text, colored logo, and blue border.French Pay Later messaging flex 1x1 white
grayLight gray background with blue text and colored logo.A square French flex message for a Pay Later offer with blue text and a colored logo on a light gray background
monochromeWhite background with black text and black logo.A square French flex message for a Pay Later offer with blue text and a colored logo on a light gray background
grayscaleWhite background with black text and grayscale logo.A square French flex message for a Pay Later offer with blue text and a colored logo on a light gray background
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

A square French flex message for a Pay Later offer with white text and logo on a black background

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:

ValueDescriptionPreview
1x1Default. Ratio of 1x1 that flexes between 120px and 300px wide.A square French flex message for a Pay Later offer with white text and logo on a blue background
1x4Ratio of 1x4 that is 160px wide.A rectangular French flex message with a width to height ratio of 1x4 for a Pay Later offer with white text and logo on a blue background
8x1Ratio of 8x1 that flexes between 250px and 768px wide.A rectangular French flex message with a width to height ratio of 8x1 for a Pay Later offer with white text and logo on a blue background
20x1Ratio of 20x1 that flexes between 250px and 1169px wide.A rectangular French flex message with a width to height ratio of 20x1 for a Pay Later offer with white text and logo on a blue background
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>
Renders

A rectangular French flex message with a width to height ratio of 8x1 for a Pay Later offer with white text and logo on a blue background