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-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. Only required when you are acting on behalf of another merchant.
    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 The 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.

    Messages function

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

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

    Message object

    The Message object contains the following properties:

    Property Type Description
    render Function Determines 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.

    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 properties have equivalent HTML custom attributes, which you can add inline on the HTML elements you target for messages. For more information about an object property, click the object name in the table.

    Object property (path) Possible values Default
    amount Any number, up to two decimal places None
    currency
    • USD
    • GBP
    • EUR
    • AUD
    		 None
    style.layout
    • text
    • flex
    		 text
    style.logo.type
    • primary
    • alternative
    • inline
    • none
    		 primary
    style.logo.position
    • left
    • right
    • top
    		 left
    style.text.color
    • black
    • white
    • monochrome
    • grayscale
    		 black
    style.text.size
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    		 12
    style.text.align
    • left
    • center
    • right
    		 left
    style.color
    • blue
    • black
    • white
    • white-no-border
    • gray
    • monochrome
    • grayscale
    		 blue
    style.ratio
    • 1x1
    • 1x4
    • 8x1
    • 20x1
    		 1x1
    pageType
    • home
    • product-listing
    • product-details
    • search-results
    • cart
    • mini-cart
    • checkout
    		 None
    contextualComponents
    • PAYPAL_BUTTON
    • PAY_LATER_BUTTON
    • PAYPAL_MARK
    • PAY_LATER_MARK
    		None
    onApply Any JavaScript function None
    onClick Any JavaScript function None
    onRender Any JavaScript function None

    amount

    The product price or cart amount in dollars. 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
    amount data-pp-amount Number | String Any number, up to two decimal places

    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
    AUD Australian 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 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 ,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 ,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 ,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 ,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. ,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. ,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. ,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 ,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 ,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 ,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 ,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-align style.layout === 'text' String

    Set this option to one of these values:

    Value Description Preview
    left Default. Text is left aligned. ,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. ,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. ,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,US,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,US,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,US,flex,message,for,a,Pay,Later,offer,with,black,text,and,logo,on,a,white,background,with,a,blue,border
    white-no-border White background with blue text and colored logo A,square,US,flex,message,for,a,Pay,Later,offer,with,black,text,and,logo,on,a,white,background
    gray Light gray background with blue text and colored logo A,square,US,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,US,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,US,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,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,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,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,flex,message,with,a,width,to,height,ratio,of,20x1,for,a,Pay,Later,offer,with,white,text,and,logo,on,a,blue,background

    pageType

    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
    pageType data-pp-pageType String

    Set this option to one of these values:

    Value Description
    home The message is placed on the home page.
    product-listing The message is placed on a product listing page.
    product-details The message is placed on the product details page.
    search-results The message is placed on a search results page.
    cart The message is placed on the cart page.
    mini-cart The message is placed on the mini-cart page.
    checkout The message is placed on the checkout page.

    contextualComponents

    Sets the visual design and content of the message to match an adjacent component. Should be used when the message is placed near checkout buttons or near a PayPal or Pay Later logo or mark.

    Object Property (path) Inline HTML Attribute Dependency Value Type
    contextualComponents data-pp-contextualComponents style.layout === 'text' and message is adjacent to button or mark component String

    Set this option to one of these values:

    Value Description Preview
    PAYPAL_BUTTON Messages feature both PayPal and Pay Later. Default uses PayPal monogram logo. A,message,with,PayPal,monogram,logo.
    PAY_LATER_BUTTON Messages only feature Pay Later. Default uses PayPal monogram logo. A,message,with,PayPal,monogram,logo.
    PAYPAL_MARK Messages feature both PayPal and Pay Later. Does not use a PayPal logo. A,mark,message,with,no,PayPal,logo.
    PAY_LATER_MARK Messages only feature Pay Later. Does not use a PayPal logo. A,mark,message,with,no,PayPal,logo.

    Note: Using one of the above MARK values will make certain other style properties, like those related to the logo, not applicable. 

    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
    ReferencePayPal.comPrivacyCookiesSupportLegalContact

    If you accept cookies, we’ll use them to improve and customize your experience and enable our partners to show you personalized PayPal ads when you visit other sites. Manage cookies and learn more