Pay Later messaging integration code samples
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>23<head>4 <meta name="viewport" content="width=device-width, initial-scale=1">5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />6 <script7 src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID¤cy=EUR&components=messages">8 </script>9</head>1011<body>12 <div13 data-pp-message14 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>23<head>4 <meta name="viewport" content="width=device-width, initial-scale=1">5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />6 <script7 src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID¤cy=EUR&components=messages">8 </script>9</head>1011<body>1213<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>23<head>4 <meta name="viewport" content="width=device-width, initial-scale=1">5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />6 <script7 data-namespace="paypal2"8 src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID¤cy=EUR&components=messages">9 </script>10</head>1112<body>1314<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>23<head>4 <meta name="viewport" content="width=device-width, initial-scale=1">5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />6 <script7 src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID¤cy=EUR&components=messages">8 </script>9</head>1011<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>3738 <script>39 // Collect all listings inside an array40 const listings = Array.from(document.querySelectorAll('.listing'));4142 // Set the amount for each Pay later message43 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 });4849 // Render each Pay later message50 paypal51 .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.