On this page
No Headings
Last updated: July 13, 2026
The following reference topics describe how to customize Pay Later messaging in your code. For more information about Pay Later offers, see the Pay Later overview page for your country, such as Pay Later (US).
This reference supplements and completes the information in the integration guide. Use it as a lookup resource when you need details about a specific attribute, parameter, or configuration option.
If you haven't integrated Pay Later messaging yet, start with the integration guide.
Pass these parameters to the JavaScript SDK script URL as the query parameters that apply to Pay Later messaging. For the full set of PayPal script parameters, see the JavaScript SDK script configuration.
<script
src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&merchant-id=MERCHANT_ID&components=messages"
data-partner-attribution-id="BN_CODE"
data-namespace="PayPalSDK"
></script>| Parameter | Description |
|---|---|
client-id | ID of the client's PayPal account |
merchant-id | ID of the merchant when you're acting on behalf of a merchant. Required only for partner integrations. |
data-partner-attribution-id | Also known as a BN code. PayPal issues this during partner onboarding. |
data-namespace | The name of the global variable when the SDK loads. Required only if you're using a legacy checkout integration such as checkout.js. Can be any string except paypal. For example, if set to "PayPalSDK", invoke PayPalSDK.Messages() in your integration. |
The paypal.Messages function configures the layout and style for Pay Later messaging. It takes a configuration object as its only argument and returns a message object.
The message object has a render() function that accepts:
HTMLElement referenceHTMLElement referencesIt returns a Promise that resolves after all messages render to the DOM.
paypal
.Messages({
amount: 500,
pageType: "product-details",
style: { layout: "text" },
})
.render('.pp-message');If you're using a legacy PayPal Checkout integration that uses checkout.js, you may be loading the SDK with a data-namespace attribute. If you're configuring messages using JavaScript, the value you set for data-namespace becomes the name of the global variable you use to configure and render messages.
<head>
<script
data-namespace="PayPalSDK"
src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=messages"
></script>
</head>
<body>
<div class="pp-message"></div>
<script>
PayPalSDK.Messages({
amount: 500,
style: {
layout: "text",
logo: {
type: "inline",
},
},
}).render('.pp-message');
</script>
</body>For more information about namespaces and compatibility with Checkout integrations, see upgrade existing integration.
The following table lists all configuration properties you can set on the configuration object passed to paypal.Messages. All properties have equivalent HTML data-pp-* custom attributes you can add inline on the elements you target for messages.
Note: Properties defined using HTML attributes for a given message value override duplicate properties set using the configuration object and the paypal.Messages function.
Product price or cart amount in dollars. For example, pass $598.94 as 598.94. Strongly recommended.
| Value type | Value |
|---|---|
| Number | Any number with 0–2 decimal places |
HTML attribute: data-pp-amount
Buyer's currency code.
| Value type | Value | Description |
|---|---|---|
| String | USD | US dollar |
GBP | British pound | |
EUR | Euro | |
AUD | Australian dollar |
HTML attribute: data-pp-currency
Language for rendering the message. Specific to Canadian merchant sites.
| Value type | Value |
|---|---|
| String | Use en-CA on your English site and fr-CA on your French site. Any other value or missing attribute defaults to en-CA. |
For more information, see Pay Later (CA).
Overall style or type of message.
| Value type | Value | Description |
|---|---|---|
| String | text | Lightweight contextual message (Default) |
flex | Responsive banner |
HTML attribute: data-pp-style-layout
Type of logo for messages using the text layout.
| Value type | Value | Description |
|---|---|---|
| String | primary | Single-line PayPal or PayPal Credit logo (Default) |
alternative | PP monogram or PP Credit logo | |
inline | Same as primary, but inline with the content (Recommended) | |
none | No logo, text only |
HTML attribute: data-pp-style-logo-type
Position of the logo for messages using the text layout with primary or alternative logo type.
| Value type | Value | Description |
|---|---|---|
| String | left | Logo appears to the left of the text (Default) |
right | Logo appears to the right of the text | |
top | Logo appears above the text |
HTML attribute: data-pp-style-logo-position
Color of the text and logo for messages using the text layout.
| Value type | Value | Description |
|---|---|---|
| String | black | Black text with a colored logo (Default) |
white | White text with a white logo | |
monochrome | Black text with a black logo | |
grayscale | Black text with a grayscale logo |
HTML attribute: data-pp-style-text-color
Font size for messages using the text layout.
| Value type | Value | Description |
|---|---|---|
| Number | 10, 11 | Smaller text sizes |
12 | Standard text size (Default) | |
13, 14, 15, 16 | Larger text sizes |
HTML attribute: data-pp-style-text-size
Text alignment for messages using the text layout.
| Value type | Value | Description |
|---|---|---|
| String | left | Left-aligned (Default) |
center | Centered | |
right | Right-aligned |
HTML attribute: data-pp-style-text-align
Background color for messages using the flex layout.
| Value type | Value | Description |
|---|---|---|
| String | blue | Blue background with white text and white logo (Default) |
black | Black background with white text and white logo | |
white | White background with blue text, colored logo, and blue border | |
white-no-border | White background with blue text and colored logo, no border | |
gray | Light gray background with blue text and colored logo | |
monochrome | White background with black text and black logo | |
grayscale | White background with black text and grayscale logo |
HTML attribute: data-pp-style-color
Size ratio for messages using the flex layout.
| Value type | Value | Description |
|---|---|---|
| String | 1x1 | Flexes between 120px and 300px wide (Default) |
1x4 | 160px wide | |
8x1 | Flexes between 250px and 768px wide | |
20x1 | Flexes between 250px and 1129px wide |
HTML attribute: data-pp-style-ratio
Identifies the type of page where the message appears. Used by PayPal's analytics and system logging.
| Value type | Value | Description |
|---|---|---|
| String | home | Home page |
product-listing | Product listing page | |
product-details | Product details page | |
search-results | Search results page | |
cart | Cart page | |
mini-cart | Mini-cart page | |
checkout | Checkout page |
HTML attribute: data-pp-pageType
Visual design and content of the message to match an adjacent component. Use when placing the message near checkout buttons or near a PayPal or Pay Later logo or mark.
Note: Using one of the *_MARK values overrides some other style properties, such as style.logo.position.
| Value type | Value | Description |
|---|---|---|
| String | PAYPAL_BUTTON | Messages feature both PayPal and Pay Later, using the PayPal monogram logo by default |
PAY_LATER_BUTTON | Messages feature Pay Later only, using the PayPal monogram logo by default | |
PAYPAL_MARK | Messages feature both PayPal and Pay Later without a PayPal logo | |
PAY_LATER_MARK | Messages feature only PayPal Pay Later without a PayPal logo |
HTML attribute: data-pp-contextualComponents
The following resources provide additional information and guidance for your Pay Later integration: