Add Pay Later messages

Follow these steps to integrate Pay Later messages

DocsCurrentLast updated: July 28th 2021, @ 1:19:19 pm


Follow these steps to add Pay Later messages.

  1. Know before you code
  2. Add Pay Later messages
  3. Test and go live
  4. Troubleshooting

Know before you code

Add Pay Later Messages

Render Pay Later messaging on your website by adding the PayPal JavaScript SDK code to your product and checkout pages. The code renders a message that displays how much the customer pays in four payments.

  1. Replace YOUR_CLIENT_ID with your client ID.
  2. Change the 100.00 in data-pp-amount="100.00" to display Pay Later messaging with a different payment amount.

Render messaging

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: See the message placement section to learn how to effectively present Pay Later messaging throughout your site.

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

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

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

Step result

Home

Render messaging and buttons

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

<div id="paypal-button-container"></div>

<script>
  paypal.Buttons({
    createOrder: function(data, actions) {
        return actions.order.create({
          purchase_units: [{
            amount: {
              value: '100.00'
            }
          }]
        });
      }
}).render('#paypal-button-container');
</script>

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

Step result

Home

Test and Go Live

When you’re ready to take your integration live, test your integration in your sandbox environment and go live.

1. Test the Pay Later button

Use your personal sandbox login information during the checkout flow to complete a Pay Later transaction and then log into the sandbox test site, sandbox.paypal.com, to see the money move out of the buyer's account.

Use the business sandbox login information to log into sandbox.paypal.com to see the money move into the merchant's account.

Note: Learn more about the PayPal sandbox.

  1. Log in to your buyer account in your sandbox.
  2. On the PayPal Checkout page, navigate to the Pay later section and select Pay in 4.
  3. Follow the on-screen instructions to send a payment to your merchant account in your sandbox.
  4. Log in to your merchant sandbox account and confirm the money you used to Pay in 4 moved to the merchant account.

2. Test the Pay Later messaging

Test the script by replacing YOUR_CLIENT_ID with your sandbox client ID, and make sure Pay Later messaging displays on your website.

3. Go live with your integration

Deploying your code to the live environment takes only a few steps.

  1. Change the references to your sandbox API credentials to the live credentials. To get live API credentials, create a live REST API.

    Tip: Remember to change the sandbox client ID in the JavaScript SDK call in your HTML.

  2. If you created or updated pages on a website, move that code from the test environment to the live environment.
  3. Once your code is live, you can:

    • Test the button and movement of funds using real (non-sandbox) PayPal accounts. When making a live test purchase, consider:

      • The business account receiving money can’t also make the purchase.
      • If you create a personal account with the same information as the business account, those accounts might experience restrictions.

Troubleshooting

Validate the configuration attributes are included in the messages component and the accompanying console warnings or errors. The configuration attributes have distinct validation checks for input formatting and values to ensure validity. See the reference tables for a full list of accepted options.

If the validation fails, the web browser's developer console displays warning messages that inform you which property is invalid and what you need to do to address the issue. In general, the library attempts to fall back to the safe default values if there are missing or invalid inputs.

Other messaging options

Customization Options Advanced JavaScript Options

Customization Options

You can modify the style and layout of your messages.

Advanced JavaScript Options

Explore advanced configurations and integrations with JavaScript.

Get started Get started

See also