Pay Later messaging integration code samples

CurrentDocs

Last updated: Apr 2nd, 11:39pm

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-pageType="product-details"
    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 pageType: 'product-details',
      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>

          Reference

          See Reference tables for more details on available options.

          We use cookies to improve your experience on our site. May we use marketing cookies to show you personalized ads? Manage all cookies