Customize Pay Later messages

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
• Page type
• Layout and style

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

Qualifying amount for Pay in 30 message example

Example

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

Renders

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, product-list, 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 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.

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 more effective message displaying to your customers, informing them of the affordability of your goods and services using Pay Later offers for financing.

Example

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

Renders

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. Full PayPal Logo.
alternative	PayPal monogram Logo.
inline	Single line PayPal Logo without monogram.
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.

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

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

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

Renders

You can set color and ratio attributes as described below.

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.
gray	Light gray background with blue text and colored 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>

<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

See also

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