How to Add PayPal Credit/Pay Later messaging on Product Page

To display the PayPal Credit/Pay Later messaging on any product page, it is needed to add manually the following HTML code into your product layout.



Please follow these instructions to add the messaging on a Magento 2 store:

  1. Locate your product page's files usually on the folder: app/design/frontend/PACKAGE_NAME/THEME_NAME/Magento_Catalog/templates/product/price/final_price.phtml

  1. Copy and paste the following HTML code at the end of the file:
    <div data-pp-message data-pp-placement="product" data-pp-amount="500.00" data-pp-style-layout="text" data-pp-style-logo-type="alternative" data-pp-style-logo-position="top" data-pp-style-text-color="black"></div>


    copy
  2. Pass the product's price in the amount parameter data-pp-amount
    Your messages can display monthly payment information to your customers by passing in an amount to the message. Including data-pp-amount only displays the monthly payment information if you configure your account for Easy Payments and the amount that's passed in qualifies for the minimum purchase settings for Easy Payments.
  3. Update the data-pp-amount value when needed
    If your website offers installment-based products such as Easy Payments, update the data-pp-amount attribute for each product price. Your website uses this attribute to calculate the financing terms of a specific amount. If you omit this attribute, the message won't display the monthly payment. If you don't offer any installment-based financing products, your website ignores the attribute.

    If your website updates the price on the client-side using either JavaScript or other client-side methods, you can refresh your PayPal message by updating the value of data-pp-amount. The JavaScript SDK monitors for any changes to the value of data-pp-amount and renders any updated messages with the new payment information.
  4. Configure the look&feel of the messages using the different variables used on the HTML code:
    5. Field
    		Values
    		Description
    		Preview
    data-pp-style-logo-type
    		primary
    		Default. Stacked PayPal Credit logo.


    		alternative
    		Single line PayPal Credit logo.
    Credit messaging text alternative left black

    		inline
    		Single line PayPal Credit logo without monogram.
    Credit messaging text inline black

    		none
    		No logo. Text only.
    Credit messaging text inline black
    data-pp-style-logo-position
    		left
    		Default. Logo left of the text.
    		Credit messaging text primary left blackNote: This option is only available with logo.type values: primary, alternative

    		right
    		Logo right of the text.
    		Credit messaging text primary right black

    		top
    		Logo above the text.
    		Credit messaging text primary top black
    data-pp-style-text-color
    		black
    		Default. Black text with a colored logo.
    		Credit messaging text primary left black

    		white
    		White text with a white logo.
    		Credit messaging text primary left white



How to Add PayPal Credit/Pay Later Banners on Home and Category Pages

Designed to be eye catching, they inform your customers of PayPal Credit's six-month special financing or Easy Payments promotions.

To display the PayPal Credit/Pay Later Banners on the Home page or any other page, it is needed to add manually the following HTML code into your layout.

Please follow these instructions to add the messaging on a Magento 2 store:

  1. Let's first create a block containing the HTML code we need to place. Go to Content > Blocks > Add New Block
  2. Copy and paste the following HTML code:
    <div data-pp-message data-pp-placement="home" data-pp-style-layout="flex" data-pp-style-color="alternative" data-pp-style-ratio="1x1"></div>


    copy
  3. Configure the look&feel of the messages using the different variables used on the HTML code:

    4. Field
    		Values
    		Description
    		Preview
    data-pp-style-color
    		blue
    		Default. Blue background with white text and white logo.

    black
    		black
    		Black background with white text and white logo.

    white
    		white
    		White background with blue text, colored logo, and blue border.
    		Credit messaging flex 1x1 white

    		white-no-border
    		White background with blue text and colored logo.
    		Credit messaging flex 1x1 white-no-border

    		gray
    		Light gray background with blue text and colored logo.
    		Credit messaging flex 1x1 gray
    data-pp-style-ratio
    		1x1
    		Default ratio. Ratio of 1x1 that flexes between 120px and 330px wide.




    		1x4
    		Ratio of 1x4 that is 160px wide.


    		8x1
    		Ratio of 8x1 that flexes between 250px and 768px wide.


    		20x1
    		Ratio of 20x1 that flexes between 250px and 1169px wide.


  4. Place the block anywhere on your site.