---
title: Event Listeners
slug: crypto/event-listeners
docTags: 
createdAt: 2023-10-19T09:16:20.518Z
---

### 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: 

1. On completion of Checkout transaction triggered by `pay3.openCheckout()`

**Payload**

`data` (Type Object): Following keys are present in this object 

1. `status` (Type string): The status can have one of these values - SUCCESS or ERROR or INITIATED.
2. `message` (Type string): User-friendly message returned after completion of the transaction.
3. `orderId` (Type string): Pay3 Order ID.  
4. `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**

1. `eventName` (Type string):  Name of the event for which we want to register the callback
2. `callbackFn` (Type function):  Callback function accepting a parameter payload. 

:::CodeblockTabs
index.js

```javascript
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**

1. `eventName` (Type string): Name of the event for which we want to test if the callback is registered.

**Return** (Type boolean) 

```javascript
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**

1. `eventName` (Type string):  Name of the event for which we want to register the callback
2. `callbackFn` (Type function):  Callback function accepting a parameter payload. 

```javascript
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`

```javascript
<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"
    }
}
```

***