Pay Later messaging integration code samples

CurrentDocs

Last updated: Mar 14th, 6:13pm

This page provides code examples for Pay Later messaging. Your page's code structure determines the code you should use.

Inline attributes

1<!DOCTYPE html>
2<head>
3  <meta name="viewport" content="width=device-width, initial-scale=1">
4  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
5  <script
6    src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&components=messages">
7  </script>
8</head>
9<body>
10  <div
11    data-pp-message
12    data-pp-pageType="product-details"
13    data-pp-amount="500"
14    data-pp-style-layout="text"
15    data-pp-style-logo-type="primary"
16    data-pp-style-logo-position="top"
17  ></div>
18</body>

JavaScript configuration object

You can configure and render your messages using JavaScript as an alternative to HTML attributes. The PayPal JavaScript SDK messages component uses a JavaScript API that is similar to the API used by the buttons component.

1<!DOCTYPE html>
2<head>
3  <meta name="viewport" content="width=device-width, initial-scale=1">
4  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
5  <script
6    src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&components=messages">
7  </script>
8</head>
9<body>
10<div class="pp-message"></div>
11  <script>
12    paypal.Messages({
13      amount: 500,
14      pageType: 'product-details',
15      style: {
16        layout: 'text',
17        logo: {
18          type: 'primary',
19          position: 'top'
20        }
21      }
22    })
23    .render('.pp-message');
24  </script>
25</body>

Use the namespace attribute

Select this option if you're using a legacy integration for PayPal checkout that uses the data-namespace attribute when loading the JavaScript SDK messages component.

1<!DOCTYPE html>
2<head>
3  <meta name="viewport" content="width=device-width, initial-scale=1">
4  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
5  <script
6    data-namespace="paypal2"
7    src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&components=messages">
8  </script>
9</head>
10<body>
11<div class="pp-message"></div>
12  <script>
13    paypal2.Messages({
14      amount: 500,
15      style: {
16        layout: 'text',
17        logo: {
18          type: 'primary',
19          position: 'top'
20        }
21      }
22    })
23    .render('.pp-message');
24  </script>
25</body>

Multiple render client-side

1<!DOCTYPE html>
2<head>
3  <meta name="viewport" content="width=device-width, initial-scale=1">
4  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
5  <script
6    src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&components=messages">
7  </script>
8</head>
9<body>
10  <!-- Example products listing -->
11  <ul class="listings">
12    <li class="listing">
13      <div class="listing__content">
14        <h3 class="listing__title">Product Name 1</h3>
15        <p class="listing__price">$50</p>
16        <img class="listing__image" src="" alt="product image" />
17        <p class="listing__description">...</div>
18      </div>
19      <div class="pp-message">
20        <!-- Pay later message will be inserted here -->
21      </div>
22    </li>
23    <li class="listing">
24      <div class="listing__content">
25        <h3 class="listing__title">Product Name 2</h3>
26        <p class="listing__price">$100</p>
27        <img class="listing__image" src="" alt="product image" />
28        <p class="listing__description">...</div>
29      </div>
30      <div class="pp-message">
31        <!-- Pay later message will be inserted here -->
32      </div>
33    </li>
34  </ul>
35  <script>
36    // Collect all listings inside an array
37    const listings = Array.from(document.querySelectorAll('.listing'));
38    // Set the amount for each Pay later message
39    listings.forEach(listing => {
40      const price = Number(listing.querySelector('.listing__price').textContent.slice(1));
41      const wrapper = listing.querySelector('.pp-message');
42      wrapper.setAttribute('data-pp-amount', price);
43    });
44    // Render each Pay later message
45    paypal
46      .Messages({
47        style: {
48          layout: 'text',
49          logo: {
50            type: 'primary',
51            position: 'top'
52          }
53        }
54      })
55      .render('.pp-message');
56  </script>
57</body>

Reference

See Reference tables for more details on available options.