Integrate | Pay Later Messaging (US)

Frontend

Country or region

Integrate

Integrate Pay Later messaging to show customized payment offers for your buyers. You can get started quickly with this copy-and-paste integration.

Enable Pay Later messaging on your website

Add the PayPal JavaScript SDK to your website to enable Pay Later messaging. Copy the following code and paste it in the head tag of your website. Replace CLIENT_ID with your sandbox or production client ID.

Note: If you’ve already added the PayPal JavaScript SDK to your website, add ‘messages’ to the components components=messages,buttons.

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

Customize and preview Pay Later messaging

Decide where you want dynamic messaging to show up and how you want it to look on your site.

Customizations

Logo type:

Text color:

Text size:

CodeAdd the code to the body of your product page to display Pay Later messaging and update the data-pp-amount:

1<div
2    data-pp-message
3    data-pp-style-layout="text"
4    data-pp-style-logo-type="inline"
5    data-pp-style-text-color="black"
6    data-pp-style-text-size="12"
7    data-pp-amount=ENTER_VALUE_HERE
8    data-pp-placement=product>
9</div>

Preview:

Dark:

ADD TO CART

Test and go live

Save your website and publish it to start testing Pay Later messaging. Confirm that messaging displays on all appropriate pages.

Go live

Change your sandbox CLIENT_ID to production CLIENT_ID in the PayPal JavaScript SDK. This includes changing the sandbox client ID in the PayPal JavaScript SDK to call in your HTML.
If you created or updated pages on a website, move that code from the test environment to the live environment.

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.