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 you haven't integrated with the PayPal JavaScript SDK, read the upgrade guide to learn how to upgrade a legacy integration.

1. Add the script

Add the PayPal JavaScript SDK script to your web page, then replace YOUR_CLIENT_ID with your client ID to the script tag:

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

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

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=buttons,messages"></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 Best Practices section for a comprehensive guide to effective presentment of 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.

See also