Credit Messaging Integration Code Samples

DOCS

Last updated: Aug 15th, 7:36am

This page provides customization code examples for PayPal Credit messaging. Which you should use depends on the existing code structure of your page.

Example render code via 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.paypalobjects.com/upstream/bizcomponents/js/messaging.js"
8    data-pp-account="ABC123DEF456G">
9  </script>
10</head>
11
12<body>
13  <div
14    data-pp-message
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>

Example render code via JavaScript configuration object

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.paypalobjects.com/upstream/bizcomponents/js/messaging.js"
8    data-pp-account="ABC123DEF456G">
9  </script>
10</head>
11
12<body>
13
14<div class="pp-message"></div>
15  <script>
16    paypal.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>

Example 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.paypalobjects.com/upstream/bizcomponents/js/messaging.js"
8    data-pp-account="ABC123DEF456G">
9  </script>
10</head>
11
12<body>
13  <!-- Example products listing -->
14  <ul class="listings">
15    <li class="listing">
16      <div class="listing__content">
17        <h3 class="listing__title">Product Name 1</h3>
18        <p class="listing__price">$50</p>
19        <img class="listing__image" src="" alt="product image" />
20        <p class="listing__description">...</div>
21      </div>
22      <div class="pp-message">
23        <!-- PayPal Credit message will be inserted here -->
24      </div>
25    </li>
26    <li class="listing">
27      <div class="listing__content">
28        <h3 class="listing__title">Product Name 2</h3>
29        <p class="listing__price">$100</p>
30        <img class="listing__image" src="" alt="product image" />
31        <p class="listing__description">...</div>
32      </div>
33      <div class="pp-message">
34        <!-- PayPal Credit message will be inserted here -->
35      </div>
36    </li>
37  </ul>
38
39  <script>
40    // Collect all listings inside an array
41    const listings = Array.from(document.querySelectorAll('.listing'));
42
43    // Set the amount for each PayPal Credit message
44    listings.forEach(listing => {
45      const price = Number(listing.querySelector('.listing__price').textContent.slice(1));
46      const wrapper = listing.querySelector('.pp-message');
47      wrapper.setAttribute('data-pp-amount', price);
48    });
49
50    // Render each PayPal Credit message
51    paypal
52      .Messages({
53        style: {
54          layout: 'text',
55          logo: {
56            type: 'primary',
57            position: 'top'
58          }
59        }
60      })
61      .render('.pp-message');
62  </script>
63</body>

See Reference Tables for more details on available options.

Credit Messaging Integration Code Samples

Example render code via inline attributes

Example render code via JavaScript configuration object

Example multiple render client side

If you accept cookies, we’ll use them to improve and customize your experience and enable our partners to show you personalized PayPal ads when you visit other sites. Manage cookies and learn more