Pay Later messaging reference

DocsCurrent

Last updated: Mar 14th, 6:13pm

The following reference describes how to customize Pay Later messaging in the code samples.

Script query parameters

Pass these parameters to the JavaScript SDK script URL as the query parameters that apply to Pay Later messaging.

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

Sample code

1<script
2  src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&merchant-id=MERCHANT_ID&components=messages"
3  data-partner-attribution-id="BN_CODE"
4  data-namespace="PayPalSDK"
5></script>

Parameter

Example value

Description

client-idThe client ID identifies the PayPal account for the messages component.a1b2c3d4e5f6
merchant-idThe merchant ID of a merchant for whom you're facilitating a message. Only required when you are acting on behalf of another merchant.abcdef123456
data-partner-attribution-idAlso known as BN code. Your BN code is issued to you as part of the onboarding process.6f5e4d3c2b1a
data-namespaceThe name to use as a global variable when the SDK loads. Only required if you're using a legacy checkout integration such as checkout.js. Can be any string, except paypal. For the example value, invoke PayPalSDK.Messages() in your integration.PayPalSDK

Messages function

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

Arguments

Type

Description

Configures layout, style for Pay Later messaging. Returns a Message object.Message configuration objectObject

Message object

The Message object contains the following properties:

Property

Type

Description

renderDetermines where to render the Pay Later messages 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.Function

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

N/aamountJump to amountAny number, up to two decimals precision
N/acurrencyJump to currencyUSD, GBP, EUR, AUD
textstyle.layoutJump to style.layouttext, flex
primarystyle.logo.typeJump to style.logo.typeprimary, alternative, inline, none
leftstyle.logo.positionJump to style.logo.positionleft, right, top
blackstyle.text.colorJump to style.text.colorblack, white, monochrome, grayscale
12style.text.sizeJump to style.text.size10, 11, 12, 13, 14, 15, 16
leftstyle.text.alignJump to style.text.alignleft, center, right
bluestyle.colorJump to style.colorblue, black, white, gray, monochrome, grayscale
1x1style.ratioJump to style.ratio1x1, 1x4, 8x1, 20x1
N/apageTypeJump to payeTypehome, product-listing,product-details,search-results,cart,mini-cart,checkout
N/aonApplyJump to onApplyAny JavaScript function
N/aonClickJump to onClickAny JavaScript function
N/aonRenderJump to onRenderAny JavaScript function

amount

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

Object Property (path)

Inline HTML Attribute

Value Type

Possible Values

amountNumber | Stringdata-pp-amountAny number, up to two decimal places

currency

The buyer's currency code.

Object Property (path)

Inline HTML Attribute

Value Type

Stringcurrencydata-pp-currency

Set this option to one of these values:

Value

Description

United States of America DollarUSD
Great Britain PoundGBP
EuroEUR
Australian DollarAUD

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

Stringstyle.layoutdata-pp-style-layout

Set this option to one of these values:

Value

Description

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

style.logo.type

Sets the type of logo used in text layout messages.

Object Property (path)

Inline HTML Attribute

Dependency

Value Type

Stringstyle.layout === 'text'style.logo.typedata-pp-style-logo-type

Set this option to one of these values:

Value

Description

Preview

,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,textDefault. Single-line PayPal or PayPal Credit logoprimary
,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"PP" monogram or "PP Credit" logoalternative
,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,textRecommended. Same as primary logo, but inline with the contentinline
text,message,for,a,Pay,Later,offer,with,12,pixel,font,,left-aligned,,black,text,on,a,white,background,,without,a,PayPal,logoNo logo, text onlynone

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

Stringstyle.layout === 'text'&& (style.logo.type==='primary'||style.logo.type=== 'alternative')style.logo.positiondata-pp-style-logo-position

Set this option to one of these values:

Value

Description

Preview

,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,textDefault. Logo left of the text.left
,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,textLogo right of the text.right
,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,textLogo above of the text.top

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

Stringstyle.layout === 'text'style.text.colordata-pp-style-text-color

Set this option to one of these values:

Value

Description

Preview

,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,textDefault. Black text with colored logoblack
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,textWhite text with a white logowhite
,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,textBlack text with a black logomonochrome
,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,textBlack text with a grayscale logograyscale

style.text.size

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

Object Property (path)

Inline HTML Attribute

Dependency

Value Type

Numberstyle.layout === 'text'style.text.sizedata-pp-style-text-size

Set this option to one of these values:

Value

Description

Preview

Pay,later,messaging,text,alternative,left,black,multi,smallSmaller text sizes.10, 11
Pay,later,messaging,text,alternative,left,black,multi,defaultDefault. Standard text size.12
ay,later,messaging,text,alternative,left,black,multi,largeLarger text sizes.13, 14, 15, 16

style.text.align

Sets the direction the text aligns for text layout messages.

Object Property (path)

Inline HTML Attribute

Dependency

Value Type

Stringstyle.layout === 'text'style.text.aligndata-pp-style-align

Set this option to one of these values:

Value

Description

Preview

,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,leftDefault. Text is left aligned.left
,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,centerText is center aligned.center
,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,rightText is right aligned.right

style.color

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

Object Property (path)

Inline HTML Attribute

Dependency

Value Type

Stringstyle.layout === 'flex'style.colordata-pp-style-color

Set this option to one of these values:

Value

Description

Preview

A,square,British,flex,message,for,a,Pay,Later,offer,with,white,text,and,logo,on,a,blue,backgroundDefault. Blue background with white text and white logoblue
A,square,British,flex,message,for,a,Pay,Later,offer,with,white,text,and,logo,on,a,black,backgroundBlack background with white text and white logoblack
A,square,British,flex,message,for,a,Pay,Later,offer,with,black,text,and,logo,on,a,white,background,with,a,blue,borderWhite background with blue text, colored logo, and blue borderwhite
A,square,British,flex,message,for,a,Pay,Later,offer,with,blue,text,and,a,colored,logo,on,a,light,gray,backgroundLight gray background with blue text and colored logogray
A,square,British,flex,message,for,a,Pay,Later,offer,with,black,text,and,logo,on,a,white,backgroundWhite background with black text and black logomonochrome
A,square,British,flex,message,for,a,Pay,Later,offer,with,blue,text,and,a,colored,logo,on,a,light,gray,backgroundscaleWhite background with black text and grayscale logograyscale

style.ratio

The ratio of the flexible display banner.

Object Property (path)

Inline HTML Attribute

Dependency

Value Type

Stringstyle.layout === 'flex'style.ratiodata-pp-style-ratio

Set this option to one of these values:

Value

Description

Preview

A,square,flex,message,for,a,Pay,Later,offer,with,white,text,and,logo,on,a,blue,backgroundDefault. Ratio of 1x1 that flexes between 120px and 300px wide1x1
A,rectangular,flex,message,with,a,width,to,height,ratio,of,1x4,for,a,Pay,Later,offer,with,white,text,and,logo,on,a,blue,backgroundRatio of 1x4 that is 160px wide1x4
A,rectangular,flex,message,with,a,width,to,height,ratio,of,8x1,for,a,Pay,Later,offer,with,white,text,and,logo,on,a,blue,backgroundRatio of 8x1 that flexes between 250px and 768px wide8x1
A,rectangular,flex,message,with,a,width,to,height,ratio,of,20x1,for,a,Pay,Later,offer,with,white,text,and,logo,on,a,blue,backgroundRatio of 20x1 that flexes between 250px and 1169px wide20x1

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

Stringplacementdata-pp-placement

Set this option to one of these values:

Value

Description

The message is placed on the home page.home
The message is placed on a category page.category
The message is placed on the product page.product
The message is placed on the product list page.product-list
The message is placed on the cart page.cart
The message is placed on the payment page.payment

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

FunctiononApplydata-pp-onapplyAny JavaScript function

onClick

Callback function called immediately after user selects on a message.

Object Property (path)

Inline HTML Attribute

Dependency

Value Type

Any JavaScript functionFunctiononClickdata-pp-onclick

onRender

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

Object Property (path)

Inline HTML Attribute

Dependency

Value Type

Any JavaScript functionFunctiononRenderdata-pp-onrender