Skip to main content
The following reference topics describe how to customize Pay Later messaging in your code. For more information about Pay Later offers, see Pay Later (US).

​
Script query parameters

Pass these parameters to the JavaScript SDK script URL as the query parameters for Pay Later messaging. For the full set of PayPal script parameters, see JavaScript SDK script configuration.
ParameterDescriptionExample
client-idID of the client’s PayPal accounta1b2c3d4e5f6
merchant-idID of the merchant when you’re acting on behalf of a merchant. Only required if you act on behalf of a merchant.abcdef123456
data-partner-attribution-idAlso known as your BN code. PayPal issues your data-partner-attribution-id during onboarding.6f5e4d3c2b1a
data-namespaceName that you use as a global variable when the SDK loads. This value is required only if you’re using a legacy checkout integration, such as checkout.js. It can be any string, except paypal. For the example value in this table and sample code, you invoke PayPalSDK.Messages() in your integration.PayPalSDK
<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>

​
Messages function

The Message object configures the layout and style for Pay Later messaging. To create a Message object, invoke paypal.Messages.

​
Message object

The Message object contains the following properties.
PropertyTypeDescription
renderFunctionTells the system where and how to render the Pay Later messages. The render property Accepts a valid CSS selector string, a single HTMLElement reference, or an array of HTMLElement references. It returns a Promise that resolves after all messages render to the DOM.

​
Message configuration object

The following table lists all configuration properties that you can set on the configuration object. The Messages function uses the properties in this object to configure your messages. All properties have equivalent HTML custom attributes, which you can add inline on the HTML elements that you target for messages.
Note: Properties that you define using HTML attributes for a given message value override duplicate properties that you set using the configuration object and the paypal.Messages function.

​
amount

Product price or cart amount in dollars. For example, pass $598.94 as 598.94. We strongly recommended using this property.
Value typePossible values
NumberAny number with 0-2 decimal places
Note: The inline HTML attribute for this property is data-pp-amount.

​
currency

Buyer’s currency code
Value typePossible valueDescription
StringUSDUS dollar
GBPBritish pound
EUREuro
AUDAustralian dollar
Note: The inline HTML attribute for this property is data-pp-currency.

​
style.layout

Overall style or type of message
Value typePossible valueDescription
StringtextLightweight contextual message (Default)
flexResponsive banner
Note: The inline HTML attribute for this property is data-pp-style-layout.

​
style.logo.type

Type of logo to use in messages that have the text value for style.layout
Value typePossible valueDescriptionExample
StringprimarySingle-line PayPal or PayPal Credit logo (Default),text,message,for,a,Pay,Later,offer,with,12,pixel,font,,left-aligned,,black,text,on,a,white,background,,with,a,PayPal,logo,that,displays,the,PayPal,icon,and,name,on,the,left,side,of,the,text
alternativePP monogram or PP Credit logo,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
inlineSame as primary, but inline with the content (Recommended),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
noneNo logo, text only,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
Note: The inline HTML attribute for this property is data-pp-style-logo-type.

​
style.logo.position

Position of the logo, relative to the message content, to use in messages that have the text value for style.layout and primary or alternative for style.logo.type
Value typePossible valueDescriptionExample
StringleftLogo appears to the left of the text (Default),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 appears to the right of the text,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
topLogo appears above the text,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
Note: The inline HTML attribute for this property is data-pp-style-logo-position.

​
style.text.color

The color of the text and logo to use in messages that have the text value for style.layout
Value typePossible valueDescriptionExample
StringblackBlack text with a colored logo (Default),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 logo,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
monochromeBlack text with a black logo,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
grayscaleBlack text with a grayscale logo,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
Note: The inline HTML attribute for this property is data-pp-style-text-color.

​
style.text.size

Font size to use in messages that have the text value for style.layout
Value typePossible valueDescriptionExample
Number10, 11Smaller text sizes,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
12Standard text size (Default),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
13, 14, 15, 16Larger texts sizes,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
Note: The inline HTML attribute for this property is data-pp-style-text-size.

​
style.text.align

Alignment to use in messages that have the text value for style.layout
Value typePossible valueDescriptionExample
StringleftAligns text at the left (Default),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
centerCenters text,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
rightAligns text at the right,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
Note: The inline HTML attribute for this property is data-pp-style-align.

​
style.color

Background color to use for messages that have the flex value for style.layout
Value typePossible valueDescriptionExample
StringblueBlue background with white text and a white logo (Default),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
blackBlack background with white text and a white logo,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 background with blue text, a colored logo, and a blue border,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-no-borderWhite background with blue text and a colored logo and no border for the message,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
grayLight gray background with blue text and a colored logo,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
monochromeWhite background with black text and a black logo,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
grayscaleWhite background with black text and a grayscale logo,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
Note: The inline HTML attribute for this property is data-pp-style-color.

​
style.ratio

Ratio to use for messages that have the flex value for style.layout
Value typePossible valueDescriptionExample
String1x11x1 ratio that flexes between 120px and 300px wide (Default),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
1x41x4 ratio that is 160px wide,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
8x18x1 ratio that flexes between 250px and 768px,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
20x120x1 ratio that flexes between 250px and 1129px wide,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
Note: The inline HTML attribute for this property is data-pp-style-ratio.

​
pageType

Informs PayPal’s analytics and system logging of the type of page on which you put the message
Value typePossible valueDescription
StringhomeMessage is on the home page of the ecommerce site
product-listingMessage is on the product listing page
product-detailsMessage is on the product details page
search-resultsMessage is on the search results page
cartMessage is on the cart page
mini-cartMessage is on the mini-cart page
checkoutMessage is on the checkout page
Note: The inline HTML attribute for this property is data-pp-pageType.

​
contextualComponents

Visual design and content of the message that you can use to match it to an adjacent component. Use contextualComponents when you place the message near checkout buttons or near a PayPal or Pay Later logo or mark.
Note: Using one of the *_MARK values that appear in the following table overrides some other style properties, such as the properties for a logo, for example, style.logo.position.
Value typePossible valueDescriptionExample
StringPAYPAL_BUTTONMessages feature both PayPal and Pay Later and use the PayPal monogram logo by default.,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
PAY_LATER_BUTTONMessages feature PayLater only and use the PayPal monogram logo by default.,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
PAYPAL_MARKMessages feature both PayPal and Pay Later and do not include a PayPal logo.,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
PAY_LATER_MARKMessages feature only PayPal Pay Later and do not include a PayPal logo.,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
Note: The inline HTML attribute for this property is data-pp-contextualComponents.

​
onApply

Callback function that an app calls when a user selects an Apply link or button in the pop-up modal.
Note: The inline HTML attribute for this property is data-pp-onapply.

​
onClick

Callback function that an app calls when a user selects a message.
Note: The inline HTML attribute for this property is data-pp-onclick.

​
onRender

Callback function that an app calls when a messages finishes rendering into the DOM.
Note: The inline HTML attribute for this property is data-pp-onrender.
⌘I