--- page_title: 5. Life Cycle Events product: Hypercheckout platform: React Native page_source: https://juspay.io/in/docs/hyper-checkout/react-native/base-sdk-integration/life-cycle-events llms_txt: https://juspay.io/in/docs/llms.txt product_llms_txt: https://juspay.io/in/docs/hyper-checkout/llms.txt --- # 5. Life Cycle Events The Hypercheckout SDK runs in a fragment. Hence, to handle certain events based upon activity life cycle, client will need to forward those events to the Hypercheckout SDK. These events are crucial for seamless functioning of features like OTP reading, App Switches (UPI Intent), Hardware backpress. Following are the Life cycle events which SDK needs ### Step 5.1. onBackPressed Payments SDK internally uses an android fragment for opening the bank page and will need the control to hardware back press when the bank page is active. This can be done by invoking `addEventListener` on the BackHandler provided by React-Native #### Code Snippets: - #### Functional Code Snippet: ```functional useEffect(() => { BackHandler.addEventListener('hardwareBackPress', () => { return !HyperSdkReact.isNull() && HyperSdkReact.onBackPressed(); }); return () => { BackHandler.removeEventListener('hardwareBackPress', () => null); } }, []) ``` #### Class Code Snippet: ```class BackHandler.addEventListener("hardwareBackPress", () => { return !HyperSdkReact.isNull() && HyperSdkReact.onBackPressed(); ``` ### Step 5.2. (Conditional) onRequestPermissionsResult Payments SDK needs to listen to the response of permissions asked to the user for handling auto SMS reading (wherever applicable). To do so, the merchant's activity should delegate the response to Hyper SDK once it is received from the user. Add the following snippet in merchant's react activity (MainActivity) > **Note** > This is a conditional step, and is only supposed to be implemented if you are **overriding** onRequestPermissionsResult #### Code Snippets: - #### Functional Code Snippet: ```functional @Override public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) { if (HyperSdkReactModule.getPermissionRequestCodes().contains(requestCode)) { HyperSdkReactModule.onRequestPermissionsResult(requestCode, permissions, grantResults); } else { super.onRequestPermissionsResult(requestCode, permissions, grantResults); } } ``` #### Class Code Snippet: ```class /* eslint-disable react-native/no-inline-styles */ import React from "react"; import { StyleSheet, TouchableOpacity, Image, View, ImageBackground, } from "react-native"; import HyperSdkReact from "hyper-sdk-react"; import axios from "axios"; import { encode } from "base-64"; import { withNavigation } from "react-navigation"; import { BackHandler, Button, NativeEventEmitter, NativeModules, ScrollView, Text, navigation, } from "react-native"; import { createStackNavigator } from "react-navigation"; class Checkout extends React.Component { constructor(props) { super(props); this.state = { processPayload: {}, total: 1 }; } componentDidMount() { const eventEmitter = new NativeEventEmitter(NativeModules.HyperSdkReact); eventEmitter.addListener("HyperEvent", (resp) => { const data = JSON.parse(resp); const event = data.event || ""; switch (event) { case "initiate_result": // this was already handled in homescreen where initiate was called break; case "hide_loader": // stop the processing loader break; //block:start:handle-process-result case "process_result": const error = data.error || false; const innerPayload = data.payload || {}; const status = innerPayload.status || ""; const pi = innerPayload.paymentInstrument || ""; const pig = innerPayload.paymentInstrumentGroup || ""; if (!error) { // txn success, status should be "charged" //block:start:check-order-status // call orderStatus once to verify (false positives) //block:end:check-order-status //block:start:display-payment-status this.props.navigation.navigate("Success"); //block:end:display-payment-status } else { const errorCode = data.errorCode || ""; const errorMessage = data.errorMessage || ""; switch (status) { case "backpressed": // user back-pressed from PP without initiating any txn break; case "user_aborted": // user initiated a txn and pressed back // poll order status this.props.navigation.navigate("Failure"); break; case "pending_vbv": case "authorizing": // txn in pending state // poll order status until backend says fail or success break; case "authorization_failed": case "authentication_failed": case "api_failure": // txn failed // poll orderStatus to verify (false negatives) //block:start:display-payment-status this.props.navigation.navigate("Failure"); //block:end:display-payment-status break; case "new": // order created but txn failed // very rare for V2 (signature based) // also failure // poll order status this.props.navigation.navigate("Failure"); break; default: // unknown status, this is also failure // poll order status this.props.navigation.navigate("Failure"); } // if txn was attempted, pi and pig would be non-empty // can be used to show in UI if you are into that // errorMessage can also be shown in UI } break; //block:end:handle-process-result default: console.log(data); } }); //Handling hardware backpress inside the checkout screen // block:start:handle-hardware-backpress BackHandler.addEventListener("hardwareBackPress", () => { return !HyperSdkReact.isNull() && HyperSdkReact.onBackPressed(); // block:end:handle-hardware-backpress }); } startPayment() { if(HyperSdkReact.isInitialised()){ makePaymentRequest(this.state.total); } } handleBackPress() { this.props.navigation.navigate("Home"); } render() { const { p1Count, p2Count, p1Price, p2Price } = this.props.navigation.state.params; this.state.total = (p1Price * p1Count) + (p2Price * p2Count) + 2; return ( this.props.navigation.navigate("Home")} > Juspay SDK Integration Demo Checkout Screen Call process on HyperServices instance on Checkout Button Click Cart Details Product 1 Product 2 x{p1Count} ₹ {p1Price * p1Count} x{p2Count} ₹ {p2Price * p2Count} Amount Total Amount Tax Total Payable Amount ₹ {(p1Price * p1Count) + (p2Price * p2Count)} ₹ 2 ₹ {(p1Price * p1Count) + (p2Price * p2Count) + 2} ) } ``` ### Checkout.js ``` /* eslint-disable react-native/no-inline-styles */ import React from "react"; import { StyleSheet, TouchableOpacity, Image, View, ImageBackground, } from "react-native"; import HyperSdkReact from "hyper-sdk-react"; import axios from "axios"; import { encode } from "base-64"; import { withNavigation } from "react-navigation"; import { BackHandler, Button, NativeEventEmitter, NativeModules, ScrollView, Text, navigation, } from "react-native"; import { createStackNavigator } from "react-navigation"; class Checkout extends React.Component { constructor(props) { super(props); this.state = { processPayload: {}, total: 1 }; } componentDidMount() { const eventEmitter = new NativeEventEmitter(NativeModules.HyperSdkReact); eventEmitter.addListener("HyperEvent", (resp) => { const data = JSON.parse(resp); const event = data.event || ""; switch (event) { case "initiate_result": // this was already handled in homescreen where initiate was called break; case "hide_loader": // stop the processing loader break; //block:start:handle-process-result case "process_result": const error = data.error || false; const innerPayload = data.payload || {}; const status = innerPayload.status || ""; const pi = innerPayload.paymentInstrument || ""; const pig = innerPayload.paymentInstrumentGroup || ""; if (!error) { // txn success, status should be "charged" //block:start:check-order-status // call orderStatus once to verify (false positives) //block:end:check-order-status //block:start:display-payment-status this.props.navigation.navigate("Success"); //block:end:display-payment-status } else { const errorCode = data.errorCode || ""; const errorMessage = data.errorMessage || ""; switch (status) { case "backpressed": // user back-pressed from PP without initiating any txn break; case "user_aborted": // user initiated a txn and pressed back // poll order status this.props.navigation.navigate("Failure"); break; case "pending_vbv": case "authorizing": // txn in pending state // poll order status until backend says fail or success break; case "authorization_failed": case "authentication_failed": case "api_failure": // txn failed // poll orderStatus to verify (false negatives) //block:start:display-payment-status this.props.navigation.navigate("Failure"); //block:end:display-payment-status break; case "new": // order created but txn failed // very rare for V2 (signature based) // also failure // poll order status this.props.navigation.navigate("Failure"); break; default: // unknown status, this is also failure // poll order status this.props.navigation.navigate("Failure"); } // if txn was attempted, pi and pig would be non-empty // can be used to show in UI if you are into that // errorMessage can also be shown in UI } break; //block:end:handle-process-result default: console.log(data); } }); //Handling hardware backpress inside the checkout screen // block:start:handle-hardware-backpress BackHandler.addEventListener("hardwareBackPress", () => { return !HyperSdkReact.isNull() && HyperSdkReact.onBackPressed(); // block:end:handle-hardware-backpress }); } startPayment() { if(HyperSdkReact.isInitialised()){ makePaymentRequest(this.state.total); } } handleBackPress() { this.props.navigation.navigate("Home"); } render() { const { p1Count, p2Count, p1Price, p2Price } = this.props.navigation.state.params; this.state.total = (p1Price * p1Count) + (p2Price * p2Count) + 2; return ( this.props.navigation.navigate("Home")} > Juspay SDK Integration Demo Checkout Screen Call process on HyperServices instance on Checkout Button Click Cart Details Product 1 Product 2 x{p1Count} ₹ {p1Price * p1Count} x{p2Count} ₹ {p2Price * p2Count} Amount Total Amount Tax Total Payable Amount ₹ {(p1Price * p1Count) + (p2Price * p2Count)} ₹ 2 ₹ {(p1Price * p1Count) + (p2Price * p2Count) + 2}