Reference

The following tables display the values for the custom elements contained in the Code Samples.

On this page

• Script query parameters
• Messages function
• Message object

• Message configuration object

  • amount
  • buyerCountry
  • currency
  • style.layout
  • style.logo.type
  • style.logo.position
  • style.text.color
  • style.text.size
  • style.text.align
  • style.color
  • style.ratio
  • placement
  • onApply
  • onClick
  • onRender

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	Accepts	Returns
render	Function	Determines where to render the Pay Later message(s) and renders them.	A valid CSS selector string, a single HTMLElement reference, or an array of HTMLElement references.	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)	Possible values	Default	Details
amount	Any number, up to two decimals precision	N/a	Jump to amount
buyerCountry	Two letter country code designation	N/a	Jump to buyerCountry
currency	USD, GBP, EUR	N/a	Jump to currency
style.layout	text, flex	text	Jump to style.layout
style.logo.type	primary, alternative, inline, none	primary	Jump to style.logo.type
style.logo.position	left, right, top	left	Jump to style.logo.position
style.text.color	black, white, monochrome, grayscale	black	Jump to style.text.color
style.text.size	10, 11, 12, 13, 14, 15, 16	12	Jump to style.text.size
style.text.align	left, center, right	left	Jump to style.text.align
style.color	blue, black, white, gray, monochrome, grayscale	blue	Jump to style.color
style.ratio	1x1, 1x4, 8x1, 20x1	1x1	Jump to style.ratio
placement	home, category, product, cart, payment	N/a	Jump to placement
onApply	Any JavaScript function	N/a	Jump to onApply
onClick	Any JavaScript function	N/a	Jump to onClick
onRender	Any JavaScript function	N/a	Jump to onRender

amount

The product price or cart amount in pounds. For example, £598.94 should be passed as 598.94. with a weaker value proposition. Strongly recommended so that the best message is rendered.

Object Property (path)	Inline HTML Attribute	Value Type	Possible Values
amount	data-pp-amount	Number | String	Any number, up to two decimals precision

buyerCountry

The buyer's country.

Object Property (path)	Inline HTML Attribute	Value Type	Possible Values
buyerCountry	data-pp-buyercountry	String	Two letter country code designation

currency

The buyer's currency code.

Object Property (path)	Inline HTML Attribute	Value Type
currency	data-pp-currency	String

Set this option to one of these values:

Value	Description
USD	United States of America Dollar
GBP	Great Britain Pound
EUR	Euro

style.layout

Sets the overal style/type of message. Can choose between lightweight text-based or flexible, responsive banner.

Object Property (path)	Inline HTML Attribute	Value Type
style.layout	data-pp-style-layout	String

Set this option to one of these values:

Value	Description
text	Default. Lightweight, contextual message.
flex	Responsive display banner.

style.logo.type

Sets the type of logo used in text layout messages.

Object Property (path)	Inline HTML Attribute	Dependency	Value Type
style.logo.type	data-pp-style-logo-type	style.layout === 'text'	String

Set this option to one of these values:

Value	Description	Preview
primary	Default. Single-line PayPal or PayPal Credit logo
alternative	"PP" monogram or "PP Credit" logo
inline	Recommended. Same as primary logo, but inline with the content
none	No logo, text only

style.logo.position

Sets the position of the logo relative to the message content for messages using a text layout.

Object Property (path)	Inline HTML Attribute	Dependency	Value Type
style.logo.position	data-pp-style-logo-position	style.layout === 'text' && (style.logo.type === 'primary' || style.logo.type === 'alternative')	String

Set this option to one of these values:

Value	Description	Preview
left	Default. Logo left of the text.
right	Logo right of the text.
top	Logo above of the text.

style.text.color

Sets the color of the text and PayPal/PayPal Credit logos for text layout messages.

Object Property (path)	Inline HTML Attribute	Dependency	Value Type
style.text.color	data-pp-style-text-color	style.layout === 'text'	String

Set this option to one of these values:

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

style.text.size

Sets the font size of the text for text layout messages.

Object Property (path)	Inline HTML Attribute	Dependency	Value Type
style.text.size	data-pp-style-text-size	style.layout === 'text'	Number

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.

style.text.align

Sets the direction the text aligns for text layout messages.

Object Property (path)	Inline HTML Attribute	Dependency	Value Type
style.text.align	data-pp-style-text-align	style.layout === 'text'	String

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.

style.color

Sets the color of the message background for flex layout messages.

Object Property (path)	Inline HTML Attribute	Dependency	Value Type
style.color	data-pp-style-color	style.layout === 'flex'	String

Set this option to one of these values:

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
monochrome	White background with black text and black logo
grayscale	White background with black text and grayscale logo

style.ratio

The ratio of the flexible display banner.

Object Property (path)	Inline HTML Attribute	Dependency	Value Type
style.ratio	data-pp-style-ratio	style.layout === 'flex'	String

Set this option to one of these values:

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

placement

Informs PayPal's analytics and system logging of the type of e-commerce page on which the message is placed.

Object Property (path)	Inline HTML Attribute	Value Type
placement	data-pp-placement	String

Set this option to one of these values:

Value	Description
home	The message is placed on the home page.
category	The message is placed on a category page.
product	The message is placed on the product page.
cart	The message is placed on the cart page.
payment	The message is placed on the payment page.

onApply

Callback function called immediately after user selects on an Apply link or button in the pop-up modal.

Object Property (path)	Inline HTML Attribute	Value Type	Possible Values
onApply	data-pp-onapply	Function	Any JavaScript function

onClick

Callback function called immediately after user selects on a message.

Object Property (path)	Inline HTML Attribute	Value Type	Possible Values
onClick	data-pp-onclick	Function	Any JavaScript function

onRender

Callback function called immediately after a message has been successfully rendered into the DOM.

Object Property (path)	Inline HTML Attribute	Value Type	Possible Values
onRender	data-pp-onrender	Function	Any JavaScript function