Customize Pay Later messages

CurrentDocs

Last updated: Apr 3rd, 7:48pm

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

        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

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

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

        Logo type

        This attribute sets the logo type used in the message. The default, if it is not provided, is primary.

        Inline HTML attribute Possible values
        data-pp-style-logo-type inline, primary, alternative, none
        Value Description Preview
        primary Default. Full PayPal Logo. 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
        alternative PayPal monogram Logo. 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
        inline Single line PayPal Logo without monogram. Italian,Pay,Later,messaging,text,inline,black
        none No logo. Text only.
          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

          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

          Logo position

          Sets the position of the PayPal or PayPal Credit logo in the message.

          Inline HTML attribute Possible values
          data-pp-style-logo-position left, right, top

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

          Value Description Preview
          left Default. 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
          right Logo 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
          top Logo above 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
          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

            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

            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 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
            white White text with a white logo Italian,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 Italian,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 Italian,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

              Italian,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,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
              12 Default. 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, 16 Larger 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

              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 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
              center Text 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
              right Text 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
              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

                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

                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,Italian,flex,message,for,a,Pay,Later,offer,with,white,text,and,logo,on,a,blue,background

                  Color

                  Sets the background color of the flexible banner.

                  Inline HTML attribute Possible values
                  data-pp-style-color blue, black, white, gray

                  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,Italian,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,Italian,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. Italian,Pay,Later,messaging,flex,1x1,white
                  gray Light gray background with blue text and colored logo. A,square,Italian,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,Italian,flex,message,for,a,Pay,Later,offer,with,white,text,and,logo,on,a,black,background

                    Ratio

                    Sets the shape and size of the flexible banner. All ratios are specified as width x height.

                    Inline HTML attribute Possible values
                    data-pp-style-ratio 1x1, 1x4, 8x1, 20x1

                    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,Italian,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,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
                    8x1 Ratio of 8x1 that flexes between 250px and 768px wide. A,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
                    20x1 Ratio of 20x1 that flexes between 250px and 1169px wide. A,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
                    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,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

                      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