Add Pay Later offers to your existing integration
DocsCurrent
Choose one of the following upgrade paths based on the type of integration you have:
Upgrade to JavaScript SDK integration
These steps upgrade an existing legacy PayPal integration to the latest JavaScript SDK. The new code keeps you current with messages, features, and styles.
If you want to continue using your legacy integration, add a <script />
tag wherever you want to render messages.
To upgrade:
- Remove the legacy
<script />
tags that you're currently using for PayPal messages. - Add the PayPal JavaScript SDK with the
messages
component to the<head></head>
of your document.
Sample code
1<script src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&components=messages"></script>
- Add
div
elements with attributes inside the<body></body>
of your document where you want to render messages. For more information, see Customize Pay Later messaging
Legacy .js integration upgrade options
There are two ways to upgrade legacy .js integrations, depending on how you previously integrated. Review the following integration options to identify your integration, then select the tab that matches your integration to view upgrade instructions:
- Using
<script />
tags to load amerchant.js
file from a domain. - Loading assets directly from from
ad.where.com/jin/spotlight/ads
.
- Script tags
- Loading assets directly
Script tags
In this integration, you added one or more <script />
tags to your site, which load a merchant.js
file from either www.paypalobjects.com/upstream/bizcomponents/js/merchant.js
or paypal.adtag.where.com
.
1<script type="text/javascript" data-pp-payerid="PAYER_ID">2 (function (d, t) {3 var s = d.getElementsByTagName(t)[0],4 n = d.createElement(t);5 n.src = "//www.paypalobjects.com/upstream/bizcomponents/js/merchant.js";6 s.parentNode.insertBefore(n, s);7 })(document, "script");8</script>
1<script type="text/javascript" data-pp-pubid="PAYER_ID">2 (function (d, t) {3 var s = d.getElementsByTagName(t)[0],4 n = d.createElement(t);5 n.src = "//paypal.adtag.where.com/merchant.js";6 s.parentNode.insertBefore(n, s);7 })(document, "script");8</script>
To upgrade:
- Remove the
<script />
tags that are loading the merchant.js. - Add the PayPal JavaScript SDK to the
<head></head>
of your site. - Add
div
elements with proper attributes where you want to render messages.
Note: The value added to
data-pp-payerid
ordata-pp-pubid
is different from theclient-id
required when loading the JavaScript SDK. If you don't yet know or have yourclient-id
, follow the Get Started instructions to get your PayPal API credentials.
Add messages to existing integration
You can use the PayPal JavaScript SDK messages component with other components of the SDK to integrate with many PayPal features and services simultaneously. You can also use PayPal JS SDK messages independently on pages that need only messaging.
The PayPal JS SDK is also compatible with older versions of PayPal checkout integrations, such as checkout.js
. To use the SDK on the same page as checkout.js
, include the data-namespace
attribute on the <script />
tag.
Add messages on pages with no other PayPal integrations
Use on pages with no other PayPal integrations. In this scenario, you'd like to add messages to a page that has no other PayPal integrations. Set the value of the components=
parameter to messages
in the <script />
tag's src
attribute.
Sample code
1<script src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&components=messages"></script>
Add messages to checkout integration
Add Pay Later messages on pages with the SDK buttons component. In this scenario, you've already added the JavaScript SDK to add PayPal checkout buttons to your site. Add the messages
component to the components=
parameter in the <script />
tag's src
attribute, using a comma to separate individual components.
Sample code
1<script src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&components=buttons,messages"></script>
Add messages to legacy PayPal checkout.js integration
It is recommended that you update your checkout integration to use the PayPal JavaScript SDK and use components=buttons,messages
, as outlined above. If you're unable to upgrade to the new SDK but still want to add Pay Later messaging, add a new script in yourcheckout.js
for the JavaScript SDK with the data-namespace
attribute set to "PayPalSDK"
.
Sample code
1<script src="https://www.paypalobjects.com/api/checkout.js"></script>2<script3 data-namespace="PayPalSDK"4 src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&components=messages"5></script>
If you're configuring messages using JavaScript, the value you set for data-namespace
is the name of the global variable you use to configure and render messages.
Sample code
1<head>2 // Use the same value in data-namespace when3 // configuring and rendering messages in the script tag4 <script5 data-namespace="PayPalSDK"6 src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=messages"7 ></script>8</head>9<body>10 <div class="pp-message"></div>11 <script>12 // PayPalSDK is used here because this is the value set13 // for the data-namespace attribute in the <script /> tag14 PayPalSDK.Messages({15 amount: 500,16 style: {17 layout: "text",18 },19 }).render('.pp-message');20 </script>21</body>
For more information about advanced JavaScript message configuration, see Advanced JavaScript options.
Add messages to legacy PayPal REST API or static button integration
If you have an integration that's not JavaScript-based, such as an HTML form with a static button image, you can include the JavaScript SDK with only the messages
component on your page without affecting your existing buttons integration.
Sample code
1<script src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&components=messages"></script>