Customize Pay Later messages

CurrentDocs

Last updated: Apr 2nd, 11:39pm

Learn about the customization options you can use to modify the style and layout for your Pay Later messaging.

Product or cart amount

If you pass an amount value to each message, the SDK can render more specific messages that bring more value to you and your customers. Without an amount, the SDK falls back to a more generalized message that, while still effective, has a weaker value proposition to your customers.

For your product details and product listing pages, set the data-pp-amount attribute to the product's price. For your cart or checkout pages, set the attribute to the total cart value.

Example

    1<div
    2  data-pp-message
    3  data-pp-pageType="product-details"
    4  data-pp-amount="120.00"
    5></div>

    Page type

    Use the data-pp-pageType attribute to help the SDK identify the type of page where a message appears. This data is processed and presented to you on the analytics dashboard in your merchant account. In this way, you can view the performance breakdown of these messages across different page types on your website.

    This attribute accepts `home`, `product-listing`, `product-details`, `search-results`, `cart`, `mini-cart`, and `checkout` as values.

    Example

      1<div
      2  data-pp-message
      3  data-pp-pageType="product-details"
      4></div>

      Layout and style

      You can configure messages for different layouts and styles using optional HTML attributes.

      The message layout determines the available style options. The two layout options are:

      1. Lightweight text-based messages (data-pp-style-layout="text")
      2. Flexible display banners (data-pp-style-layout="flex")

      The HTML attribute data-pp-style-layout determines the message's layout. If you omit this attribute, then the SDK will default to the value text. Setting this value to flex renders your message as a flexible display banner.


      1. Lightweight text-based messages

      This message layout is ideal for placement underneath product and cart prices throughout your site. Passing in the product price or total cart amount results in a message that shows monthly payment messaging to your customers, informing them of the affordability of your goods and services using Pay Later offers for financing.

      Inline HTML attribute Value
      data-pp-style-layout text

      Example

        1<div
        2  data-pp-message
        3  data-pp-pageType="product-details"
        4  data-pp-amount="120.00"
        5  data-pp-style-layout="text"
        6></div>

        Renders

        Pay,later,messaging,text,primary,left,black

        For lightweight text-based messages, you can configure the following attributes:

        • Logo type
        • Logo position
        • Text color
        • Text size
        • Text align

        Logo Type

        • Inline HTML attribute: data-pp-style-logo-type

        Sets the PayPal logo used in the message.

        Set this attribute's value to one of the following:

        Value Description Preview
        primary Default. Full PayPal Logo. Pay,later,messaging,text,primary,left,black
        alternative PayPal monogram Logo. Pay,later,messaging,text,alternative,left,black
        inline Single line PayPal Logo without monogram. Pay,later,messaging,text,inline,black
        none No logo. Text only. Pay,later,messaging,text,inline,black
        Example
          1<div
          2  data-pp-message
          3  data-pp-pageType="product-details"
          4  data-pp-amount="120.00"
          5  data-pp-style-layout="text"
          6  data-pp-style-logo-type="alternative"
          7></div>
          Renders

          Pay,later,messaging,text,alternative,left,black

          Logo Position

          • Inline HTML attribute: data-pp-style-logo-position

          Sets the position of the PayPal logo in the message.

          Set this attribute's value to one of the following:

          Value Description Preview
          left Default. Logo left of the text. Pay,later,messaging,text,primary,left,black
          right Logo right of the text. Pay,later,messaging,text,primary,right,black
          top Logo above the text. Pay,later,messaging,text,primary,top,black
          Example
            1<div
            2  data-pp-message
            3  data-pp-pageType="product-details"
            4  data-pp-amount="120.00"
            5  data-pp-style-layout="text"
            6  data-pp-style-logo-position="top"
            7></div>
            Renders

            Pay,later,messaging,text,primary,top,black

            Text Color

            • Inline HTML attribute: data-pp-style-text-color

            Sets the text and logo color of the message.

            Set this attribute's value to one of the following:

            Value Description Preview
            black Default. Black text with a colored logo. Pay,later,messaging,text,primary,left,black
            white White text with a white logo. Pay,later,messaging,text,primary,left,white
            monochrome Black text with a black logo. Pay,later,messaging,text,primary,left,black
            grayscale Black text with a grayscale logo. Pay,later,messaging,text,primary,left,white
            Example
              1<div
              2  data-pp-message
              3  data-pp-pageType="product-details"
              4  data-pp-amount="120.00"
              5  data-pp-style-layout="text"
              6  data-pp-style-text-color="white"
              7></div>
              Renders

              Pay,later,messaging,text,primary,left,white

              Text size

              Sets the size of the message text.

              Object property (path) Inline HTML attribute Possible values
              style.text.size data-pp-style-text-size 10, 11, 12, 13, 14, 15, 16

              Set this option to one of these values:

              Value Description Preview
              10, 11 Smaller text sizes. Two,Australian,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
              12 Default. Standard text size. Australian,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, 16 Larger text sizes. Four,Australian,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

              Text align

              Sets the direction the text aligns for text layout messages.

              Object property (path) Inline HTML attribute Possible values
              style.text.align data-pp-style-text-align left, center, right

              Set this option to one of these values:

              Value Description Preview
              left Default. Text is left aligned Australian,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 Australian,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 Australian,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
              Example
                1<div
                2  data-pp-message
                3  data-pp-pageType="home"
                4  data-pp-amount="120.00"
                5  data-pp-style-layout="text"
                6  data-pp-style-text-align="center"
                7></div>
                Renders

                Australian,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

                2. Flexible display banners

                This message layout is ideal for placement above the fold on your home and product listing category pages. Designed to be eye-catching, they inform your customers of pay later offers.

                • Inline HTML attribute: data-pp-style-layout, value: flex

                Example

                  1<div
                  2  data-pp-message
                  3  data-pp-pageType="home"
                  4  data-pp-amount="120.00"
                  5  data-pp-style-layout="flex"
                  6></div>

                  Renders

                  Pay,later,messaging,flex,1x1,blue

                  Color

                  • Inline HTML attribute: data-pp-style-color

                  Sets the color of the message.

                  Set this attribute's value to one of the following:

                  Value Description Preview
                  blue Default. Blue background with white text and white logo. Pay,later,messaging,flex,1x1,blue
                  black Black background with white text and white logo. Pay,later,messaging,flex,1x1,black
                  white White background with blue text, colored logo, and blue border. Pay,later,messaging,flex,1x1,white
                  gray Light gray background with blue text and colored logo. Pay,later,messaging,flex,1x1,gray
                  monochrome White background with black text and black logo. Pay,later,messaging,flex,1x1,gray
                  grayscale White background with black text and grayscale logo. Pay,later,messaging,flex,1x1,gray
                  Example
                    1<div
                    2  data-pp-message
                    3  data-pp-pageType="home"
                    4  data-pp-amount="120.00"
                    5  data-pp-style-layout="flex"
                    6  data-pp-style-color="black"
                    7></div>
                    Renders

                    Pay,later,messaging,flex,1x1,black

                    Ratio

                    • Inline HTML attribute: data-pp-style-ratio

                    Sets the shape and size of the message.

                    Set this attribute's value to one of the following:

                    Value Description Preview
                    1x1 Default. Ratio of 1x1 that flexes between 120px and 300px wide. Pay,later,messaging,flex,1x1,blue
                    1x4 Ratio of 1x4 that is 160px wide. Pay,later,messaging,flex,1x4,blue
                    8x1 Ratio of 8x1 that flexes between 250px and 768px wide. Pay,later,messaging,flex,8x1,blue
                    20x1 Ratio of 20x1 that flexes between 250px and 1169px wide. Pay,later,messaging,flex,20x1,blue
                    Example
                      1<div
                      2  data-pp-message
                      3  data-pp-pageType="home"
                      4  data-pp-amount="120.00"
                      5  data-pp-style-layout="flex"
                      6  data-pp-style-ratio="8x1"
                      7></div>
                      Renders

                      Pay,later,messaging,flex,8x1,blue

                      ReferencePayPal.comPrivacyCookiesSupportLegalContact

                      We use cookies to improve your experience on our site. May we use marketing cookies to show you personalized ads? Manage all cookies