--- page_title: 4. Rendering the Checkout Screen product: EC Headless platform: Cordova page_source: https://juspay.io/in/docs/ec-headless/cordova/base-sdk-integration/rendering-the-checkout-screen llms_txt: https://juspay.io/in/docs/llms.txt product_llms_txt: https://juspay.io/in/docs/ec-headless/llms.txt --- ## 4. Rendering the Checkout Screen Once the checkout page is opened, your users can proceed with the transactions. Rendering the checkout page requires multiple `process` SDK calls from the merchant application. ### Step 4.1. Process Payloads Each process SDK call takes a specific JSON Object as argument. This argument is also known as process payload. Sample payloads for rendering the checkout screen can be found under the **category -** _**Displaying payment options**_ on the [payload samples](https://docs.juspay.in/ec-headless/cordova/payloads/displaying-payment-options) page. #### Code Snippets: - #### Javascript Code Snippet: ```javascript hyperSDKRef.process(JSON.stringify(completePayload)); ``` ### Step 4.2. Process SDK Calls for Rendering Checkout Page Rendering the checkout page requires the following process SDK calls from the merchant application - 1. Get Payment Methods 2. Card - List Saved 3. UPI - Get Available Apps 4. Wallet - Refresh All 5. Eligibility - Wallets 6. Is Device Ready > **Warning** > * All these process SDK calls can be made in parallel > * Process SDK call is to be made on the same instance of HyperService using which initiate API was triggered. It should not be called on an HyperSDK instance which has not been initiated. #### Code Snippets: - #### Javascript Code Snippet: ```javascript hyperSDKRef.process(JSON.stringify(completePayload)); ``` ### Step 4.3. Consume SDK Response Parse and consume the SDK response for the process SDK calls listed in step 4.2. The SDK responds with the following respectively - 1. Available Payment methods 2. User Stored Cards 3. List of Active UPI Apps 4. Updated Wallet Balances 5. Eligible Paylater/Postpaid wallets 6. Eligibility for in-app flow in PhonePe & GooglePay Sample response for rendering the checkout screen can be found under the **category -** _**Displaying payment options**_ on the [payload samples](https://docs.juspay.in/ec-headless/cordova/payloads/displaying-payment-options) page. #### Code Snippets: - #### Javascript Code Snippet: ```javascript hyperSDKRef.process(JSON.stringify(completePayload)); ``` --- ## Complete Code Reference The following code files are referenced in the steps above: ### snippets.txt ``` //block:start:add-merchant-config-android ext { clientId = "" } //block:end:add-merchant-config-android //block:start:create-hyper-services-instance hyperSDKRef = cordova.plugins.HyperSDKPlugin //block:end:create-hyper-services-instance //block:start:create-initiate-payload var payload = { "requestId": "8cbc3fad-8b3f-40c0-ae93-2d7e75a8624a", "service" : "in.juspay.hyperapi", "betaAssets" : true, "payload" : { "action": "initiate", "merchantKeyId": "2980", "merchantId": "merchant_id", "clientId": "client_id", "customerId": "customer_id", "environment": "production", "signaturePayload": "signaturePayloadString", "signature": "signature" } } //block:end:create-initiate-payload //block:start:create-hyper-callback var hyperSDKCallback = function (response) { try { const data = JSON.parse(resp); var event = data.event || ''; switch (event) { case "show_loader": { // Show some loader here } break; case "hide_loader": { // Hide Loader } break; case "initiate_result": { // Get the payload let payload = parsedData["payload"]; console.log("initiate result: ", parsedData) } break; //block:start:handle-process-result case "process_result": { // Get the payload let payload = parsedData["payload"]; console.log("process result: ", parsedData) 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 //Naivgate to success page //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 // navigate back 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 //navigate to failure page //block:end:display-payment-status break; case 'new': // order created but txn failed // very rare for V2 (signature based) // also failure // poll order status //navigate to failure page break; default: // unknown status, this is also failure // poll order status //navigate to failure page } // 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; } break; //block:end:handle-process-result default: //Error handling let payload = parsedData; console.log("process result: ", payload) break; } } catch (error) { //Error handling console.log(error); } } //block:end:create-hyper-callback //block:start:initiate-sdk hyperSDKRef.initiate(JSON.stringify(completePayload), hyperSDKCallback); //block:end:initiate-sdk //block:start:process-sdk-call hyperSDKRef.process(JSON.stringify(completePayload)); //block:end:process-sdk-call ``` --- ## See Also - [3. Initialize SDK](https://juspay.io/in/docs/ec-headless/cordova/base-sdk-integration/initiating-sdk) - [5. Making a Payment](https://juspay.io/in/docs/ec-headless/cordova/base-sdk-integration/making-a-payment)