Reference

Learn other ways to configure Pay Later messages

DocsCurrentLast updated: November 25th 2023, @ 8:25:22 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>
ParameterExample valueDescription
client-ida1b2c3d4e5f6The client ID identifies the PayPal account for the messages component.
merchant-idabcdef123456The 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-id6f5e4d3c2b1aAlso known as BN code. Your BN code is issued to you as part of the onboarding process.
data-namespacePayPalSDKRequired 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.

ArgumentsTypeDescription
Message Configuration ObjectObjectConfigures layout, style for Pay Later messaging

Message object

The Message object contains the following properties:

PropertyTypeDescriptionAcceptsReturns
renderFunctionDetermines 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 valuesDefaultDetails
amountAny number, up to two decimals precisionN/aJump to amount
currencyUSD, GBP, EUR, AUDN/aJump to currency
style.layouttext, flextextJump to style.layout
style.logo.typeprimary, alternative, inline, noneprimaryJump to style.logo.type
style.logo.positionleft, right, topleftJump to style.logo.position
style.text.colorblack, white, monochrome, grayscaleblackJump to style.text.color
style.text.size10, 11, 12, 13, 14, 15, 1612Jump to style.text.size
style.text.alignleft, center, rightleftJump to style.text.align
style.colorblue, black, white, gray, monochrome, grayscaleblueJump to style.color
style.ratio1x1, 1x4, 8x1, 20x11x1Jump to style.ratio
placementhome, category, product, product-list, cart, paymentN/aJump to placement
onApplyAny JavaScript functionN/aJump to onApply
onClickAny JavaScript functionN/aJump to onClick
onRenderAny JavaScript functionN/aJump to onRender

amount

The product price or cart amount in euros. For example, €598.94 should be passed as 598.94. Strongly recommended so that the best message is rendered.

Object Property (path)Inline HTML AttributeValue TypePossible Values
amountdata-pp-amountNumber | StringAny number, up to two decimal places

currency

The buyer's currency code.

Object Property (path)Inline HTML AttributeValue Type
currencydata-pp-currencyString

Set this option to one of these values:

ValueDescription
USDUnited States of America Dollar
GBPGreat Britain Pound
EUREuro
AUDAustralian Dollar

style.layout

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

Object Property (path)Inline HTML AttributeValue Type
style.layoutdata-pp-style-layoutString

Set this option to one of these values:

ValueDescription
textDefault. Lightweight, contextual message.
flexResponsive display banner.

style.logo.type

Sets the type of logo used in text layout messages.

Object Property (path)Inline HTML AttributeDependencyValue Type
style.logo.typedata-pp-style-logo-typestyle.layout === 'text'String

Set this option to one of these values:

ValueDescriptionPreview
primaryDefault. Single-line PayPal or PayPal Credit logoItalian 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" logoItalian 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
inlineRecommended. Same as primary logo, but inline with the contentItalian Pay Later messaging text inline black
noneNo logo, text onlyItalian Pay Later messaging text inline black

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 AttributeDependencyValue Type
style.logo.positiondata-pp-style-logo-positionstyle.layout === 'text'
&& (style.logo.type
=== 'primary'
|| style.logo.type
=== 'alternative')
String

Set this option to one of these values:

ValueDescriptionPreview
leftDefault. Logo left of the text.Italian 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 right of the text.Italian 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
topLogo above of the text.Italian 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 AttributeDependencyValue Type
style.text.colordata-pp-style-text-colorstyle.layout === 'text'String

Set this option to one of these values:

ValueDescriptionPreview
blackDefault. Black text with colored logoItalian 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 logoItalian 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
monochromeBlack text with a black logoItalian 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
grayscaleBlack text with a grayscale logoItalian 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 AttributeDependencyValue Type
style.text.sizedata-pp-style-text-sizestyle.layout === 'text'Number

Set this option to one of these values:

ValueDescriptionPreview
10, 11Smaller text sizes.Two Italian text message for a Pay Later offer with 10 and 11 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
12Default. Standard text size.Italian 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
13, 14, 15, 16Larger text sizes.Four Italian text message for a Pay Later offer with 13, 14, 15, and 16 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)

style.text.align

Sets the direction the text aligns for text layout messages.

Object Property (path)Inline HTML AttributeDependencyValue Type
style.text.aligndata-pp-style-alignstyle.layout === 'text'String

Set this option to one of these values:

ValueDescriptionPreview
leftDefault. Text is left aligned.Italian 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
centerText is center aligned.Italian 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
rightText is right aligned.Italian 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 AttributeDependencyValue Type
style.colordata-pp-style-colorstyle.layout === 'flex'String

Set this option to one of these values:

ValueDescriptionPreview
blueDefault. Blue background with white text and white logoA square Italian flex message for a Pay Later offer with white text and logo on a blue background
blackBlack background with white text and white logoA square Italian flex message for a Pay Later offer with white text and logo on a black background
whiteWhite background with blue text, colored logo, and blue borderA square Italian flex message for a Pay Later offer with black text and logo on a white background with a blue border
grayLight gray background with blue text and colored logoA square Italian flex message for a Pay Later offer with blue text and a colored logo on a light gray background
monochromeWhite background with black text and black logoA square Italian flex message for a Pay Later offer with black text and logo on a white background
grayscaleWhite background with black text and grayscale logoA square Italian 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 AttributeDependencyValue Type
style.ratiodata-pp-style-ratiostyle.layout === 'flex'String

Set this option to one of these values:

ValueDescriptionPreview
1x1Default. Ratio of 1x1 that flexes between 120px and 300px wideA square Italian flex message for a Pay Later offer with white text and logo on a blue background
1x4Ratio of 1x4 that is 160px wideA rectangular Italian flex message with a width to height ratio of 1x4 for a Pay Later offer with white text and logo on a blue background
8x1Ratio of 8x1 that flexes between 250px and 768px wideA rectangular Italian flex message with a width to height ratio of 8x1 for a Pay Later offer with white text and logo on a blue background
20x1Ratio of 20x1 that flexes between 250px and 1169px wideA rectangular Italian 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 AttributeValue Type
placementdata-pp-placementString

Set this option to one of these values:

ValueDescription
homeThe message is placed on the home page.
categoryThe message is placed on a category page.
productThe message is placed on the product page.
product-listThe message is placed on a product list page.
cartThe message is placed on the cart page.
paymentThe 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 AttributeValue TypePossible Values
onApplydata-pp-onapplyFunctionAny JavaScript function

onClick

Callback function called immediately after user selects on a message.

Object Property (path)Inline HTML AttributeValue TypePossible Values
onClickdata-pp-onclickFunctionAny JavaScript function

onRender

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

Object Property (path)Inline HTML AttributeValue TypePossible Values
onRenderdata-pp-onrenderFunctionAny JavaScript function