Pay Later messaging integration code samples

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

Country or region

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&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&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&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&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.