Pay Later messaging integration code samples

DocsCurrentLast updated: July 28th 2021, @ 1:19:19 pm


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

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=EUR&components=messages">
  </script>
</head>

<body>
  <div
    data-pp-message
    data-pp-amount="120"
    data-pp-style-layout="text"
    data-pp-style-logo-type="primary"
  ></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=EUR&components=messages">
  </script>
</head>

<body>

<div class="pp-message"></div>
  <script>
    paypal.Messages({
      amount: 120,
      style: {
        layout: 'text',
        logo: {
          type: 'primary'
        }
      }
    })
    .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=EUR&components=messages">
  </script>
</head>

<body>

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

This example works when you are using the PayPal SDK to render the message, but your checkout code uses checkout.js

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=EUR&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">
        <!-- PayPal Ratenzahlung 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">
        <!-- PayPal Ratenzahlung 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 PayPal Credit 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 PayPal Credit message
    paypal
      .Messages({
        style: {
          layout: 'text',
          logo: {
            type: 'primary'
          }
        }
      })
      .render('.pp-message');
  </script>
</body>

See Reference Tables for more details on available options.