---
page_title: 4. Handle Payment Response
product: Hypercheckout
platform: React Native
page_source: https://juspay.io/in/docs/hyper-checkout/react-native/base-sdk-integration/handle-payment-response
llms_txt: https://juspay.io/in/docs/llms.txt
product_llms_txt: https://juspay.io/in/docs/hyper-checkout/llms.txt
---


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

### Mermaid code for the above image

```mermaid
flowchart TD
    1[1. Transaction completed on bank page]

    1 -->|On App/I-Frame Web| 2_1[2.1 SDK gives callback in process_result]
    1 -->|On Web| 2_2[2.2 User is redirected to RETURN_URL]

    2_1 --> 4
    2_2 --> 4
    2_1 -.->|Asynchronously| 3[3. Asynchronously listen for webhooks]
    2_2 -.->|Asynchronously| 3

    4[4. Call Order Status S2S API]

    4 -->|Status = CHARGED| 5[5. Show Success Screen & Fulfill order]
    4 -->|Status = AUTHORIZATION_FAILED / AUTHENTICATION_FAILED| 6[6. Show Failure Screen & decline the order]
    4 -->|Status = PENDING_VBV / AUTHORIZING| OFW{Order Fulfillment Window Over?}

    OFW -->|No| 7[7. Show Pending Screen]
    7 -->|After 10 Seconds| 4

    OFW -->|Yes| 8[8. Show Failure Screen & decline the order]

    8 -.-> SWR{Success Webhook Received post fulfillment window?}

    SWR -.-> 9[9. Do Manual Refund from Juspay Dashboard]
    SWR -.-> 10[10. Do Refund via Refund API]
    SWR -.-> 11[11. Handle Refund via Auto-Refund Feature]

    style 5 fill:#00897B,color:#fff
    style 6 fill:#E91E63,color:#fff
    style 7 fill:#FFC107,color:#000
    style 8 fill:#E91E63,color:#fff
```





#### 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. 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");
```


---

## Complete Code Reference

The following code files are referenced in the steps above:

### Checkout.js

```
import React, {useEffect, useState} from 'react'
import HyperSdkReact from 'hyper-sdk-react';
import { BackHandler, Button, NativeEventEmitter, NativeModules, ScrollView, Text } from 'react-native';

export default function Checkout({navigation}) {
    const [processPayload, setProcessPayload] = useState({});
    
    //Setting event listener to check for process result
    // block:start:event-handling-process
    
    useEffect(() => {
        const eventEmitter = new NativeEventEmitter(NativeModules.HyperSdkReact);
        const eventListener = 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

                        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;
                
                //block:end:handle-process-result
                default:
                    console.log(data);
            }
        });
        return () => {
            eventListener.remove();
        }
    }, [])

    // block:end:event-handling-process

    // block:start:fetch-process-payload

    //Get process payload from server after session API S2S call
    useEffect(() => {
        setProcessPayload({
            "requestId":"dbba45aaf8dc408da474b7943b9e1d9f",
            "service":"in.juspay.hyperpay",
            "payload":{
               "clientId":"<CLIENT_ID>",
               "amount":"10.0",
               "merchantId":"acmecorp",
               "clientAuthToken":"tkn_adbf808e1d2b4d95b41144d0960b5a7e",
               "clientAuthTokenExpiry":"2022-01-24T17:40:22Z",
               "environment":"production",
               "action":"paymentPage",
               "customerId":"dummyCustId",
               "currency":"INR",
               "customerPhone":"9876543210",
               "customerEmail":"dummyemail@gmail.com",
               "orderId":"yourUniqueOrderId"
            }
        });
    }, [])
    
    // block:end:fetch-process-payload

    //Handling hardware backpress inside the checkout screen
    // block:start:handle-hardware-backpress
    
    useEffect(() => {
        BackHandler.addEventListener('hardwareBackPress', () => {
            return !HyperSdkReact.isNull() && HyperSdkReact.onBackPressed();
        });
        return () => {
            BackHandler.removeEventListener('hardwareBackPress', () => null);
        }
    }, [])
    
    // block:end:handle-hardware-backpress

    //Android Permissions Handling
    // block:start:handle-onRequestPermissionsResult
    
    @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);
      }
    }
    
    // block:end:handle-onRequestPermissionsResult

    // block:start:process-sdk

    const startPayment = () => {
        HyperSdkReact.process(JSON.stringify(processPayload))
    }
    
    // block:end:process-sdk

    return (
        <ScrollView
            contentInsetAdjustmentBehavior="automatic"
            contentContainerStyle={{alignItems: 'center', justifyContent: 'space-around', height: "100%"}}
        >
            <Text>Initialized automatically on this screen</Text>
            <Button onPress={()=>startPayment()} title="Process"></Button>
        </ScrollView>
    )
}

```

### 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 (
      <View style={styles.CheckoutActivity}>
        <View style={styles.Group669}>
          <View style={styles.Group729}>
            <TouchableOpacity
              onPress={() => this.props.navigation.navigate("Home")}
            >
              <Image
                style={styles.ChevronSvgrepoCom1}
                source={{
                  uri: "https://firebasestorage.googleapis.com/v0/b/unify-v3-copy.appspot.com/o/okpeu14cdpp-23%3A45?alt=media&token=7372fc0c-5bf0-4aaa-8b73-4f2f0a01f204",
                }}
              />
            </TouchableOpacity>
            <View style={styles.Group331}>
              <Text style={styles.JuspaySdkIntegration}>
                Juspay SDK Integration Demo
              </Text>
              <Text style={styles.CheckoutScreen}>Checkout Screen</Text>
            </View>
          </View>
          <View style={styles.Group492}>
            <Text style={styles.CallProcessOnHyperse}>
              Call process on HyperServices instance on Checkout Button Click
            </Text>
          </View>
          <View style={styles.Container}>
            <Text style={styles.CartDetails}>Cart Details</Text>
            <View style={styles.Group879}>
              <View style={styles.Group924}>
                <Text style={styles.Product1}>Product 1</Text>
                <Text style={styles.Product2}>Product 2</Text>
              </View>
              <View style={styles.Group6109}>
                <View style={styles.Group968}>
                  <Text style={styles.X1}>x{p1Count}</Text>
                  <Text style={styles._1}>₹ {p1Price * p1Count}</Text>
                </View>
                <View style={styles.Group872}>
                  <Text style={styles.X11}>x{p2Count}</Text>
                  <Text style={styles._11}>₹ {p2Price * p2Count}</Text>
                </View>
              </View>
            </View>
            <Text style={styles.Amount}>Amount</Text>
            <View style={styles.Group466}>
              <View style={styles.Group412}>
                <Text style={styles.TotalAmount}>Total Amount</Text>
                <Text style={styles.Tax}>Tax</Text>
                <Text style={styles.TotalPayableAmount}>
                  Total Payable Amount
                </Text>
              </View>
              <View style={styles.Group828}>
                <Text style={styles._2}>₹ {(p1Price * p1Count) + (p2Price * p2Count)}</Text>
                <Text style={styles._02}>₹ 2</Text>
                <Text style={styles._22}>₹ {(p1Price * p1Count) + (p2Price * p2Count) + 2}</Text>
              </View>
            </View>
            <View style={styles.Checkout}>
              <Button
                onPress={() => this.startPayment()}
                title="Checkout"
                style={styles.Group883}
              />
            </View>
          </View>
        </View>
        <Image
          style={styles.Vector1}
          source={{
            uri: "https://firebasestorage.googleapis.com/v0/b/unify-v3-copy.appspot.com/o/l77bpu3z5t-23%3A126?alt=media&token=288ee118-fdf8-46d4-b853-8a5e1d3986a4",
          }}
        />
      </View>
    );
  }
}

const getRandomNumber = () => {
  return Math.floor(Math.random() * 90000000) + 10000000
};

// block:start:fetch-process-payload
// Note: Session API should only be called from merchant's server. Don't call it from client app
// -----------------------------------------------------------------
const makePaymentRequest = (total) => {
  var myHeaders = new Headers();

  // API Key Should never be used from client side, it should always be stored securely on server.
  // And all the API calls requiring API key should always be done from server
  myHeaders.append(
    "Authorization",
    `Basic ${encode("<YOUR_API_KEY>")}`
  );
  myHeaders.append("x-merchantid", "<MERCHANT_ID>");
  myHeaders.append("Content-Type", "application/json");

  var raw = JSON.stringify({
    order_id: `test-${getRandomNumber()}`,
    amount: total,
    customer_id: "9876543201",
    customer_email: "test@mail.com",
    customer_phone: "9876543201",
    payment_page_client_id: "<CLIENT_ID>",
    action: "paymentPage",
    return_url: "<return_url>",
    description: "Complete your payment",
    first_name: "John",
    last_name: "wick"
  });

  var requestOptions = {
    method: "POST",
    headers: myHeaders,
    body: raw,
    redirect: "follow",
  };

  fetch("https://api.juspay.in/session", requestOptions)
    .then((response) => response.json())
    .then((result) => {
      // block:start:process-sdk
      HyperSdkReact.process(JSON.stringify(result.sdk_payload));
      // block:end:process-sdk
    })
    .catch((error) => console.log("error", error));
};
// block:end:fetch-process-payload

export default createStackNavigator(
  {
    Checkout: {
      screen: Checkout,
    },
  },
  {
    headerMode: "none",
    navigationOptions: {
      header: null,
    },
  }
);

const styles = StyleSheet.create({
  Container: {
    paddingLeft: 10,
    paddingRight: 10,
  },
  CheckoutActivity: {
    position: "relative",
    display: "flex",
    flexDirection: "column",
    justifyContent: "flex-start",
    alignItems: "flex-start",
    width: "100%",
    height: "100%",
    boxSizing: "border-box",
    backgroundColor: "rgba(254,254,254,1)",
  },
  Group669: {
    position: "absolute",
    display: "flex",
    flexDirection: "column",
    width: "100%",
    boxSizing: "border-box",
  },
  Group729: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    width: "100%",
    paddingLeft: 12,
    paddingRight: 152,
    paddingTop: 12,
    paddingBottom: 22,
    boxSizing: "border-box",
    backgroundColor: "rgba(46,43,44,1)",
  },
  ChevronSvgrepoCom1: {
    width: 20,
    height: 20,
  },
  Group331: {
    display: "flex",
    flexDirection: "column",
    height: "100%",
    boxSizing: "border-box",
    paddingTop: 4,
    paddingLeft: 16,
  },
  JuspaySdkIntegration: {
    color: "rgba(255,255,255,1)",
    fontSize: 12,
    lineHeight: 12,
    fontFamily: "Nunito Sans, sans-serif",
    fontWeight: "600",
    paddingBottom: 10,
  },
  CheckoutScreen: {
    color: "rgba(255,255,255,1)",
    fontSize: 16,
    lineHeight: 16,
    fontFamily: "Nunito Sans, sans-serif",
    fontWeight: "600",
  },
  Group492: {
    width: "100%",
    paddingLeft: 12,
    paddingRight: 27,
    paddingTop: 18,
    paddingBottom: 18,
    boxSizing: "border-box",
    backgroundColor: "rgba(248,245,245,1)",
  },
  CallProcessOnHyperse: {
    color: "rgba(0,0,0,1)",
    fontSize: 12,
    lineHeight: 12,
    fontFamily: "Nunito Sans, sans-serif",
    fontWeight: "400",
  },
  CartDetails: {
    color: "rgba(251,141,51,1)",
    fontSize: 18,
    lineHeight: 18,
    fontFamily: "Nunito Sans, sans-serif",
    fontWeight: "700",
    paddingTop: 10,
    paddingBottom: 10,
  },
  Group879: {
    display: "flex",
    flexDirection: "row",
    alignItems: "flex-end",
    justifyContent: "space-between",
    width: "100%",
    paddingLeft: 11,
    paddingRight: 11,
    paddingTop: 15,
    paddingBottom: 26,
    borderWidth: 1,
    borderColor: "rgba(245,245,245,1)",
    borderRadius: 4,
    boxSizing: "border-box",
    backgroundColor: "rgba(254,254,254,1)",
  },
  Group924: {
    display: "flex",
    flexDirection: "column",
    height: "100%",
    boxSizing: "border-box",
  },
  Product1: {
    color: "rgba(0,0,0,1)",
    fontSize: 14,
    lineHeight: 14,
    fontFamily: "Nunito Sans, sans-serif",
    fontWeight: "400",
    paddingBottom: 20,
    paddingTop: 8,
  },
  Product2: {
    color: "rgba(0,0,0,1)",
    fontSize: 14,
    lineHeight: 14,
    fontFamily: "Nunito Sans, sans-serif",
    fontWeight: "400",
  },
  Group6109: {
    display: "flex",
    flexDirection: "column",
    
    alignItems: "flex-end",
    height: "100%",
    boxSizing: "border-box",
  },
  Group968: {
    display: "flex",
    flexDirection: "row",

    alignItems: "flex-end",
    width: "100%",
    boxSizing: "border-box",
  },
  X1: {
    color: "rgba(0,0,0,1)",
    fontSize: 14,
    lineHeight: 14,
    fontFamily: "Nunito Sans, sans-serif",
    fontWeight: "400",
    paddingBottom: 20,
    paddingTop: 8,
  },
  _1: {
    color: "rgba(0,0,0,1)",
    fontSize: 14,
    lineHeight: 14,
    fontFamily: "Nunito Sans, sans-serif",
    fontWeight: "400",
    paddingBottom: 20,
    paddingTop: 8,
    paddingLeft: 30
  },
  Group872: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    width: "100%",
    boxSizing: "border-box",
  },
  X11: {
    color: "rgba(0,0,0,1)",
    fontSize: 14,
    lineHeight: 14,
    fontFamily: "Nunito Sans, sans-serif",
    fontWeight: "400",
  },
  _11: {
    color: "rgba(0,0,0,1)",
    fontSize: 14,
    lineHeight: 14,
    fontFamily: "Nunito Sans, sans-serif",
    fontWeight: "400",
    paddingLeft: 30
  },
  Amount: {
    color: "rgba(251,141,51,1)",
    fontSize: 18,
    lineHeight: 18,
    fontFamily: "Nunito Sans, sans-serif",
    fontWeight: "700",
    paddingTop: 10,
    paddingBottom: 10,
  },
  Group466: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    width: "100%",
    paddingLeft: 11,
    paddingRight: 12,
    paddingTop: 11,
    paddingBottom: 9,
    borderWidth: 1,
    borderColor: "rgba(245,245,245,1)",
    borderRadius: 4,
    boxSizing: "border-box",
    backgroundColor: "rgba(254,254,254,1)",
  },
  Group412: {
    display: "flex",
    flexDirection: "column",
    height: "100%",
    boxSizing: "border-box",
  },
  TotalAmount: {
    color: "rgba(0,0,0,1)",
    fontSize: 14,
    lineHeight: 14,
    fontFamily: "Nunito Sans, sans-serif",
    fontWeight: "400",
    paddingBottom: 20,
    paddingTop: 10,
  },
  Tax: {
    color: "rgba(0,0,0,1)",
    fontSize: 14,
    lineHeight: 14,
    fontFamily: "Nunito Sans, sans-serif",
    fontWeight: "400",
    paddingBottom: 20,
  },
  TotalPayableAmount: {
    color: "rgba(0,0,0,1)",
    fontSize: 14,
    lineHeight: 14,
    fontFamily: "Nunito Sans, sans-serif",
    fontWeight: "400",
    paddingBottom: 10,
  },
  Group828: {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-end",
    height: "100%",
    boxSizing: "border-box",
  },
  _2: {
    color: "rgba(0,0,0,1)",
    fontSize: 14,
    lineHeight: 14,
    fontFamily: "Nunito Sans, sans-serif",
    fontWeight: "400",
    paddingBottom: 20,
    paddingTop: 10,
  },
  _02: {
    color: "rgba(0,0,0,1)",
    fontSize: 14,
    lineHeight: 14,
    fontFamily: "Nunito Sans, sans-serif",
    fontWeight: "400",
    paddingBottom: 20,
  },
  _22: {
    color: "rgba(0,0,0,1)",
    fontSize: 14,
    lineHeight: 14,
    fontFamily: "Nunito Sans, sans-serif",
    fontWeight: "400",
  },
  Group883: {
    width: "100%",
    height: 35,
    paddingLeft: 131,
    paddingRight: 135,
    paddingBottom: 12,
    borderRadius: 4,
    boxSizing: "border-box",
    backgroundColor: "rgba(17,83,144,1)",
    marginTop: 70,
  },
  Checkout: {
    paddingTop:40
  },
  Vector1: {
    position: "absolute",
    top: 227,
    left: 13,
    width: 329,
  },
});

```


---

## See Also

- [3. Open Hypercheckout Screen](https://juspay.io/in/docs/hyper-checkout/react-native/base-sdk-integration/open-hypercheckout-screen)
- [5. Life Cycle Events](https://juspay.io/in/docs/hyper-checkout/react-native/base-sdk-integration/life-cycle-events)