--- page_source: https://juspay.io/in/docs/payment-page-enterprise/react-native/base-sdk-integration/handle-payment-response page_title: 4. Handle Payment Response --- # 4. Handle Payment Response Payments SDK Native Module will be emitting all the relevant events to JS via `RCTDeviceEventEmitter` and JavaScript modules can then register to receive events by invoking addListener on the NativeEventEmitter class in the `componentDidMount()` method with the event name `'HyperEvent'`. The listener will return a stringified JSON response (resp) ### Step 4.1. Handle Payment Events from SDK All payment responses are sent by the SDK in the HyperPaymentCallbackHandler under the `process_result` event. Implement the highlighted code snippet in your app for proper handling of all events and status #### Code Snippets: - #### Functional Code Snippet: ```functional 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 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 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 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 navigation.navigate('Failure'); break; default: // unknown status, this is also failure // poll order status 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; ``` #### Class Code Snippet: ```class 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; ``` ### Step 4.2. Check Payment Status After receiving `process_result` from SDK, it is mandatory to do a Server-to-Server Order Status API call to determine the final payment status. Please ensure that you verify the order ID and amount transaction. To understand how to handle payment status, [refer to this section.](/hyper-checkout/android/resources/transaction-status) ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/hyper-checkout/payment_status_handling.png) #### Code Snippets: - #### Functional Code Snippet: ```functional // call orderStatus once to verify (false positives) ``` #### Class Code Snippet: ```class // call orderStatus once to verify (false positives) ``` ### Step 4.3. Consume Webhoks After the completion of every payment/refund, Juspay will provide direct notification to your server regarding the event. These are called Webhooks. You must configure a valid HTTPS endpoint that is reachable from our servers to consume these notifications. Our servers will push data using HTTP POST calls to your endpoint. [Click for Detailed Webhook Specifications](https://docs.juspay.in/resources/docs/common-resources/webhooks) ### Step 4.4. Display Payment Status Once the payment status is determined via the API, the final status should be displayed to the user. This screen needs to be handled by the merchant, it is not provided by the SDK #### Code Snippets: - #### Functional Code Snippet: ```functional navigation.navigate('Success'); ``` #### Class Code Snippet: ```class this.props.navigation.navigate("Success"); ```