Advanced JavaScript options

Explore ways to configure your JavaScript SDK


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.

On this page

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.

Example:

<!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: 500,
            placement: 'product',
            style: {
                layout: 'text',
                logo: {
                    type: 'primary',
                    position: 'top'
                }
            }
        })
        .render('.pp-message');
    </script>
</body>

In the previous 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.

In the previous code sample:

  • The amount is set to 500
  • The message appears on a product detail page type
  • The message uses a text layout with a primary logo on top of the message.

The SDK renders 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.

Pay later messaging text primary left black

The configuration object mirrors the HTML attributes. data-pp-style-layout is equivalent to the configuration object path of style.layout.

Use event hooks

You can pass in your own callback functions to be triggered on certain events.

The events available are onRender, onClick and onApply.

Example:

<!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: 500,
            placement: 'product',
            style: {
                layout: 'text',
                logo: {
                  type: 'primary',
                  position: 'top'
                }
            },
            onRender: () => {
                console.log('render')
            },
            onClick: () => {
                console.log('click')
            },
            onApply: () => {
                console.log('apply')
            }
        })
        .render('.pp-message');
    </script>
</body>

In the previous example, you create a message object by calling the paypal.Messages function just as you did in the previous example. However, in this example, you add in optional properties for onRender, onClick and onApply. For more information on event hooks, refer to Analytics section.

See also

See the Reference tables to view all configuration settings.