Pay Later Offers

Limited Release

Last updated: Aug 1st, 11:13am

Overview

PayPal offers special financing options that payers can use to buy now and pay later, while merchants get paid upfront. Specific Pay Later offers differ by country.

Adding buy now pay later messaging to your website can improve conversion, attract new customers and increase order values. You can show your customers their specific Pay Later offers based on their shopping cart. To enable multiple touchpoints, ensure you add messaging throughout your site such as on product pages, shopping cart and checkout pages.

Pay Later in the US includes the following products:

Product	Number of Payments	Due	Purchase Amount
Pay in 4	4	Bi-weekly	$30 to $1500
Pay Monthly	3, 6, 12 or 24	Monthly	$49 to $10,000

Eligibility

Are a US-based PayPal merchant
Have a US-facing website
Transact in US dollars (USD)
Have a one-time payment integration and Pay Later options are available via PayPal checkout.
Abide by the Pay Later Messaging Center Program Terms
Do not edit Pay Later messages with additional content, wording, marketing, or other materials to encourage the use of this product or remove any content. Render the Pay Later messaging in its entirety with all the links and language provided by PayPal. For noncompliant messaging, PayPal reserves the right to take action in accordance with the PayPal User Agreement.
Do not create, display, or host your own Pay Later content. Instead, integrate only the official code as provided by PayPal.
Reference Transaction and Recurring Payment integrations aren't eligible for Pay Later offers.

Note: About Pay in 4: Loans to CA residents are made or arranged pursuant to a CA Financing Law License. PayPal, Inc. is a GA Installment Lender Licensee, NMLS #910457. RI Small Loan Lender Licensee.

Note: Pay Monthly is subject to consumer credit approval. Term lengths and fixed APR of 9.99-35.99% vary based on the customer's creditworthiness. The lender for Pay Monthly is WebBank. PayPal, Inc. (NMLS #901457); RI Loan Broker Licensee. VT Loan Solicitation Licensee.

See Also:

Load the Messages Component

There are two ways to load the messages component of the v6 SDK. You may include an HTML script tag alongside the v6 SDK Core script, or load the component through JavaScript when creating the v6 SDK Instance.

HTML
HTML + JavaScript

1<head>
2  <!-- Load the v6 SDK Core script -->
3  <script src="https://www.paypal.com/web-sdk/v6/core"></script>
4  <!-- Load the PayPal Messages script -->
5  <script src="https://www.paypal.com/web-sdk/v6/paypal-messages"></script>
6</head>

PayPal v6 SDK Messages uses a custom Lit web component for message placement. Be sure to include the web component in the webpage’s HTML. The following snippet is required to render a message. Additional attributes are optional.

1<paypal-message></paypal-message>

Some methods are exposed when accessing the PayPal Message web component through JavaScript.

Method	Arguments	Return Value	Description
`setContent`	The message content returned from the `payPalMessages.fetchContent()` method.	`void`	An exposed method to set the content of the message component.
`getFetchContentOptions`	–	A Fetch Content Options object constructed from the web component HTML attributes.	Extracts and returns the fetch content configuration options from the component's HTML attributes and properties.

JavaScript Interface

Create a PayPal Messages instance After creating a v6 SDK instance. The following snippet is the minimum-required JavaScript to render a message. Additional configuration options are optional.

const messagesInstance = sdkInstance.createPayPalMessages();

The PayPal Messages instance has two primary methods exposed for configuring message content and learn more presentations.

Method	Arguments	Description
`fetchContent`	An optional object of Fetch Content Options	A method to fetch message content from the server.
`createLearnMore`	An optional object of Learn More Presentation Options	A method to initialize and return a Learn More presentation.

SDK Instance Options

Some top-level SDK instance options are utilized in PayPal Messages as well. These would be provided through the following part of your code:

1const sdkInstance = await window.paypal.createInstance({
2  // SDK Instance Options
3});

Option	Default Value	Description
`clientToken`	–	A unique identifier for merchant authentication.
`pageType`	–	A string representing the page where the message is presented. Options: `cart` `checkout` `home` `mini-cart` `product` `product-details` `product-listing` `search-results`
`partnerAttributionId`	–	An identifier for partner integrations.
`shopperSessionId`	–	A string that represents the shopper’s session id and follows the general form `6B29FC40-CA47-1067-B21D-00DD010462DA`

CSS Properties

For styling specific parts of messages, there are two custom CSS properties available. Currently, the options to change font size and text-alignment are offered.

Option	Default Value	Description
`--paypal-message-font-size`	`14px`	Customize the font size of the message. Range of `px` values from 8px to 16px. Values greater outside of this range will be ignored. If less than 8px, then 8px will be used. If greater than 16px, then 16px will be used.
`--paypal-message-text-align`	`left`	Customize the alignment of a message. Options: `left` `right` `center`

Option

Default Value

Description

--paypal-message-font-size

14px

Customize the font size of the message.

Range of px values from 8px to 16px. Values greater outside of this range will be ignored. If less than 8px, then 8px will be used. If greater than 16px, then 16px will be used.

--paypal-message-text-align

left

Customize the alignment of a message.

Options:

left

right

center

Message Configuration Patterns

There are three primary message configuration patterns: HTML Configuration, JavaScript Configuration, and Dual Configuration. Below are explanations, steps, and examples for how to render the same message with each pattern.

The HTML Configuration utilizes Web Component HTML Attributes and minimal JavaScript to load and render messages to the page. The only JavaScript needed for this integration is to initialize the SDK and create a PayPal Messages Instance.

The JavaScript Configuration utilizes minimal HTML and relies on JavaScript to configure and load message content. The only HTML needed for this integration is to add the PayPal Message Web Component to your page. Expand the below section for a step-by-step guide for this configuration pattern.

The Dual Configuration (HTML Configuration and JavaScript Configuration patterns) can be utilized in tandem for advanced message placements. This approach will fetch and set content using both HTML Attributes and JavaScript options.

HTML
JavaScript
Dual Configuration

1// Include SDK scripts - To utilize v6 messages, include two scripts on your site
2// the core SDK package and the PayPal messages SDK package
3<head>
4  <script src="https://www.paypal.com/web-sdk/v6/core"></script>
5  <script src="https://www.paypal.com/web-sdk/v6/paypal-messages"></script>
6</head>
7
8// Add the PayPal Message Web Component
9<body>
10  <paypal-message
11    amount="300.00"
12    currency-code="USD"
13    logo-type="MONOGRAM"
14    text-color="MONOCHROME"
15  ></paypal-message>
16  <script>
17
18// Add the necessary JavaScript to instantiate PayPal Messages:
19    const sdkInstance = await window.paypal.createInstance({ clientToken });
20    const messagesInstance = sdkInstance.createPayPalMessages();
21
22// Add a way to update the PayPal Message amount:    
23      function triggerAmountUpdate(amount) {
24      const messageElement = document.querySelector('paypal-message');
25      messageElement.setAttribute('amount', amount);
26    }
27  </script>
28</body>

Message Styling Patterns

We can customize the style of a message by utilizing the custom CSS Properties and changing the logo types and text colors.

Note: The following offers—PayPal Debit Card and PayPal Cashback Mastercard are incompatible with the INLINE logo position. If INLINE is specified for these offer types, it will automatically be overridden to LEFT.

Right Align, 16 Font Size, Top Logo
Center Align, 10 Font Size, Inline Logo

1// Add a message to your page using any of the message configuration patterns.
2<head>
3  <script src="https://www.paypal.com/web-sdk/v6/core"></script>
4  <script src="https://www.paypal.com/web-sdk/v6/paypal-messages"></script>
5</head>
6<body>
7
8// Add CSS
9  <style>
10    --paypal-message-font-size: 16px;
11    --paypal-message-text-align: right;
12  </style>
13
14// Add the logo configuration
15  <paypal-message
16    auto-bootstrap
17    amount="300.00"
18    currency-code="USD"
19    logo-position="TOP"
20  ></paypal-message>
21  <script>
22    const sdkInstance = await window.paypal.createInstance({ clientToken });
23    const messagesInstance = sdkInstance.createPayPalMessages();
24    function triggerAmountUpdate(amount) {
25      const messageElement = document.querySelector('paypal-message');
26      messageElement.setAttribute('amount', amount);
27    }
28  </script>
29</body>

Learn More Configuration Patterns

The above Message Configurations all use the default Learn More Presentation experience. However, this can also be customized and configured through JavaScript.

Below is a guide to customize a specific message element’s Learn More presentation. We utilize JavaScript to create a Learn More instance. To open the presentation on click, we add an event listener to the message element’s paypal-message-click event.

1// Follow the Message JS Config or HTML Config Steps and add a message to your page
2<head>
3  <script src="https://www.paypal.com/web-sdk/v6/core"></script>
4  <script src="https://www.paypal.com/web-sdk/v6/paypal-messages"></script>
5</head>
6<body>
7  <paypal-message></paypal-message>
8  <script>
9    const sdkInstance = await window.paypal.createInstance({ clientToken });
10    const messagesInstance = sdkInstance.createPayPalMessages();
11    const content = await messagesInstance.fetchContent({
12      amount: "300.00",
13      currencyCode: "USD",
14      logoType: "MONOGRAM",
15      textColor: "MONOCHROME",
16      onReady: (content) => messageElement.setContent(content),
17    });
18    function triggerAmountUpdate(amount) {
19      content.update({ amount });
20    }
21
22// Create a Learn More Instance. Include an option to change the presentation mode
23    const learnMore = await messagesInstance.createLearnMore({
24      presentationMode: "POPUP",
25    });
26
27// Handle the Message Click Event
28// We need to listen to the message clicked event in order to open the learn more modal when clicked. 
29    messageElement.addEventListener("paypal-message-click", (event) => {
30      event.preventDefault();
31      learnMore.open(event.detail.config);
32    });
33  </script>
34</body>

Analytics Logging

Below is an example where a message is rendered using a JavaScript configuration. In this example, there are console.log statements in many of the configuration callback functions and events. The functions in this example log in the console that an event has occurred. Refer to your analytics platform's documentation on how to log when a custom event or hook has fired and put that code in the function body of the event hook properties of the Fetch Content or Learn More configuration objects.

1<head>
2  <script src="https://www.paypal.com/web-sdk/v6/core"></script>
3  <script src="https://www.paypal.com/web-sdk/v6/paypal-messages"></script>
4</head>
5<body>
6  <paypal-message></paypal-message>
7  <script>
8    const sdkInstance = await window.paypal.createInstance({ clientToken });
9    const messagesInstance = sdkInstance.createPayPalMessages();
10    const content = await messagesInstance.fetchContent({
11      amount: "300.00",
12      currencyCode: "USD",
13      logoType: "MONOGRAM",
14      textColor: "MONOCHROME",
15      onTemplateReady: (content) => {
16        // ANALYTICS LOG EXAMPLE
17        console.log("Cached Template Rendered");
18        messageElement.setContent(content);
19      },
20      onContentReady: (content) => {
21        // ANALYTICS LOG EXAMPLE
22        console.log("Fetched Content Rendered");
23        messageElement.setContent(content);
24      },
25    });
26    function triggerAmountUpdate(amount) {
27      content.update({ amount });
28    }
29    const learnMore = await messagesInstance.createLearnMore({
30      onShow: (content) => {
31        // ANALYTICS LOG EXAMPLE
32        console.log("Learn More Shown");
33      },
34      onApply: (content) => {
35        // ANALYTICS LOG EXAMPLE
36        console.log("Learn More Apply");
37      },
38      onClose: (content) => {
39        // ANALYTICS LOG EXAMPLE
40        console.log("Learn More Closed");
41      },
42    });
43    messageElement.addEventListener("paypal-message-click", (event) => {
44      event.preventDefault();
45      learnMore.open(event.detail.config);
46      // ANALYTICS LOG EXAMPLE
47      console.log("Message Learn More Clicked");
48    });
49  </script>
50</body>