Customize Pay Later messages

Change the style and layout of your Pay Later messaging

DocsCurrentLast updated: July 28th 2021, @ 1:19:19 pm


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

Include the product or cart amount to show a more relevant message to your consumers. If the amount is within the qualifying range, the message remove's any purchase eligibility language that's included in the message when there is no amount or a non-qualifying amount. Consumers can also see their payment breakdown in the Learn More modal when they select a message.

Note: If PayPal Ratenzahlung has an APR configured to 0%, the messages will show the monthly payment to customers when a qualifying amount is included.

Example

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

Renders

Ratenzahlung text message for a qualifying Pay Later offer

Non-qualifying amount or no amount message example

Example

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

Renders

Ratenzahlung text message for a non-qualifying Pay Later offer

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. Passing in the product price or total cart amount results in a message that shows monthly payment messaging to your customers, informing them of the affordability of your goods and services using Pay Later offers for financing.

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

Example

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

Renders

Ratenzahlung 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 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. Full PayPal Logo. Ratenzahlung 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 PayPal monogram Logo. Ratenzahlung 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
inline Single line PayPal Logo without monogram. Ratenzahlung Pay Later messaging text inline black
none No logo. Text only. Ratenzahlung Pay Later messaging text inline 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

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

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

Value Description Preview
left Default. Logo left of the text. Ratenzahlung 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 Logo right of the text. Ratenzahlung 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
top Logo above the text. Ratenzahlung 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

Ratenzahlung 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 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 Ratenzahlung 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
white White text with a white logo Ratenzahlung 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
monochrome Black text with a black logo Ratenzahlung 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
grayscale Black text with a grayscale logo Ratenzahlung 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

Ratenzahlung 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 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 Preview
10, 11 Smaller text sizes. Two Ratenzahlung 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
12 Default. Standard text size. Ratenzahlung 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, 16 Larger text sizes. Four Ratenzahlung 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 attribute Possible values
style.text.align data-pp-style-text-align left, center, right

Set this option to one of these values:

Value Description Preview
left Default. Text is left aligned Ratenzahlung 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
center Text is center aligned Ratenzahlung 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
right Text is right aligned Ratenzahlung 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-align="center"
></div>
Renders

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-amount="120.00"
  data-pp-style-layout="flex"
></div>

Renders

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

You can set color and ratio attributes as described below.

Color

Sets the background color of the flexible banner.

Inline HTML attribute Possible values
data-pp-style-color blue, black, white, gray

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

Value Description Preview
blue Default. Blue background with white text and white logo. A square Ratenzahlung flex message for a Pay Later offer with white text and logo on a blue background
black Black background with white text and white logo. A square Ratenzahlung flex message for a Pay Later offer with white text and logo on a black background
white White background with blue text, colored logo, and blue border. Ratenzahlung Pay Later messaging flex 1x1 white
gray Light gray background with blue text and colored logo. A square Ratenzahlung 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 Ratenzahlung 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 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. A square Ratenzahlung flex message for a Pay Later offer with white text and logo on a blue background
1x4 Ratio of 1x4 that is 160px wide. A rectangular Ratenzahlung flex message with a width to height ratio of 1x4 for a Pay Later offer with white text and logo on a blue background
8x1 Ratio of 8x1 that flexes between 250px and 768px wide. A rectangular Ratenzahlung flex message with a width to height ratio of 8x1 for a Pay Later offer with white text and logo on a blue background
20x1 Ratio of 20x1 that flexes between 250px and 1169px wide. A rectangular Ratenzahlung 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>
<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 Ratenzahlung flex message with a width to height ratio of 8x1 for a Pay Later offer with white text and logo on a blue background

See also

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