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=EUR&components=messages">
    8 </script>
    9</head>
    10
    11<body>
    12 <div
    13 data-pp-message
    14 data-pp-placement="product"
    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=EUR&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 placement: 'product',
      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=EUR&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=EUR&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.