Integrate Pay Later messaging

Add Pay Later messaging to your site.

Know before you code

  • Complete the steps in Get started to get the following sandbox account information from the Developer Dashboard:

    • Your client ID
    • Your personal and business sandbox accounts
  • Use your client ID when adding Pay Later messaging to your website. Use your sandbox accounts when testing the messages component.
  • If your customers are based in the US and you haven't integrated with the PayPal JavaScript SDK, read the upgrade guide to learn how to upgrade a legacy integration.

How it works

Help your customers learn about Pay Later options early in their shopping experience.

  1. Add Pay Later messaging to your product detail pages near prices so customers know they can buy now and pay later at the point of a purchase decision.
  2. Ensure you are passing product amounts in your code so that the dynamic messaging automatically displays the most relevant offer to your customer as they are browsing.
  3. When customers are ready to check out remind them that they can buy now and pay later by including messaging on cart & checkout pages near cart subtotals.

1. Add the script

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=messages"></script>
<script src="https://www.paypal.com/sdk/js?client-id=YOUR-CLIENT-ID&currency=GBP&components=messages"></script>

Note: If you are a developer, use the merchant’s client-id for the PayPal account that has Pay Later offers.

If you already integrated PayPal Checkout using the JavaScript SDK, you can add the messages component to the existing script tag:

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=messages,buttons"></script>
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&currency=GBP&components=messages,buttons"></script>

2. Render the messages

Determine where the SDK should render messaging, and PayPal determines the best Pay Later message to display on your website. You can control the format of the message using configuration attributes.

Note: To maximize effectiveness, add Pay Later messaging early in the consumer's shopping experience and to your product and cart pages near the product price and cart amount. See our message placement section to learn how to effectively present Pay Later messaging throughout your site.

Render messages

The SDK automatically scans the DOM (webpage) for HTML elements with data-pp-message attributes and renders a message inside any matching element.

<div data-pp-message data-pp-amount="500.00"></div>

Your website should update the data-pp-amount attribute for each product price or cart amount. The amount is important data for the SDK to render the most effective message to your customers. For example, if you pass in an amount that qualifies for Pay Later offers, the amount helps display more detailed, specific messages and possible specific payment information. These detailed, specific messages perform better and provide more value to you and your customers. If you do not provide an amount, PayPal reverts to a more general message that, while still effective, has a weaker value proposition to your customers.

3. Go live

Test your message locally and check if your website displays the message correctly. Then push the changes to your live site to tell your customers that financing is available.

Note: If you integrated with a Sandbox client ID, make sure to update to a Live client ID for your live environment.

Read the troubleshooting guide for specific Pay Later validation options.

See also