Pay Later messaging analytics

DocsCurrentLast updated: November 14th 2023, @ 12:37:08 pm


When you integrate Pay Later messaging, you can also integrate your analytics platform and add events related to Pay Later messaging.

The JavaScript SDK accepts optional callback function properties.

Events

The following table lists functions that are called immediately, and can be used for tracking by your analytics platform:

OptionDescription
onRenderCalled after each message is successfully rendered to the DOM.
onClickCalled after each message is selected.
onApplyCalled after clicking on an apply link or button.

In the following code sample, you create a message object by calling the paypal.Messages function with a configuration object that includes optional properties for onRender, onClick, and onApply.

Sample code

1<!DOCTYPE html>
2<head>
3 <meta name="viewport" content="width=device-width, initial-scale=1">
4 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
5 <script
6 src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&components=messages">
7 </script>
8</head>
9<body>
10 <div class="pp-message"></div>
11 <script>
12 paypal.Messages({
13 amount: 500,
14 pageType: 'product-detail',
15 style: {
16 layout: 'text',
17 logo: {
18 type: 'primary',
19 position: 'top'
20 }
21 },
22 onRender: () => {
23 console.log('render')
24 },
25 onClick: () => {
26 console.log('click')
27 },
28 onApply: () => {
29 console.log('apply')
30 }
31 })
32 .render('.pp-message');
33 </script>
34</body>

Logging

The following sample response shows a message in the console log when an event has occurred. Refer to your analytics platform's documentation to learn how to log a message when a custom event has occurred. Put that code in the function body of the event hook properties of the messages configuration object.

You can also add event hooks using inline HTML attributes.

Note: The event handlers added in HTML override any attributes defined by the JavaScript API.

Sample log

1<div
2 data-pp-message
3 data-pp-onrender="console.log('Callback called on render')"
4 data-pp-onclick="console.log('Callback called on click')"
5 data-pp-onapply="console.log('Callback called on apply')"
6></div>