Advanced JavaScript options

Explore ways to configure your JavaScript SDK

SDKCurrentLast updated: April 8th 2022, @ 8:17:05 am

Country or region

The messages component of the PayPal JavaScript SDK is flexible enough for you to integrate and utilize in a variety of ways. The following sections cover different methods for configuring and using the SDK.

Know before you code

This integration modifies an existing Pay Later integration.
If you haven't already, add Pay Later messaging to your site.

Configure using JavaScript

You can configure and render your messages using JavaScript as an alternative to HTML attributes. The PayPal JavaScript SDK messages component uses a JavaScript API that is similar to the API used by the buttons component.

Sample code

<!DOCTYPE html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <script
    src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&currency=EUR&components=messages">
  </script>
</head>
<body>

<div class="pp-message"></div>
  <script>
    paypal.Messages({
      amount: 120,
      style: {
        layout: 'text',
        logo: {
          type: 'primary'
        }
      }
    })
    .render('.pp-message');
  </script>
</body>

In the above example, you create a message object by calling the paypal.Messages function. The paypal.Messages function takes a configuration object as a parameter and returns a message object. The message object takes in a render parameter to determine where to render a Pay Later message or messages on your HTML page.

The code sample above sets the amount to 120 and configures the message to use a text layout with the primary logo, then instructs the SDK to render the message wherever the pp-message class appears on the HTML page. This example renders a message on your website that's similar to the following image.

Ratenzahlung text message for a Pay Later offer with 12 pixel font, left-aligned, black text on a white background, with a PayPal logo displaying the PayPal icon and name on the left side of the text

Advanced JavaScript options

On this page

Know before you code

Configure using JavaScript

Sample code

See also