How to Add PayPal Credit/Pay Later messaging on a Product Page for Magento 2

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

Image Placeholder





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>
  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 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.
    Image Placeholder

    inline
    Single line PayPal Credit logo without monogram.
    Image Placeholder

    none
    No logo. Text only.
    Image Placeholder
    data-pp-style-logo-position

    Note:
     This option is only available with data-pp-style-logo-typevalues: primary, alternative
    left
    Default. Logo left of the text.
    Image Placeholder

    right
    Logo right of the text.
    Image Placeholder

    top
    The logo above the text.
    Image Placeholder
    data-pp-style-text-color
    black
    Default. Black text with a colored logo.
    Image Placeholder

    white
    White text with a white logo.
    Image Placeholder

    monochrome
    Black text with a black logo.
    Image Placeholder

    grayscale
    Black text with a grayscale logo.
    Image Placeholder
    data-pp-style-text-size
    10, 11
    Smaller text sizes.
    Image Placeholder

    12
    Default. Standard text size.
    Image Placeholder

    13,14,15,16
    Larger text sizes.
    Image Placeholder
    data-pp-style-text-align
    left
    Default. Text is left aligned.


    center
    Text is center aligned.


    right
    Text is right aligned.