Pay Later messaging analytics

CurrentDocs

Last updated: Apr 2nd, 11:39pm

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:

Option Description
onRender Called after each message is successfully rendered to the DOM.
onClick Called after each message is selected.
onApply Called 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 onRenderonClick, and onApply.

Sample code

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

    In the previous example, you create a message object by calling the paypal.Messages function with a configuration object that includes optional properties for onRenderonClick, and onApply.

    The functions in this example log in the console that an event has occurred. Refer to your analytics platform's documentation on how to log when a custom event has occurred and 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.

    Example

      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>

      We use cookies to improve your experience on our site. May we use marketing cookies to show you personalized ads? Manage all cookies