Customize Pay Later messages
Change the style and layout of your Pay Later messaging
DocsCurrentLast updated: July 26th 2023, @ 12:42:32 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
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.
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
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. | ![]() |
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.
Inline HTML attribute | Possible values |
---|---|
data-pp-style-logo-position | left , right , top |
Note: This option is available only if the
data-pp-style-logo-type
value isprimary
.
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.
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 | ![]() |
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.
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. | ![]() |
12 | Default. Standard text size. | ![]() |
13 , 14 , 15 , 16 | Larger text sizes. | ![]() |
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 | ![]() |
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.
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
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. | ![]() |
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.
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. | ![]() |
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.