Reference

Learn other ways to configure Pay Later messages

Country or region

The following tables describe the configuration settings for PayPal Pay Later messages.

Script query parameters

Pass these parameters to the PayPal JavaScript SDK script URL as the query parameters that apply to Pay Later messaging. This is a subset of the possible query parameters that supports the JavaScript SDK.

For the full set of script parameters, see the JavaScript SDK guide.

Sample code

<script
  src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&merchant-id=MERCHANT_ID_IF_NECESSARY&components=messages"
  data-partner-attribution-id="BN_CODE"
  data-namespace="PayPalSDK"
></script>

Parameter	Example value	Description
`client-id`	`a1b2c3d4e5f6`	The client ID identifies the PayPal account for the messages component.
`merchant-id`	`abcdef123456`	The merchant ID of a merchant for whom you're facilitating a message. Use this parameter only for partner, marketplaces, and cart solutions, when you are acting on behalf of another merchant. This parameter is essential to guarantee the merchant sees the best possible message.
`data-partner-attribution-id`	`6f5e4d3c2b1a`	Also known as BN code. Your BN code is issued to you as part of the onboarding process.
`data-namespace`	`PayPalSDK`	Required if you're using a legacy checkout integration such as `checkout.js`. The name you'd like to use for the global variable when the SDK loads. For the example value, you would invoke `PayPalSDK.Messages()` in your integration. Can be any string, except `paypal`.

Messages function

Create a Message object by invoking paypal.Messages function with the following arguments. Returns a Message object.

Arguments	Type	Description
Message configuration object	Object	Configures layout, style for Pay Later messaging

Message object

The Message object contains the following properties:

Property	Type	Description
`render`	Function	Determines where to render the Pay Later message(s) on the page, and renders them. Accepts a valid CSS selector string, single `HTMLElement` reference, or array of `HTMLElement` references. Returns a `Promise` that resolves after all messages have rendered to the DOM.

Message configuration object

The following table lists all configuration properties that you can set on the configuration object. This configuration object is passed into the Messages function to configure your messages. All of these properties have equivalent HTML custom attributes, which you can add inline on the HTML elements you target for messages. None of these properties are mandatory, although several are recommended. Some properties have default values. If no value or an invalid value is passed, the default value is used.

Note: Properties that are defined using HTML attributes for a given message value overrides duplicate properties set using the configuration object and paypal.Messages function.

Object property (path)	HTML attribute	Dependency	Value Type	Possible values	Default	Description
`amount`	`data-pp-amount`	N/a	Number \| String	Any number, up to two decimals precision	N/a	The product price or cart amount in dollars. For example, $598.94 should be passed as 598.94. with a weaker value proposition. Strongly recommended so that the best message is rendered
`style.layout`	`data-pp-style-layout`	N/a	String	`text`, `flex`	`text`	Sets the overal style/type of message. Can choose between lightweight text-based or flexible, responsive banner
`style.logo.type`	`data-pp-style` `-logo-type`	`style.layout === 'text'`	String	`primary`, `alternative`, `inline`, `none`	`primary`	Sets the type of logo used in `text` layout messages
`style.logo.position`	`data-pp-style` `-logo-position`	`style.layout === 'text'` `&& (style.logo.type` `=== 'primary'` `\|\| style.logo.type` `=== 'alternative')`	String	`left`, `right`, `top`	`left`	Sets the position of the logo relative to the message content for messages using a `text` layout.
`style.text.color`	`data-pp-style` `-text-color`	`style.layout === 'text'`	String	`black`, `white`, `monochrome`, `grayscale`	`black`	Sets the color of the text and PayPal/PayPal Credit logos for `text` layout messages
`style.text.size`	`data-pp-style` `-text-size`	`style.layout === 'text'`	Number	`10`, `11`, `12`, `13`, `14`, `15`, `16`	`12`	Sets the font size of the text for `text` layout messages
`style.color`	`data-pp-style-color`	`style.layout === 'flex'`	String	`blue`, `black`, `white`, `white-no-border`, `gray`, `monochrome`, `grayscale`	`blue`	Sets the color of the message background for `flex` layout messages
`style.ratio`	`data-pp-style-ratio`	`style.layout === 'text'`	String	`1x1`, `1x4`, `8x1`, `20x1`	`1x1`	The ratio of the flexible display banner
`placement`	`data-pp-placement`	N/a	String	`home`, `category`, `product`, `cart`, `payment`	N/a	Informs PayPal's analytics and system logging of the type of e-commerce page on which the message is placed
`onApply`	`data-pp-onApply`	N/a	Function	Any JavaScript function	N/a	Callback function called immediately after user selects on an Apply link or button in the pop-up modal
`onClick`	`data-pp-onClick`	N/a	Function	Any JavaScript function	N/a	Callback function called immediately after user selects on a message
`onRender`	`data-pp-onRender`	N/a	Function	Any JavaScript function	N/a	Callback function called immediately after a message has been successfully rendered into the DOM