Compatibility

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.

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 id="pp-pay-later-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-pay-later-message");
  </script>
</body>

More information about advanced JavaScript configuration of the messages can be found 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>