Reference

Learn others ways to configure Pay Later messages

DocsCurrentLast updated: September 22nd 2021, @ 1:09:29 am


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

On this page

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 euros. 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 fr 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
alternative "PP" monogram or "PP Credit" logo fr text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a PayPal logo displaying only the PayPal icon on the left side of the text
inline Recommended. Same as primary logo, but inline with the content fr text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a PayPal brand name logo displayed within the text
none No logo, text only fr text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, without a PayPal logo

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. fr 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
right Logo right of the text. fr text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a primary PayPal logo on the right side of the text
top Logo above of the text. fr text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a primary PayPal logo on top 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 fr 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 White text with a white logo fr text message for a Pay Later offer with 12 pixel font, left-aligned, white text on a black background, with a white primary PayPal logo on the left side of the text
monochrome Black text with a black logo fr text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a monochrome primary PayPal logo on the left side of the text
grayscale Black text with a grayscale logo fr text message for a Pay Later offer with 12 pixel font, left-aligned, grayscale text on a white background, with a grayscale primary PayPal logo on the left side of the text

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. Pay later messaging text alternative left black multi small
12 Default. Standard text size. Pay later messaging text alternative left black multi default
13, 14, 15, 16 Larger text sizes. Pay later messaging text alternative left black multi large

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. fr 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 left
center Text is center aligned. fr 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 center
right Text is right aligned. fr 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 right

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 A square French flex message for a Pay Later offer with white text and logo on a blue background
black Black background with white text and white logo A square French flex message for a Pay Later offer with white text and logo on a black background
white White background with blue text, colored logo, and blue border A square French flex message for a Pay Later offer with black text and logo on a white background with a blue border
gray Light gray background with blue text and colored logo A square French flex message for a Pay Later offer with blue text and a colored logo on a light gray background
monochrome White background with black text and black logo A square French flex message for a Pay Later offer with black text and logo on a white background
grayscale White background with black text and grayscale logo A square French flex message for a Pay Later offer with blue text and a colored logo on a light gray backgroundscale

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 A square fr flex message for a Pay Later offer with white text and logo on a blue background
1x4 Ratio of 1x4 that is 160px wide A rectangular fr flex message with a width to height ratio of 1x4 for a Pay Later offer with white text and logo on a blue background
8x1 Ratio of 8x1 that flexes between 250px and 768px wide A rectangular fr flex message with a width to height ratio of 8x1 for a Pay Later offer with white text and logo on a blue background
20x1 Ratio of 20x1 that flexes between 250px and 1169px wide A rectangular fr flex message with a width to height ratio of 20x1 for a Pay Later offer with white text and logo on a blue background

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