---
page_source: https://juspay.io/in/docs/payment-page-enterprise/react-native/resources/clickstream-events
page_title: Clickstream Events
---


## ClickStream Events



Clickstream events refer to a series of actions or interactions a user takes when browsing a mobile app. These events are recorded and analyzed by businesses to gain insights into user behavior and preferences. Clickstream events may include clicks on buttons, checkbox clicked, payment method selected, upi apps selected and more . By analyzing clickstream data, businesses can optimize their app design, improve user experience, and increase conversion rates.


### Step 1 Create Initiate payload


Initiate API takes two parameters as input. One of the parameter is a JSON object referred as `InitiatePayload`. This payload contains certain key value pairs used by the SDK to perform a successful initiate

Refer to the following table for information about the description and sample payload.

Here an extra parameter is passed which is "logLevel" : "1"


### Payload
- **RequestId**:
  - Description: Unique uuid-v4 string
  - Value: $requestId
  - Tags: String, Mandatory
- **Service**:
  - Description: Value: in.juspay.hyperpay
  - Tags: String, Mandatory
- **Payload**:
  - Description: Parameters required to call Hyper SDK API
  - Value:
    - **Action**:
      - Description: Value: initiate
      - Tags: String, Mandatory
    - **LogLevel**:
      - Description: Value: 1
      - Tags: String, Mandatory
    - **MerchantId**:
      - Description: Unique merchant id shared during onboarding
      - Tags: String, Mandatory
    - **ClientId**:
      - Description: Unique Client id shared during onboarding
      - Tags: String, Mandatory
    - **Environment**:
      - Description: Environment to be used for the session. Accepted value is production
      - Tags: String, Mandatory
  - Tags: JSON, Mandatory





### Step 2 Create CallbackHandler


During its lifecycle, SDK emits multiple events to communicate about the transaction status. All of these events are received by an instance of `HyperPaymentsCallbackAdapter`.

This callback handler is passed as the second argument to the initiate API call. Here we have added a extra if statetment which will check for log_stream events




### Step 3 Check the Event Json Response 


The callback handler will be emitting the below mentioned events based upon the user behaviour/journey.




| Event Types | Description |
|---|---|
| current_screen | This provides the name of the screen being displayed |
| button_clicked | This provides the name of the button which was clicked |
| checkbox_clicked | This provides the name of the checkbox along with the state of the checkbox |
| payment_instrument_group | This is emitted whenever a user selects a payment method and initiates the transaction |
| stored_card_selected | This is emitted whenever user taps on a stored card or transacts via it |
| card_selected | This is emitted whenever user transacts via the add card flow |
| bank_selected | This provides the bank name whenever user taps on a net banking option or transacts via it |
| wallet_selected | This provides the wallet name whenever user taps on a wallet option or transacts via it |
| upi_apps | This provides the UPI app name whenever user taps on a UPI app or transacts via it |
| expiry_date_changed | This is emitted when user changes the expiry value. This also provides the name of the screen where the card expiry field is changed |
| cvv_changed | This is emitted when user changes the cvv text. This also provides the name of the screen where the card cvv field is changed |
| card_number_changed | This is emitted when user changes the card number |
| upi_id_changed | This is emitted when user changes the UPI VPA in the collect flow |