Skip to main content
When you integrate Pay Later messaging, you also can integrate your analytics platform and add events that are related to Pay Later offers and messaging. The JavaScript SDK v6 accepts optional callback function properties.

​
Events

The following table lists functions that the SDK calls immediately. Your analytics platform can use these events for tracking.
EventDescription
onRenderInvoked after each message renders into the DOM
onClickInvoked after a user selects the message
onApplyInvoked after a user selects the Apply button or link in the pop-up modal
The following code sample calls the paypal.Messages function to create a message object with optional properties for the onRender, onClick, and onApply events. The functions in this example add an entry to the console log when one of these events occurs. You also can use inline HTML attributes to add event hooks.
Note: The event handlers that you add to HTML override any attributes from the JavaScript API. 
<!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&components=messages">
    </script>
</head>

<body>
    <div class="pp-message"></div>
    <script>
        paypal.Messages({
                amount: 500,
                pageType: 'product-details',
                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>

​
Logging

The following sample response shows an event message in the console log. For more information about logging events, see your analytics platform’s documentation about logging custom events. Add the necessary code to the function body of the event hook for the messages configuration object. 
<div
  data-pp-message
  data-pp-onrender="console.log('Callback called on render')"
  data-pp-onclick="console.log('Callback called on click')"
  data-pp-onapply="console.log('Callback called on apply')"
></div>
⌘I