Customize Pay Later messages

Change the style and layout of your Pay Later messaging

DocsCurrentLast updated: October 26th 2022, @ 2:59:33 pm


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

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:

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 attributeValue
data-pp-style-layouttext

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:

US 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

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

Inline HTML attributePossible values
data-pp-style-logo-typeinline, 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:

ValueDescriptionPreview
primaryDefault. Single-line PayPal or PayPal Credit logoUS 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
alternative"PP" monogram or "PP Credit" logoUS 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
inlineRecommended. Same as primary logo, but inline with the contentUS text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a PayPal brand name logo displayed within the text
noneNo logo, text onlyUS text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, without a PayPal logo
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

US 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

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

Inline HTML attributePossible values
data-pp-style-logo-positionleft, right, top

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

ValueDescriptionPreview
leftDefault. Logo left of the textUS 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 textUS 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 textUS 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

US 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 logoUS 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 logoUS 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 logoUS 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 logoUS 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

US 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 US 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.US 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 US 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 alignedUS 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 alignedUS 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 alignedUS 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

US 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

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 attributeValue
data-pp-style-layoutflex

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

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

Color

Sets the background color of the flexible banner.

Inline HTML attributePossible values
data-pp-style-colorblue, black, white, white-no-border, gray, monochrome, grayscale

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

ValueDescriptionPreview
blueDefault. Blue background with white text and white logoA square US flex message for a Pay Later offer with white text and logo on a blue background
blackBlack background with white text and white logoA square US 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 borderUS Pay Later messaging flex 1x1 white
white-no-borderWhite background with blue text and colored logoUS Pay Later messaging flex 1x1 white no border
grayLight gray background with blue text and colored logoA square US 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 logoA square US flex message for a Pay Later offer with black text and logo on a white background
grayscaleWhite background with black text and grayscale logoA square US flex message for a Pay Later offer with blue text and a colored logo on a light gray backgroundscale
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 US flex message for a Pay Later offer with white text and logo on a black background

Ratio

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

Inline HTML attributePossible values
data-pp-style-ratio1x1, 1x4, 8x1, 20x1

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

ValueDescriptionPreview
1x1Default. Ratio of 1x1 that flexes between 120px and 300px wideA square US flex message for a Pay Later offer with white text and logo on a blue background
1x4Ratio of 1x4 that is 160px wideA rectangular US 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 wideA rectangular US 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 wideA rectangular US 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>

See also

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