Online/
Online/
Checkout/
Pay Later Offers/
Customize/
Code Samples

Code samples for Pay Later integration

Last updated: Nov 6th, 11:14am

<span>Pay Later upgrade options</span>

Pay Later upgrade options

To add Pay Later messaging to an existing PayPal integration, choose one of these options:

Upgrade to a JavaScript SDK integration

To add Pay Later offers to a legacy integration, you add a <script /> tag where you want to render messages. These steps upgrade an existing PayPal integration to the latest JavaScript SDK. The new code keeps you current with messages, features, and styles.

To upgrade:

  1. Remove the legacy <script /> tags that you're currently using for PayPal messages.
  2. Add the PayPal JavaScript SDK in a <script> element with the messages component within the <head> element of your page, as shown in the following example. <script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=messages"></script>
  3. Add <div> elements with the necessary attributes inside the <body> of your document where you want to render messages. For more information, see Customize Pay Later messaging.

Legacy JavaScript 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:

  • Use <script /> tags to load a merchant.js file from a domain. For more information about this option, see Use script tags.
  • Load assets directly from //www.paypalobjects.com/upstream/bizcomponents/js/merchant.js, ad.where.com/jin/spotlight/ads, or paypal.adtag.where.com. For more information about this option, see Load assets directly.

Use script tags

To upgrade:

  1. Remove the <script /> tags that load the merchant.js file.
  2. Add the PayPal JavaScript SDK to the <head> element of your site.
  3. Add <div> elements with the necessary attributes inside the <body> of your document where you want to render messages. For more information, see Customize Pay Later messaging.
    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>

    Load assets directly

    In this integration, you directly load assets from ad.where.com/jin/spotlight/ads, //www.paypalobjects.com/upstream/bizcomponents/js/merchant.js, or paypal.adtag.where.com.

    To upgrade:

    1. Remove the <script /> tags that load the merchant.js file.
    2. Add the PayPal JavaScript SDK to the <head> element of your site.
    3. Add <div> elements with the necessary attributes inside the <body> of your document where you want to render messages. For more information, see Customize Pay Later messaging.

    To load assets from ad.where.com/jin/spotlight/ads, use the following script:

      1<script type="text/javascript">
      2  document.write("<scr");
      3  document.write(
      4    '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=' +
      5      Math.round(Math.random() * 100000000000000) +
      6      '">'
      7  );
      8  document.write("</scr" + "ipt>");
      9</script>

      To load assets from /upstream/bizcomponents/js/merchant.js, use the following script:

        1<script type="text/javascript" data-pp-payerid="YOUR_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>

        To load assets from paypal.adtag.where.com subdomain, use the following script:

          1<script type="text/javascript" data-pp-pubid="YOUR_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>

          Add Pay Later to an 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 JavaScript SDK messages independently on pages that need only the Pay Later messaging.

          The PayPal JavaScript 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.

          The following topics provide some examples of common integration scenarios. Use these examples to identify and plan your upgrade.

          Pages with no other PayPal integrations

          Use this approach on pages that have no existing PayPal integrations. In this scenario, you'd like to add messages to a page that has no other PayPal integrations. To do this, set the value of the components= parameter to messages in the <script /> tag's src attribute.

          <script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=messages"></script>

          Pages that use the SDK buttons component

          Use this method for pages that use the buttons component from the PayPal JavaScript SDK. In this type of integration, you used the PayPal JavaScript SDK to add PayPal checkout buttons to your site already. You'd like to add Pay Later messages now. To do this, you add the messages component to the components= parameter in the <script /> tag's src attribute. Use a comma to separate individual components.

          <script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=buttons,messages"></script>

          Legacy PayPal checkout.js

          For pages with a legacy PayPal checkout.js integration, use this type of upgrade to add Pay Later messaging.

          Because this is a legacy integration, we recommended that you update your checkout integration to use the PayPal JavaScript SDK and use components=buttons,messages, as shown in earlier examples. However, if you're unable to upgrade to the SDK but want to use Pay Later features, keep your checkout.js script and add a new script for the PayPal JavaScript SDK with the data-namespace attribute set to "PayPalSDK".

          For more information about advanced JavaScript message configuration, see the Advanced JavaScript options for Pay Later.

            1<script src="https://www.paypalobjects.com/api/checkout.js"></script>
            2<script
            3  data-namespace="PayPalSDK"
            4  src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=messages"
            5></script>

            When you configure messages using JavaScript, the value that you set for data-namespace is the name of the global variable that you use to configure and render messages.

              1<head>
              2  <!--
              3      Whatever you use for data-namespace, you have to use below
              4      when configuring and rendering the messages
              5    -->
              6  <script
              7    data-namespace="PayPalSDK"
              8    src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=messages"
              9  ></script>
              10</head>
              11<body>
              12  <div class="pp-message"></div>
              13

              14  <script>
              15    // PayPalSDK is used here because this is the value we used above
              16    // for the data-namespace attribute in the <script /> tag
              17    PayPalSDK.Messages({
              18      amount: 500,
              19      style: {
              20        layout: "text",
              21      },
              22    }).render('.pp-message');
              23  </script>
              24</body>

              Legacy PayPal REST API or static button

              For the following types of integrations, you might use this option. For these pages, you can include the PayPal JavaScript SDK with only the messages component on your page without affecting your existing button integration.

              • Pages with a legacy PayPal REST API
              • Pages that use static buttons, such as an HTML form that has a static button image
              <script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=messages"></script>
              ReferencePayPal.comPrivacyCookiesSupportLegalContact

              If you accept cookies, we’ll use them to improve and customize your experience and enable our partners to show you personalized PayPal ads when you visit other sites. Manage cookies and learn more