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

3<head>
4  <meta name="viewport" content="width=device-width, initial-scale=1">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6  <script
7    src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&currency=AUD&components=messages">
8  </script>
9</head>
10

11<body>
12  <div
13    data-pp-message
14    data-pp-pageType="product-details"
15    data-pp-amount="500"
16    data-pp-style-layout="text"
17    data-pp-style-logo-type="primary"
18    data-pp-style-logo-position="top"
19  ></div>
20</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

3<head>
4  <meta name="viewport" content="width=device-width, initial-scale=1">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6  <script
7    src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&currency=AUD&components=messages">
8  </script>
9</head>
10

11<body>
12

13<div class="pp-message"></div>
14  <script>
15    paypal.Messages({
16      amount: 500,
17      pageType: 'product-details',
18      style: {
19        layout: 'text',
20        logo: {
21          type: 'primary',
22          position: 'top'
23        }
24      }
25    })
26    .render('.pp-message');
27  </script>
28</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

3<head>
4  <meta name="viewport" content="width=device-width, initial-scale=1">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6  <script
7    data-namespace="paypal2"
8    src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&currency=AUD&components=messages">
9  </script>
10</head>
11

12<body>
13

14<div class="pp-message"></div>
15  <script>
16    paypal2.Messages({
17      amount: 500,
18      style: {
19        layout: 'text',
20        logo: {
21          type: 'primary',
22          position: 'top'
23        }
24      }
25    })
26    .render('.pp-message');
27  </script>
28</body>

Multiple render client-side

1<!DOCTYPE html>
2

3<head>
4  <meta name="viewport" content="width=device-width, initial-scale=1">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6  <script
7    src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&currency=AUD&components=messages">
8  </script>
9</head>
10

11<body>
12  <!-- Example products listing -->
13  <ul class="listings">
14    <li class="listing">
15      <div class="listing__content">
16        <h3 class="listing__title">Product Name 1</h3>
17        <p class="listing__price">$50</p>
18        <img class="listing__image" src="" alt="product image" />
19        <p class="listing__description">...</div>
20      </div>
21      <div class="pp-message">
22        <!-- Pay later message will be inserted here -->
23      </div>
24    </li>
25    <li class="listing">
26      <div class="listing__content">
27        <h3 class="listing__title">Product Name 2</h3>
28        <p class="listing__price">$100</p>
29        <img class="listing__image" src="" alt="product image" />
30        <p class="listing__description">...</div>
31      </div>
32      <div class="pp-message">
33        <!-- Pay later message will be inserted here -->
34      </div>
35    </li>
36  </ul>
37

38  <script>
39    // Collect all listings inside an array
40    const listings = Array.from(document.querySelectorAll('.listing'));
41

42    // Set the amount for each Pay later message
43    listings.forEach(listing => {
44      const price = Number(listing.querySelector('.listing__price').textContent.slice(1));
45      const wrapper = listing.querySelector('.pp-message');
46      wrapper.setAttribute('data-pp-amount', price);
47    });
48

49    // Render each Pay later message
50    paypal
51      .Messages({
52        style: {
53          layout: 'text',
54          logo: {
55            type: 'primary',
56            position: 'top'
57          }
58        }
59      })
60      .render('.pp-message');
61  </script>
62</body>

See Also

See Reference tables for more details on available options.