Add Pay Later messages and buttons

DocsCurrentLast updated: December 18th 2023, @ 12:37:08 pm


Integrate Pay Later messages and buttons to show customized payment offers for your payers.

Know before you code

1. Enable Pay Later messages on your website

Add the PayPal JavaScript SDK to your website to enable PayLater messaging. Copy the following code and paste it in the <head> tag of your website's product page template.

Sample code

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

Modify the code

  • Replace CLIENT_ID with your client ID.
  • Select one or more components that you want to use to display Pay Later messages.
    • messages: A Pay Later banner that states "Pay in 4 interest free payments of $25."
    • buttons: Pay Later presented as a payment option with PayPal and Debit or Credit Card buttons. Custom Pay Later messaging is shown below the buttons that states "Pay in 4 interest free payments of $25".

2. Render messages and buttons on product pages

Add the following code to the <body> of your page to display Pay Later messages and buttons:

Sample code

<div
data-pp-message 
data-pp-amount="VARIABLE_FOR_PRICE"
data-pp-style-layout="text"
data-pp-style-layout="black" 
data-pp-style-logo-type="primary"
data-pp-style-logo-position="left">
</div>

Modify the code

  • Change VARIABLE_FOR_PRICE to the value used to set the price for products. Using a variable instead of a static value will help you scale this element across your product portfolio.
  • Customize the style of your Pay Later messages by modifying the data-pp-style values. For more information about customization options, see Customize messages.

Step result

This code sample renders a Pay in 4 message that displays each payment amount as $25.

example message

3. Test and go live

Save your website and publish it so you can start testing Pay Later messaging.

1. Test Pay Later transactions

  1. Log in to your payer 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 4 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.
  6. Confirm that the money successfully moved into the merchant account.

To learn more about about the PayPal sandbox, see the sandbox testing guide.

2. Test Pay Later messaging

  1. Replace YOUR_CLIENT_ID with your sandbox client ID in the PayPal JavaScript SDK.
  2. Confirm that Pay Later messaging displays in all appropriate pages.

3. Go live

  1. Change all references to your sandbox API credentials to live credentials. This includes changing the sandbox client ID in the PayPal JavaScript SDK to 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.

To test live Pay Later transactions using real funds and non-sandbox PayPal accounts, ensure that you:

  • Aren't using the business account that is receiving the money to make the purchase.
  • Don't use a personal account with the same information as the business account.

Troubleshooting

Message components, console warnings, and errors include configuration attributes and object validations. Configuration properties have distinct validation checks for input formatting and values. For a full list of accepted options, see the Pay Later messaging reference.

If validation fails, the developer console in your web browser displays warning messages that inform you which property is invalid and what you 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 OptionsAdvanced 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 startedGet started