Pay Later Upgrade Options
Add Pay Later offers to your existing integration
DocsCurrentLast updated: April 12th 2022, @ 9:22:12 am
If you have an existing PayPal integration and want to add Pay Later messages, choose from the options below.
Upgrade to JavaScript SDK integration
If possible, upgrade your PayPal messages integration to the latest PayPal JavaScript SDK. The new code keeps you current with messages, features, and styles.
In this section
- Know before you code
- How it works
- Legacy merchant.js integration
- Legacy merchant.js subdomain integration
- Legacy direct integration
Know before you code
- These steps upgrade an existing legacy integration to PayPal's latest JavaScript SDK.
- If you want to continue using your legacy integration, you must add a
<script />
tag wherever you wanted to render messages.
How it works
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.
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=messages"></script>
- Add div elements with proper attributes inside the
<body></body>
of your document where you want to render messages.
Sample code
<!--
In your code, dynamically update data-pp-amount with the price or
cart amount. For example, data-pp-amount="89.99" for $89.99 product
Also, update data-pp-placement with the page type. Can be one of
"home", "category", "product", "cart" or "payment"
-->
<div
data-pp-message
data-pp-style-layout="text"
data-pp-style-logo-type="inline"
data-pp-amount="ENTER_VALUE_HERE"
data-pp-placement="ENTER_PAGE_TYPE_HERE"
></div>
The following explains the legacy messaging integrations that help you identify your integration and upgrade. For a full set of instructions on adding and customizing messages with the PayPal JavaScript SDK, refer to the customize messages page.
Legacy merchant.js integration
In this integration, you added one or more <script />
tags to your site, inside of which you're loading a merchant.js using www.paypalobjects.com/upstream/bizcomponents/js/merchant.js
.
Sample code
<script type="text/javascript" data-pp-payerid="YOUR_PAYER_ID">
(function (d, t) {
var s = d.getElementsByTagName(t)[0],
n = d.createElement(t);
n.src = "//www.paypalobjects.com/upstream/bizcomponents/js/merchant.js";
s.parentNode.insertBefore(n, s);
})(document, "script");
</script>
Steps
To upgrade, complete the following:
- 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
is different than fromclient-id
required when loading the PayPal JavaScript SDK. If you don't yet know or have yourclient-id
, follow the Get Started instructions to get your PayPal API credentials.
Legacy merchant.js subdomain integration
This integration is similar to the merchant.js integration outlined earlier, but it loads merchant.js using paypal.adtag.where.com.
Sample code
<script type="text/javascript" data-pp-pubid="YOUR_PAYER_ID">
(function (d, t) {
var s = d.getElementsByTagName(t)[0],
n = d.createElement(t);
n.src = "//paypal.adtag.where.com/merchant.js";
s.parentNode.insertBefore(n, s);
})(document, "script");
</script>
Steps
To upgrade, complete the following:
- 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 provided to
data-pp-pubid
is different from theclient-id
required when loading the PayPal JS SDK. Follow the Get Started instructions to get your PayPal API credentials.
Legacy direct integration
This legacy integration directly loads assets directly from from ad.where.com/jin/spotlight/ads.
Sample code
<script type="text/javascript">
document.write("<scr");
document.write(
'ipt type="text/javascript" data-ppmnid="92820893359741" src="//ad.where.com/jin/spotlight/ads?pubid= K94SASJJZDBBQ&format=js&v=2.4&placementtype=120x90&ppmnid=92820893359741&rand=' +
Math.round(Math.random() * 100000000000000) +
'">'
);
document.write("</scr" + "ipt>");
</script>
Steps
To upgrade, complete the following:
- Remove the
<script />
tags. - 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 values provided to
ppmnid
andpubid
are different from theclient-id
required when loading the PayPal JS SDK. If you don't yet know or have yourclient-id
, follow the Get Started instructions to get your PayPal API credentials.
Add 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
, the immediate predecessor to the PayPal JavaScript SDK. To use the SDK on the same page as checkout.js
, you must include the data-namespace
attribute on the <script />
tag.
In this section
- Use on pages with no other PayPal integrations
- SDK buttons component
- Legacy PayPal checkout.js
- Legacy PayPal REST API or static button
Use 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
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=messages"></script>
SDK buttons component
Use on pages with SDK buttons component. In this scenario, you've already added the PayPal JavaScript SDK to add PayPal checkout buttons to your site. Now you'd like to add messages as well. Add the messages
component to the components=
parameter in the <script />
tag's src
attribute. Use a comma to separate individual components.
Sample code
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=buttons,messages"></script>
Legacy PayPal checkout.js
Use on pages with a 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. However, if you're unable to upgrade to the SDK but still want to use messaging features, keep your checkout.js
script and add a new script for the PayPal JS SDK with the data-namespace
attribute set to "PayPalSDK"
.
Sample code
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script
data-namespace="PayPalSDK"
src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=messages"
></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
<head>
<!--
Whatever you use for data-namespace, you have to use below
when configuring and rendering the messages
-->
<script
data-namespace="PayPalSDK"
src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=messages"
></script>
</head>
<body>
<div class="pp-message"></div>
<script>
// PayPalSDK is used here because this is the value we used above
// for the data-namespace attribute in the <script /> tag
PayPalSDK.Messages({
amount: 500,
style: {
layout: "text",
},
}).render('.pp-message');
</script>
</body>
You can find more information about advanced JavaScript message configuration in Advanced Usage.
Legacy PayPal REST API or static button
Use on pages with a 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 could include the PayPal JavaScript SDK with only the messages
component on your page without affecting your existing buttons integration.
Sample code
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=messages"></script>