Pay3 Javascript SDK
Event Listeners

9min
Introduction
After completing transactions in Pay3 SDK UI, the Pay3 SDK publishes events to App. 
pay3-sdk-transaction-status
This event is fired by Pay3 SDK in following scenario: 
On completion of Checkout transaction triggered by pay3.openCheckout()
Payload
data (Type Object): Following keys are present in this object 
status (Type string): The status can have one of these values - SUCCESS or ERROR or INITIATED.
message (Type string): User-friendly message returned after completion of the transaction.
orderId (Type string): Pay3 Order ID.  
requestId (Type string): Unique id passed by App.

Register callback: pay3Pay.on()
This function registers a callback, which is invoked when the given event type is received from Pay3.
Parameter
eventName (Type string):  Name of the event for which we want to register the callback
callbackFn (Type function):  Callback function accepting a parameter payload. 
index.js
function myListener(payload) => {
  if (payload.error) {
    console.log("Error during transaction ", payload);  
  } else {
    const { status, message, orderId, requestId } = payload.data;
    console.log("Received transaction response", { status, message, orderId, requestId });
  }
}

pay3Pay.on('pay3-sdk-transaction-status', myListener);
function myListener(payload) => {
  if (payload.error) {
    console.log("Error during transaction ", payload);  
  } else {
    const { status, message, orderId, requestId } = payload.data;
    console.log("Received transaction response", { status, message, orderId, requestId });
  }
}

pay3Pay.on('pay3-sdk-transaction-status', myListener);
﻿
Check if registered:  pay3Pay.hasListeners()
This function returns true if the event already has a registered callback. 
Parameter
eventName (Type string): Name of the event for which we want to test if the callback is registered.
Return (Type boolean) 
JS
const isRegistered = pay3Pay.hasListeners('pay3-sdk-transaction-status');
const isRegistered = pay3Pay.hasListeners('pay3-sdk-transaction-status');
﻿
Unregister callback:  pay3Pay.removeListener()
This function removes a function that is already registered as a callback. Input of this function needs to be the same as that was provided in pay3Pay.on function call.
Parameter
eventName (Type string):  Name of the event for which we want to register the callback
callbackFn (Type function):  Callback function accepting a parameter payload. 
JS
pay3Pay.removeListener('pay3-sdk-transaction-status', myListener);
pay3Pay.removeListener('pay3-sdk-transaction-status', myListener);
﻿
Register callback in React Native using WebView
For React native with Javascript SDK, the Pay3 Payment publishes the events using window.ReactNativeWebView.postMessage(string payload). These events are available via onMessage handler of the WebView
JS
<WebView
  source={{uri: <URL returned by openCheckout or openPayout>}}
  ...
  onMessage={(event) => {
    const data = JSON.parse(event.nativeEvent.data);
    alert(JSON.stringify(data));
  }}
/>
<WebView
  source={{uri: <URL returned by openCheckout or openPayout>}}
  ...
  onMessage={(event) => {
    const data = JSON.parse(event.nativeEvent.data);
    alert(JSON.stringify(data));
  }}
/>
﻿
JSON
// Sample JSON object
{
    "type": "pay3-sdk-transaction",
    "data": {
        "message": "Transaction completed successfully",
        "requestId": "cebb18de-739d-432d-89ff-b0dc2677c891",
        "status": "SUCCESS",
        "orderId": "1f16294b-fa2b-4eec-b55d-7c6638eb76ed"
    }
}
// Sample JSON object
{
    "type": "pay3-sdk-transaction",
    "data": {
        "message": "Transaction completed successfully",
        "requestId": "cebb18de-739d-432d-89ff-b0dc2677c891",
        "status": "SUCCESS",
        "orderId": "1f16294b-fa2b-4eec-b55d-7c6638eb76ed"
    }
}
﻿
﻿
Updated 26 Jul 2024
Did this page help you?
Transactions
Callback URL