--- page_source: https://juspay.io/sea/docs/hyper-checkout-sea/web/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 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 - 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 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 | | 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 | ## Sample Code Snippets: ### Step 1 and Step 2: Create Initiate Payload and Create Callback handler: #### Create Initate Payload Code Snippet: ```create initate payload // This function creates intiate payload. private JSONObject createInitiatePayload() { JSONObject sdkPayload = new JSONObject(); JSONObject innerPayload = new JSONObject(); try { // generating inner payload innerPayload.put("action", "initiate"); innerPayload.put("logLevel", "1"); innerPayload.put("merchantId", ""); // Put your Merchant ID here innerPayload.put("clientId", "CLIENT_ID"); // Put your Client ID here innerPayload.put("environment", "production"); sdkPayload.put("requestId", ""+ UUID.randomUUID()); sdkPayload.put("service", "in.juspay.hyperpay"); sdkPayload.put("payload", innerPayload); } catch (Exception e) { e.printStackTrace(); } return sdkPayload; } ``` #### Create Callback Handler Code Snippet: ```create callback handler private HyperPaymentsCallbackAdapter createHyperPaymentsCallbackAdapter() { return new HyperPaymentsCallbackAdapter() { @Override public void onEvent(JSONObject jsonObject, JuspayResponseHandler responseHandler) { Intent redirect = new Intent(CheckoutActivity.this, ResponsePage.class); redirect.putExtra("responsePayload", jsonObject.toString()); System.out.println(jsonObject); try { String event = jsonObject.getString("event"); if (event.equals("hide_loader")) { // Hide Loader dialog.hide(); } // Handle Process Result // This case will reach once payment page closes // block:start:handle-process-result if (event.equals("log_stream")) { // catch the relevant events from here } else if (event.equals("process_result")) { boolean error = jsonObject.optBoolean("error"); JSONObject innerPayload = jsonObject.optJSONObject("payload"); String status = innerPayload.optString("status"); if (!error) { switch (status) { case "charged": // Successful Transaction // check order status via S2S API redirect.putExtra("status", "OrderSuccess"); startActivity(redirect); break; case "cod_initiated": redirect.putExtra("status", "CODInitiated"); startActivity(redirect); break; } } else { switch (status) { case "backpressed": // user back-pressed from PP without initiating transaction break; case "user_aborted": // user initiated a txn and pressed back // check order status via S2S API Intent successIntent = new Intent(CheckoutActivity.this, ResponsePage.class); redirect.putExtra("status", "UserAborted"); startActivity(redirect); break; case "pending_vbv": redirect.putExtra("status", "PendingVBV"); startActivity(redirect); break; case "authorizing": // txn in pending state // check order status via S2S API redirect.putExtra("status", "Authorizing"); startActivity(redirect); break; case "authorization_failed": redirect.putExtra("status", "AuthorizationFailed"); startActivity(redirect); break; case "authentication_failed": redirect.putExtra("status", "AuthenticationFailed"); startActivity(redirect); break; case "api_failure": redirect.putExtra("status", "APIFailure"); startActivity(redirect); break; // txn failed // check order status via S2S API } } } // block:end:handle-process-result } catch (Exception e) { // merchant code... } } }; } ``` ### Step 3: Response of different events: #### current_screen: ```plaintext { "category": "screen", "subcategory": "screen", "label": "current_screen", "value": { "url": "", "screen_name": "PaymentPageScreen", "presentation_type": "screen", "id": 1 } } ``` #### button_clicked: ```plaintext { "category":"action", "subcategory":"user", "label":"button_clicked", "value":{ "button_name":"back_button_pressed" } } ``` #### checkbox_clicked: ```plaintext { "category": "action", "subcategory": "system", "label": "checkbox_clicked", "value": { "checkbox_details": { "checkbox_name": "save_card", "state": "selected" } } } ``` #### payment_instrument_group: ```plaintext { "category":"action", "subcategory":"user", "label":"payment_instrument_group", "value":{ "pig_name":"nb" } } ``` #### stored_card_selected: ```plaintext { "category":"action", "subcategory":"user", "label":"stored_card_selected", "value":{ "card_details":{ "card_type":"DEBIT", "card_brand":"visa", "bank_name":"SBI" } } } ``` #### card_selected: ```plaintext { "category":"action", "subcategory":"user", "label":"card_selected", "value":{ "card_details":{ "card_type":"DEBIT", "card_brand":"visa", "bank_name":"SBI" } } } ``` #### bank_selected: ```plaintext { "category":"action", "subcategory":"user", "label":"bank_selected", "value":{ "bank_name":"Axis Bank" } } ``` #### wallet_selected: ```plaintext { "category":"action", "subcategory":"user", "label":"wallet_selected", "value":{ "unlinked_wallet":"Paytm Wallet" } } ``` #### upi_apps: ```plaintext { "category":"action", "subcategory":"user", "label":"upi_apps", "value":{ "upi_app_selected":{ "packageName":"com.google.android.apps.nbu.paisa.user", "appName":"Google Pay" } } } ``` #### expiry_date_changed: ```plaintext { "category":"action", "subcategory":"user", "label":"expiry_date_changed", "value":{ "AddCardScreen":"XXXX" } } ``` #### cvv_changed : ```plaintext { "category":"action", "subcategory":"user", "label":"cvv_changed", "value":{ "AddCardScreen":"XXX" } } ``` #### card_number_changed: ```plaintext { "category":"action", "subcategory":"user", "label":"card_number_changed", "value":{ "AddCardScreen":"515161XXXXXXXXXXX" } } ``` #### upi_id_changed: ```plaintext { "category":"action", "subcategory":"user", "label":"upi_id_changed", "value":{ "VpaScreen":"@upi" } } ```