Customize Pay Later messages

CurrentDocs

Last updated: Apr 3rd, 5:09pm

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

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

        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. French,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 PayPal monogram Logo. French,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 Single line PayPal Logo without monogram. French,Pay,Later,messaging,text,inline,black
        none No logo. Text only. French,Pay,Later,messaging,text,none,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

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

          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. French,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. French,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 the text. French,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
          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

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

            Text color

            Sets the text and logo color of the message.

            Inline HTML attribute Possible values
            data-pp-style-text-color black, white, monochrome, grayscale

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

            Value Description Preview
            black Default. Black text with colored logo French,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 French,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 French,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 French,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
            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

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

              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,French,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. French,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,French,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 French,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 French,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 French,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

                French,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 pages. Designed to be eye-catching, they inform your customers that they can buy now and pay later.

                Inline HTML attribute Value
                data-pp-style-layout 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

                  A,square,French,flex,message,for,a,Pay,Later,offer,with,white,text,and,logo,on,a,blue,background

                  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. 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. French,Pay,Later,messaging,flex,1x1,white
                  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,blue,text,and,a,colored,logo,on,a,light,gray,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,background
                  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

                    A,square,French,flex,message,for,a,Pay,Later,offer,with,white,text,and,logo,on,a,black,background

                    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. A,square,French,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,French,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,French,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,French,flex,message,with,a,width,to,height,ratio,of,20x1,for,a,Pay,Later,offer,with,white,text,and,logo,on,a,blue,background
                    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

                      A,rectangular,French,flex,message,with,a,width,to,height,ratio,of,8x1,for,a,Pay,Later,offer,with,white,text,and,logo,on,a,blue,background

                      See also

                      Explore advanced configurations and integrations with JavaScript in our advanced setup guide.

                      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