Pay Later messaging integration code samples

DocsCurrentLast updated: September 27th 2022, @ 2:18:58 pm


This page provides code examples for pay later messaging. The current code structure on your page determines the code you should use.

Example render code via inline attributes

<!DOCTYPE html>

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

<body>
  <div
    data-pp-message
    data-pp-placement="product"
    data-pp-amount="500"
    data-pp-style-layout="text"
    data-pp-style-logo-type="primary"
    data-pp-style-logo-position="top"
  ></div>
</body>

Example render code via JavaScript configuration object

<!DOCTYPE html>

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

<body>

<div class="pp-message"></div>
  <script>
    paypal.Messages({
      amount: 500,
      placement: 'product',
      style: {
        layout: 'text',
        logo: {
          type: 'primary',
          position: 'top'
        }
      }
    })
    .render('.pp-message');
  </script>
</body>

Example render code via JavaScript configuration object using the namespace attribute

<!DOCTYPE html>

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

<body>

<div class="pp-message"></div>
  <script>
    paypal2.Messages({
      amount: 500,
      style: {
        layout: 'text',
        logo: {
          type: 'primary',
          position: 'top'
        }
      }
    })
    .render('.pp-message');
  </script>
</body>

Example multiple render client side

<!DOCTYPE html>

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

<body>
  <!-- Example products listing -->
  <ul class="listings">
    <li class="listing">
      <div class="listing__content">
        <h3 class="listing__title">Product Name 1</h3>
        <p class="listing__price">$50</p>
        <img class="listing__image" src="" alt="product image" />
        <p class="listing__description">...</div>
      </div>
      <div class="pp-message">
        <!-- Pay later message will be inserted here -->
      </div>
    </li>
    <li class="listing">
      <div class="listing__content">
        <h3 class="listing__title">Product Name 2</h3>
        <p class="listing__price">$100</p>
        <img class="listing__image" src="" alt="product image" />
        <p class="listing__description">...</div>
      </div>
      <div class="pp-message">
        <!-- Pay later message will be inserted here -->
      </div>
    </li>
  </ul>

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

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

    // Render each Pay later message
    paypal
      .Messages({
        style: {
          layout: 'text',
          logo: {
            type: 'primary',
            position: 'top'
          }
        }
      })
      .render('.pp-message');
  </script>
</body>

See Reference tables for more details on available options.