--- page_title: 3. Open Hypercheckout Screen product: Hypercheckout platform: Android page_source: https://juspay.io/in/docs/hyper-checkout/android/base-sdk-integration/open-hypercheckout-screen llms_txt: https://juspay.io/in/docs/llms.txt product_llms_txt: https://juspay.io/in/docs/hyper-checkout/llms.txt --- # 3. Open Hypercheckout Screen Once the Hypercheckout screen is opened, your users can proceed with the transactions. Opening Hypercheckout requires a Server-to-Server request from Merchant to Juspay. The response of this should be forwarded to the Hypercheckout SDK in order to open the payment screen. > **Warning** > **This step should be done only once the final payable amount is available** ### Step 3.1. Fetch Process Payload The `process` function takes a JSONObject as argument. This argument is also known as process payload. In order to fetch process payload following steps should be followed: Make a request from Client to your Server with necessary order parameters Your server should call [Juspay's Session API](/hyper-checkout/android/base-sdk-integration/session)(Server-to-Server call) Session API will respond with a JSON object which contains process payload inside `sdk_payload` key Send the `sdk_payload` from your server to client #### Code Snippets: - #### Java Code Snippet: ```java // Note: Session API should only be called from merchant's server. Don't call it from client app // ----------------------------------------------------------------- private void run() throws IOException { JSONObject payload = new JSONObject(); // 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 String apiKey = ""; //Put your API Key Here String clientId = ""; // Put your clientID here String merchantId = ""; // Put your merchant ID here long randomOrderId = (long) (Math.random()*Math.pow(10,12)); String order_id = "test-" + Long.toString(randomOrderId); // Put you own order id here try{ // You can put your payload details here payload.put("order_id", order_id); // OrderID should be unique payload.put("amount", amountString); // Amount should be in strings e.g. "100.00" payload.put("customer_id", "9876543201"); // Customer ID should be unique for each user and should be a string payload.put("customer_email", "test@mail.com"); payload.put("customer_phone", "9876543201"); payload.put("payment_page_client_id", clientId); payload.put("action", "paymentPage"); payload.put("first_name", "john"); payload.put("last_name", "wick"); payload.put("description", "Order Description"); // For other payload params you can refer to the integration doc shared with you } catch (Exception e){ } OkHttpClient client = new OkHttpClient(); MediaType mediaType = MediaType.parse("application/json"); RequestBody requestBody = RequestBody.create(mediaType, payload.toString()); String authorization = "Basic " + Base64.getEncoder().encodeToString(apiKey.getBytes()); Request request = new Request.Builder() .url("https://api.juspay.in/session") .method("POST", requestBody) .addHeader("x-merchantid", merchantId) .addHeader("Authorization", authorization) .addHeader("Content-Type", "application/json") .build(); // Note: Session API should only be called from merchant's server. Don't call it from client app client.newCall(request).enqueue(new Callback() { @Override public void onFailure(Call call, IOException e) { call.cancel(); } @Override public void onResponse(Call call, Response response) throws IOException { try{ String processResponse = response.body().string(); JSONObject jsonObj = new JSONObject(processResponse); JSONObject sdkPayload = jsonObj.getJSONObject("sdk_payload"); CheckoutActivity.this.runOnUiThread(new Runnable() { @Override public void run() { startPayments(sdkPayload); } }); } catch (Exception e){ } } }); } // ----------------------------------------------------------------- ``` #### Kotlin Code Snippet: ```kotlin // Note: Session API should only be called from merchant's server. Don't call it from client app // ----------------------------------------------------------------- @Throws(IOException::class) fun run() { val payload = JSONObject() // 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 val apiKey = "" //Put your API Key Here val clientId = "" //Put your Client ID here val merchantId = "" // Put your Merchant ID here val randomOrderId = (Math.random() * Math.pow(10.0, 12.0)).toLong() val order_id = "test-" + java.lang.Long.toString(randomOrderId) try { payload.put("order_id", order_id) payload.put("amount", amountString) // Amount must be in string payload.put("customer_id", "9876543201") //Customer id should be in string payload.put("customer_email", "test@mail.com") payload.put("customer_phone", "9876543201") //Mobile number should be in string payload.put("payment_page_client_id", clientId) payload.put("action", "paymentPage") payload.put("offer_code", "testingCode") payload.put("first_name", "john") payload.put("last_name", "wick") payload.put("description", "Order Description") } catch (e: Exception) { } val client = OkHttpClient() val mediaType: MediaType? = "application/json".toMediaTypeOrNull() val requestBody: RequestBody = RequestBody.create(mediaType, payload.toString()) val authorization = "Basic " + Base64.getEncoder().encodeToString(apiKey.toByteArray()) val request: Request = Request.Builder() .url("https://api.juspay.in/session") .method("POST", requestBody) .addHeader("x-merchantid", merchantId) .addHeader("Authorization", authorization) .addHeader("Content-Type", "application/json") .build() // NOTE: DON'T COPY THIS CODE IN YOUR CLIENT APP // Juspay API should be called from your server, client app should only fetch the sdk_payload from your server client.newCall(request).enqueue(object : Callback { override fun onFailure(call: Call, e: IOException) { call.cancel() } @Throws(IOException::class) override fun onResponse(call: Call, response: Response) { try { val processResponse: String = response.body?.string() ?: "" val jsonObj = JSONObject(processResponse) val sdkPayload = jsonObj.getJSONObject("sdk_payload") runOnUiThread { startPayments(sdkPayload) } } catch (e: Exception) { } } }) } // ----------------------------------------------------------------- ``` ### Step 3.3. Call Process Function Pass the JSON inside `sdk_payload` obtained in `Step 3.1`, to `process`SDK``function`.` The process function is to be called using an instance of `HyperServiceHolder` #### Code Snippets: - #### Java Code Snippet: ```java private void startPayments(JSONObject sdk_payload) { // Make sure to use the same hyperServices instance which was created in // ProductsActivity.java Helper helper = new Helper(); helper.showSnackbar("Process Called!", coordinatorLayout); hyperServicesHolder.process(sdk_payload); } ``` #### Kotlin Code Snippet: ```kotlin fun startPayments(sdk_payload: JSONObject?) { // Make sure to use the same hyperServices instance which was created in // ProductsActivity.java showSnackbar("Process Called!") hyperServicesHolder?.process(sdk_payload) } ``` > **Warning** > As soon as you sign up with Juspay, we set you up with a Dummy PG automatically. Using this Dummy PG, you can run test transactions with a pre-configured set of cards. You may also configure the test credentials of the gateway and use the respective test cards for completing the transaction journey. Please refer to the [Test Resources](/hyper-checkout/android/resources/test-resources)page for more details. --- ## Complete Code Reference The following code files are referenced in the steps above: ### CheckoutActivity.java ``` package in.juspay.devtools; import androidx.appcompat.app.AppCompatActivity; import androidx.coordinatorlayout.widget.CoordinatorLayout; import android.app.ProgressDialog; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.ImageView; import android.widget.TextView; import org.json.JSONObject; import okhttp3.*; import java.io.IOException; import java.util.Base64; import in.juspay.hyperinteg.HyperServiceHolder; public class CheckoutActivity extends AppCompatActivity { private Button processButton; private HyperServiceHolder hyperServicesHolder; private CoordinatorLayout coordinatorLayout; static ProgressDialog dialog; private String amountString; private int item1Price, item2Price, item1Count, item2Count; private TextView item1PriceTv, item2PriceTv, item1CountTv, item2CountTv, totalAmountTv, taxTv, totalPayableTv; private double taxPercent = 0.18; private ImageView backImage; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_checkout); } @Override protected void onStart() { super.onStart(); updatingUI(); hyperServicesHolder = new HyperServiceHolder(this); processButton = findViewById(R.id.rectangle_9); processButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { dialog.show(); try{ run(); } catch (Exception e){ } } }); backImage = findViewById(R.id.imageView); backImage.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { onBackPressed(); } }); } //block:start:process-sdk private void startPayments(JSONObject sdk_payload) { // Make sure to use the same hyperServices instance which was created in // ProductsActivity.java Helper helper = new Helper(); helper.showSnackbar("Process Called!", coordinatorLayout); hyperServicesHolder.process(sdk_payload); } //block:end:process-sdk // block:start:fetch-process-payload // Note: Session API should only be called from merchant's server. Don't call it from client app // ----------------------------------------------------------------- private void run() throws IOException { JSONObject payload = new JSONObject(); // 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 String apiKey = ""; //Put your API Key Here String clientId = ""; // Put your clientID here String merchantId = ""; // Put your merchant ID here long randomOrderId = (long) (Math.random()*Math.pow(10,12)); String order_id = "test-" + Long.toString(randomOrderId); // Put you own order id here try{ // You can put your payload details here payload.put("order_id", order_id); // OrderID should be unique payload.put("amount", amountString); // Amount should be in strings e.g. "100.00" payload.put("customer_id", "9876543201"); // Customer ID should be unique for each user and should be a string payload.put("customer_email", "test@mail.com"); payload.put("customer_phone", "9876543201"); payload.put("payment_page_client_id", clientId); payload.put("action", "paymentPage"); payload.put("first_name", "john"); payload.put("last_name", "wick"); payload.put("description", "Order Description"); // For other payload params you can refer to the integration doc shared with you } catch (Exception e){ } OkHttpClient client = new OkHttpClient(); MediaType mediaType = MediaType.parse("application/json"); RequestBody requestBody = RequestBody.create(mediaType, payload.toString()); String authorization = "Basic " + Base64.getEncoder().encodeToString(apiKey.getBytes()); Request request = new Request.Builder() .url("https://api.juspay.in/session") .method("POST", requestBody) .addHeader("x-merchantid", merchantId) .addHeader("Authorization", authorization) .addHeader("Content-Type", "application/json") .build(); // Note: Session API should only be called from merchant's server. Don't call it from client app client.newCall(request).enqueue(new Callback() { @Override public void onFailure(Call call, IOException e) { call.cancel(); } @Override public void onResponse(Call call, Response response) throws IOException { try{ String processResponse = response.body().string(); JSONObject jsonObj = new JSONObject(processResponse); JSONObject sdkPayload = jsonObj.getJSONObject("sdk_payload"); CheckoutActivity.this.runOnUiThread(new Runnable() { @Override public void run() { startPayments(sdkPayload); } }); } catch (Exception e){ } } }); } // ----------------------------------------------------------------- // block:end:fetch-process-payload //block:start:onBackPressed @Override public void onBackPressed() { boolean handleBackpress = hyperServicesHolder.onBackPressed(); if(!handleBackpress) { super.onBackPressed(); } } //block:end:onBackPressed private void updatingUI(){ coordinatorLayout = findViewById(R.id.coordinatorLayout); dialog = new ProgressDialog(CheckoutActivity.this); dialog.setMessage("Processing..."); Intent i = getIntent(); item1Count = i.getIntExtra("item1Count", 1); item2Count = i.getIntExtra("item2Count", 1); item1Price = i.getIntExtra("item1Price", 1); item2Price = i.getIntExtra("item2Price", 1); item1PriceTv = findViewById(R.id.some_id1); item2PriceTv = findViewById(R.id.some_id2); item1CountTv = findViewById(R.id.x2); item2CountTv = findViewById(R.id.x3); item1CountTv.setText("x"+Integer.toString(item1Count)); item2CountTv.setText("x"+Integer.toString(item2Count)); int item1Amount = item1Price*item1Count; int item2Amount = item2Price*item2Count; item1PriceTv.setText("₹ "+Integer.toString(item1Amount)); item2PriceTv.setText("₹ "+Integer.toString(item2Amount)); totalAmountTv = findViewById(R.id.some_id); taxTv = findViewById(R.id.some_id3); totalPayableTv = findViewById(R.id.some_id5); int totalAmount = item1Amount + item2Amount; double tax = totalAmount * taxPercent; double totalPayable = totalAmount + tax; Helper helper = new Helper(); amountString = Double.toString(helper.round(totalPayable, 2)); String taxString = Double.toString(helper.round(tax, 2)); totalAmountTv.setText("₹ "+Integer.toString(totalAmount)); taxTv.setText("₹ "+taxString); totalPayableTv.setText("₹ "+amountString); } /* Optional Block These functions are only supposed to be implemented in case if you are overriding onActivityResult or onRequestPermissionsResult Life cycle hooks - onActivityResult - Handling onActivityResult hook and passing data to HyperServices Instance, to handle App Switch @Override public void onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) { // block:start:onActivityResult // If super.onActivityResult is available use following: // super.onActivityResult(requestCode, resultCode, data); // In case super.onActivityResult is NOT available please use following: // if (data != null) { // hyperServices.onActivityResult(requestCode, resultCode, data); // } // block:end:onActivityResult // Rest of your code. } - onRequestPermissionsResult - Handling onRequestPermissionsResult hook and passing data to HyperServices Instance, to OTP reading permissions @Override public void onRequestPermissionsResult(requestCode: Int, permissions: Array, grantResults: IntArray) { // block:start:onRequestPermissionsResult // If super.onRequestPermissionsResult is available use following: // super.onRequestPermissionsResult(requestCode, permissions, grantResults); // In case super.onActivityResult is NOT available please use following: // hyperServices.onRequestPermissionsResult(requestCode, permissions, grantResults); // block:end:onRequestPermissionsResult } */ } ``` ### CheckoutActivity.kt ``` package `in`.juspay.devtools import `in`.juspay.hypersdk.data.JuspayResponseHandler import `in`.juspay.hypersdk.ui.HyperPaymentsCallbackAdapter import android.app.ProgressDialog import android.content.Intent import android.os.Bundle import android.view.View import android.webkit.WebView import android.widget.Button import android.widget.ImageView import android.widget.TextView import androidx.appcompat.app.AppCompatActivity import androidx.coordinatorlayout.widget.CoordinatorLayout import com.google.android.material.snackbar.Snackbar import `in`.juspay.hyperinteg.HyperServiceHolder import okhttp3.* import okhttp3.MediaType.Companion.toMediaTypeOrNull import org.json.JSONObject import java.io.IOException import java.util.* class CheckoutActivity : AppCompatActivity() { var processButton: Button? = null var hyperServicesHolder: HyperServiceHolder? = null var coordinatorLayout: CoordinatorLayout? = null var amountString: String? = null var item1Price = 0 var item2Price = 0 var item1Count = 0 var item2Count = 0 var item1PriceTv: TextView? = null var item2PriceTv: TextView? = null var item1CountTv: TextView? = null var item2CountTv: TextView? = null var totalAmountTv: TextView? = null var taxTv: TextView? = null var totalPayableTv: TextView? = null var taxPercent = 0.18 var backImage: ImageView? = null override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_checkout) } override fun onStart() { super.onStart() updatingUI() hyperServicesHolder = HyperServiceHolder(this) processButton = findViewById(R.id.rectangle_9) processButton?.setOnClickListener(View.OnClickListener { dialog!!.show() try { run() } catch (e: Exception) { } }) backImage = findViewById(R.id.imageView) backImage?.setOnClickListener(View.OnClickListener { onBackPressed() }) } // Calling process on hyperService to open the Hypercheckout screen // block:start:process-sdk fun startPayments(sdk_payload: JSONObject?) { // Make sure to use the same hyperServices instance which was created in // ProductsActivity.java showSnackbar("Process Called!") hyperServicesHolder?.process(sdk_payload) } // block:end:process-sdk //block:start:fetch-process-payload // Note: Session API should only be called from merchant's server. Don't call it from client app // ----------------------------------------------------------------- @Throws(IOException::class) fun run() { val payload = JSONObject() // 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 val apiKey = "" //Put your API Key Here val clientId = "" //Put your Client ID here val merchantId = "" // Put your Merchant ID here val randomOrderId = (Math.random() * Math.pow(10.0, 12.0)).toLong() val order_id = "test-" + java.lang.Long.toString(randomOrderId) try { payload.put("order_id", order_id) payload.put("amount", amountString) // Amount must be in string payload.put("customer_id", "9876543201") //Customer id should be in string payload.put("customer_email", "test@mail.com") payload.put("customer_phone", "9876543201") //Mobile number should be in string payload.put("payment_page_client_id", clientId) payload.put("action", "paymentPage") payload.put("offer_code", "testingCode") payload.put("first_name", "john") payload.put("last_name", "wick") payload.put("description", "Order Description") } catch (e: Exception) { } val client = OkHttpClient() val mediaType: MediaType? = "application/json".toMediaTypeOrNull() val requestBody: RequestBody = RequestBody.create(mediaType, payload.toString()) val authorization = "Basic " + Base64.getEncoder().encodeToString(apiKey.toByteArray()) val request: Request = Request.Builder() .url("https://api.juspay.in/session") .method("POST", requestBody) .addHeader("x-merchantid", merchantId) .addHeader("Authorization", authorization) .addHeader("Content-Type", "application/json") .build() // NOTE: DON'T COPY THIS CODE IN YOUR CLIENT APP // Juspay API should be called from your server, client app should only fetch the sdk_payload from your server client.newCall(request).enqueue(object : Callback { override fun onFailure(call: Call, e: IOException) { call.cancel() } @Throws(IOException::class) override fun onResponse(call: Call, response: Response) { try { val processResponse: String = response.body?.string() ?: "" val jsonObj = JSONObject(processResponse) val sdkPayload = jsonObj.getJSONObject("sdk_payload") runOnUiThread { startPayments(sdkPayload) } } catch (e: Exception) { } } }) } // ----------------------------------------------------------------- //block:end:fetch-process-payload fun showSnackbar(message: String?) { coordinatorLayout = findViewById(R.id.coordinatorLayout) val snackbar = Snackbar.make(coordinatorLayout!!, message!!, Snackbar.LENGTH_LONG) snackbar.show() } //block:start:onBackPressed override fun onBackPressed() { val handleBackpress: Boolean = hyperServicesHolder?.onBackPressed() == true if (handleBackpress) { super.onBackPressed() } } //block:end:onBackPressed /* Optional Block These functions are only supposed to be implemented in case if you are overriding onActivityResult or onRequestPermissionsResult Life cycle hooks - onActivityResult - Handling onActivityResult hook and passing data to HyperServices Instance, to handle App Switch @Override public void onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) { // block:start:onActivityResult // If super.onActivityResult is available use following: // super.onActivityResult(requestCode, resultCode, data); // In case super.onActivityResult is NOT available please use following: // if (data != null) { // hyperServices.onActivityResult(requestCode, resultCode, data); // } // block:end:onActivityResult // Rest of your code. } - onRequestPermissionsResult - Handling onRequestPermissionsResult hook and passing data to HyperServices Instance, to OTP reading permissions @Override public void onRequestPermissionsResult(requestCode: Int, permissions: Array, grantResults: IntArray) { // block:start:onRequestPermissionsResult // If super.onRequestPermissionsResult is available use following: // super.onRequestPermissionsResult(requestCode, permissions, grantResults); // In case super.onActivityResult is NOT available please use following: // hyperServices.onRequestPermissionsResult(requestCode, permissions, grantResults); // block:end:onRequestPermissionsResult } */ fun updatingUI() { dialog = ProgressDialog(this@CheckoutActivity) dialog!!.setMessage("Processing...") val i = intent item1Count = i.getIntExtra("item1Count", 1) item2Count = i.getIntExtra("item2Count", 1) item1Price = i.getIntExtra("item1Price", 1) item2Price = i.getIntExtra("item2Price", 1) item1PriceTv = findViewById(R.id.some_id1) item2PriceTv = findViewById(R.id.some_id2) item1CountTv = findViewById(R.id.x2) item2CountTv = findViewById(R.id.x3) item1CountTv?.setText("x" + Integer.toString(item1Count)) item2CountTv?.setText("x" + Integer.toString(item2Count)) val item1Amount = item1Price * item1Count val item2Amount = item2Price * item2Count item1PriceTv?.setText("₹ " + Integer.toString(item1Amount)) item2PriceTv?.setText("₹ " + Integer.toString(item2Amount)) totalAmountTv = findViewById(R.id.some_id) taxTv = findViewById(R.id.some_id3) totalPayableTv = findViewById(R.id.some_id5) val totalAmount = item1Amount + item2Amount val tax = totalAmount * taxPercent val totalPayable = totalAmount + tax amountString = java.lang.Double.toString(round(totalPayable, 2)) val taxString = java.lang.Double.toString(round(tax, 2)) totalAmountTv?.setText("₹ " + Integer.toString(totalAmount)) taxTv?.setText("₹ $taxString") totalPayableTv?.setText("₹ $amountString") } companion object { var dialog: ProgressDialog? = null fun round(value: Double, places: Int): Double { var value = value require(places >= 0) val factor = Math.pow(10.0, places.toDouble()).toLong() value = value * factor val tmp = Math.round(value) return tmp.toDouble() / factor } } } ``` --- ## See Also - [2. Initialize SDK](https://juspay.io/in/docs/hyper-checkout/android/base-sdk-integration/initiating-sdk) - [4. Handle Payment Response](https://juspay.io/in/docs/hyper-checkout/android/base-sdk-integration/handle-payment-response)