Pay Later Upgrade Options

DocsCurrentDirect merchant

Last updated: Apr 10th, 12:05am

If you have an existing PayPal integration and want to add Pay Later messages, choose from the options below.

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:

  1. Remove the legacy <script /> tags that you're currently using for PayPal messages.
  2. 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=YOUR_CLIENT_ID&components=messages"></script>
    1. 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 a merchant.js file from a domain.
    • Loading assets directly from ad.where.com/jin/spotlight/ads.

    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.

    Sample code

    1. paypalobjects domain
    2. paypal.adtag.where.com subdomain
    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>

    Steps

    To upgrade:

    1. Remove the <script /> tags that are loading the merchant.js.
    2. Add the PayPal JavaScript SDK to the <head></head> of your site.
    3. Add div elements with proper attributes where you want to render messages.

    Loading assets directly

    In this integration, you directly load assets from ad.where.com/jin/spotlight/ads.

    Sample code

      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>

      Steps

      To upgrade:

      1. Remove the <script /> tags.
      2. Add the JavaScript SDK to the <head></head> of your site.
      3. Add div elements with proper attributes where you want to render messages.

      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

        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>

        Steps

        To upgrade, complete the following:

        1. Remove the <script /> tags that are loading the merchant.js.
        2. Add the PayPal JavaScript SDK to the <head></head> of your site.
        3. Add div elements with proper attributes where you want to render messages.

        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

          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>

          Steps

          To upgrade, complete the following:

          1. Remove the <script /> tags that are loading the merchant.js.
          2. Add the PayPal JavaScript SDK to the <head></head> of your site.
          3. Add div elements with proper attributes where you want to render messages.

          Legacy direct integration

          This legacy integration directly loads assets directly from from ad.where.com/jin/spotlight/ads.

          Sample code

            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>

            Steps

            To upgrade, complete the following:

            1. Remove the <script /> tags.
            2. Add the PayPal JavaScript SDK to the <head></head> of your site.
            3. Add div elements with proper attributes where you want to render messages.

            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 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.

            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

              1<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

                1<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

                  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>

                  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  <!--
                    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>

                    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

                      1<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