Event callbacks

There are 4 different callback event functions you can receive from our Slope.js front-end widget. All of the functions will return a single argument that contains an object. All callbacks are optional

🚧

Frontend callbacks data can't be trusted

Since all frontend code is executed by the by the end user, the data can be tampered. You should only use the callback data for display purposes only. To obtain trusted data, fetch directly from our backend API from your backend server.

onSuccess() required

Called when the end-user has completed the flow and has closed the modal.

{
  customer: { ... }, // Customer object, see /customers/:id API. May be null for checkout flow.
  order: { ... }, // Order object, see /orders/:id API. May be null for non-checkout flow
  context: { ... } // see below
}

onOrderOpen() optional

Called when the end-user has successfully submitted an order. This happens before the modal is closed and before onSuccess is called.

{
  customer: { ... }, // Customer object, see /customers/:id API. 
  order: { ... }, // Order object, see /orders/:id API. 
  context: { ... } // see below
}

onClose() required

Called when the end-user has closed the modal before reaching the final page. Can be considered a drop-off from the user. The context object will contain the current page which can be used to track the drop-off page.

{
  context: { ... } // see below
}

onFailure() optional

Called when an error has occurred that has prevented the user from moving forward. This will be triggered after the user can closed the error screen.

{
  errorMessage: 'Error message string',
  errorCode: 'some-error-type',
  context: { ... } // see below
}

onEvent() optional

Called for analytics only to send tracking events. The page-viewed event is called the most frequently and is called for each page change.

Example payload:

{
    type: "page-viewed",
    attributes: { ... }, // optional additional metadata about the event
    context: { ... } // see below
}

Event types

'back-button-press'
'terms-and-conditions-read'
'payment-terms-selected'
'add-new-card-button-press'
'payment-method-add-card-saved'
'payment-method-add-ach-selected'
'payment-method-add-ach-saved'
'payment-method-card-selected'
'payment-method-ach-selected'
'payment-method-card-completed'
'payment-method-ach-completed'
'payment-method-oxxo-completed'
'payment-method-spei-completed'
'payment-method-selected'
'payment-method-confirmed'
'page-viewed'

context object

🚧

Context schema may change

The context schema may change anytime and you should only used for debugging and analytics only. If storing the context, it should be serialized as a JSON string

The context field will be automatically added to all event callbacks. However, in some instances where an expected error occurs at the root level this context object may be null. See example context object below:

{
  url_path: "/pre_qualify", // Naming may change frequently.
  session_id: "678bf2b8-452a-43a9-b29c-31e7a46bfdc0",
  view_id: "125bd189-014d-431a-b2e4-822c1a1824ea",
  view_name: "pre_qualify",
  merchant_id: "mch_24GT1PAHxi7yNWJh2C4mznL9Paz",
  cutomer_id: "cust_26POi4qjL6JmTQTh72U3ddmWPn5",
  flow: "pre_qualify",
  timestamp: 1664406660987
}