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 500.00 in data-pp-amount="500.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&currency=EUR&components=messages">
</script>

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

Step result

Home

Note: Your website should update the data-pp-amount attribute shown in the example above for each product price or cart amount. If you omit this attribute or include a non-qualifying amount, the message will include additional content indicating Pay in 4X is only available for eligible purchases.

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 Pay in 4X

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: PayPal sandbox.

  1. Log in to your buyer account in your sandbox.
  2. On the PayPal Checkout page, choose PayPal as your payment method at the time of purchase.
  3. Select Pay in 4X as the payment option.
  4. Follow the on-screen instructions to send a payment to your merchant account in your sandbox.
  5. Log in to your merchant sandbox account and confirm the money you used to Pay in 4X 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

To assist developers in integrating pay later offers, the message component and console warnings and errors include configuration attributes and object validation. The various configuration properties 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 showing which property is invalid and what developers should do to resolve the issue. Depending on the message type, the library attempts to fall back to the default values.

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