---
page_source: https://docs.hdfcbank.juspay.in/docs/hypercheckout-mobile-sdk/flutter/how-to-integrate-sdks/opening-payment-page
page_title: Opening Payment Page
---


# Opening Payment Page




### Step 1 Copy startPayment( ) function to your activity


This function has end-to-end code for opening the payment page on your frontend.

In the next steps, lets look at the changes required to run it in your setup and also understand the things happening inside this function.



#### Code Snippets: -

#### Flutter Code Snippet:

```flutter
void startPayment(amount) async {
    processCalled = true;
    var headers = {
      'Content-Type': 'application/json',
    };

    var requestBody = {
      // block:start:updateOrderID
      "order_id": "test" + (new Random().nextInt(900000) + 100000).toString(),
      "amount": amount
      // block:end:updateOrderID
    };

    // block:start:await-http-post-function
    // 10.0.2.2 Works only on emulator
    var response = await http.post(
        Uri.parse('http://10.0.2.2:5000/initiateJuspayPayment'),
        headers: headers,
        body: jsonEncode(requestBody));
    // block:end:await-http-post-function

    if (response.statusCode == 200) {
      Map<String, dynamic> jsonResponse = jsonDecode(response.body);

      // block:start:openPaymentPage
      widget.hyperSDK
          .openPaymentPage(jsonResponse['sdkPayload'], hyperSDKCallbackHandler);
      // block:end:openPaymentPage
      
    } else {
      throw Exception(
          'API call failed with status code ${response.statusCode}');
    }
    ;
  }
```



### Step 2 Update Your Backend URL


Inside ‘`http.post`’ function call, replace [http://10.0.2.2:5000](http://10.0.2.2:5000/) with the URL of your backend.

This function will hit the `/initiateJuspayPayment` API endpoint in your backend, create an order and will give SDK Payload in response.



#### Code Snippets: -

#### Flutter Code Snippet:

```flutter
// 10.0.2.2 Works only on emulator
    var response = await http.post(
        Uri.parse('http://10.0.2.2:5000/initiateJuspayPayment'),
        headers: headers,
        body: jsonEncode(requestBody));
```



### Step 3 Copy Response Handler to your activity


Copy `hyperSDKCallbackHandler()` function in your project file to handle events emitted by SDK to communicate about the transaction status. On payment completion, this function transfers flow to ‘`payment_page.dart`’ file where we display the payment status.



#### Code Snippets: -

#### Flutter Code Snippet:

```flutter
void hyperSDKCallbackHandler(MethodCall methodCall) {
    switch (methodCall.method) {
      case "hide_loader":
        setState(() {
          showLoader = false;
        });
        break;
      case "process_result":
        var args = {};

        try {
          args = json.decode(methodCall.arguments);
        } catch (e) {
          print(e);
        }
        var innerPayload = args["payload"] ?? {};
        var status = innerPayload["status"] ?? " ";
        var orderId = args['orderId'];

        switch (status) {
          case "backpressed":
          case "user_aborted":
            {
              Navigator.pop(context);
            }
            break;
          default:
            Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => ResponseScreen(),
                    settings: RouteSettings(arguments: orderId)));
        }
    }
  }
```



### Step 4 openPaymentPage( ) function call


openPaymentPage( ) function is responsible for opening the payment page



#### Code Snippets: -

#### Flutter Code Snippet:

```flutter
widget.hyperSDK
          .openPaymentPage(jsonResponse['sdkPayload'], hyperSDKCallbackHandler);
```