Add Pay Later messaging and buttons

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

For additional information about supporting Pay Later on Canadian merchant sites, see Pay Later (CA).

1. 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.

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

2. Customize and preview Pay Later messaging

Decide where you want dynamic messaging to appear and how you want it to look.

The places that you choose for displaying this option to users determines what options you have when you display the image. For more information, select one of the options from the following list.

• Product page
• Cart
• Checkout
• Home page
• Category page

The following topics provide some basic examples of the code to use. For more information about what you can with the messaging on these pages, see the Pay Later reference page.

Product page

For messages on a product page, you can:

• Specify a logo type to use.
• Choose text and logo color formats for the message.
• Choose a text size for the message.

For examples of these options, see the Pay Later reference.

Add the following code to the body of your product page to display Pay Later messaging with the specified formatting and update the data-pp-amount value.

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>

Cart

For messages on a cart page, you can:

• Specify a logo type to use.
• Choose text and logo color formats for the message.
• Choose a text size for the message.

For examples of these options, see the Pay Later reference.

Add the following code to the body of your cart page to display Pay Later messaging with the specified formatting and update the data-pp-amount value.

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=cart>
9</div>

Checkout

For messages on a checkout page, you can:

• Specify a logo type to use.
• Choose text and logo color formats for the message.
• Choose a text size for the message.

For examples of these options, see the Pay Later reference.

Add the following code to the body of your checkout page to display Pay Later messaging with the specified formatting and update the data-pp-amount value.

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=payment>
9</div>

Home page

For banners on a home page, you can:

• Specify a banner color theme.
• Choose a size for the banner, either 8x1 or 20x1.

For examples of these options, see the Pay Later reference.

Add the following code to the body of your home page to display Pay Later banner with the specified formatting and update the data-pp-amount value.

1<div
2    data-pp-message
3    data-pp-style-color="white-no-border"
4    data-pp-style-layout="flex"
5    data-pp-style-ratio="8x1"
6    data-pp-amount=ENTER_VALUE_HERE
7    data-pp-placement=home>
8</div>

Category page

For banners on a category page, you can:

• Specify a banner color theme.
• Choose a size for the banner, either 8x1 or 20x1.

For examples of these options, see the Pay Later reference.

Add the following code to the body of your category page to display Pay Later banner with the specified formatting and update the data-pp-amount value.

1<div
2    data-pp-message
3    data-pp-style-color="white-no-border"
4    data-pp-style-layout="flex"
5    data-pp-style-ratio="8x1"
6    data-pp-amount=ENTER_VALUE_HERE
7    data-pp-placement=category>
8</div>

3. Test and go live

Save your website and publish it to start testing your Pay Later messaging. Confirm that the messages appear everywhere that you expect it to appear and that it looks and behaves as intended.

When you've tested everything, you're ready to go live.

1. Change your sandbox CLIENT_ID to a production CLIENT_ID in the PayPal JavaScript SDK and in your HTML.
2. 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 tell you which property is invalid and what you should do to resolve the issue. Depending on the message type, the library will attempts to fall back to the relevant default values.

See also

For more information about Pay Later integration, see the Advanced JavaScript Options for Pay Later.