--- page_title: 4. Rendering the Checkout Screen product: EC Headless platform: iOS page_source: https://juspay.io/in/docs/ec-headless/ios/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 on the right. For a detailed account, please refer to the flows under the **category -** _**Displaying payment options**_ on the [payload samples](https://docs.juspay.in/ec-headless/ios/payloads/displaying-payment-options) page. #### Code Snippets: - #### Swift Code Snippet: ```swift if hyperInstance?.isInitialised() ?? false { hyperInstance.process(processPayload) } ``` #### ObjectiveC Code Snippet: ```objectivec if ([hyperInstance isInitialised]) { [hyperInstance process:processPayload]; } ``` ### 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: - #### Swift Code Snippet: ```swift if hyperInstance?.isInitialised() ?? false { hyperInstance.process(processPayload) } ``` #### ObjectiveC Code Snippet: ```objectivec if ([hyperInstance isInitialised]) { [hyperInstance process:processPayload]; } ``` ### 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/ios/payloads/displaying-payment-options) page. #### Code Snippets: - #### Swift Code Snippet: ```swift if hyperInstance?.isInitialised() ?? false { hyperInstance.process(processPayload) } ``` #### ObjectiveC Code Snippet: ```objectivec if ([hyperInstance isInitialised]) { [hyperInstance process:processPayload]; } ``` --- ## Complete Code Reference The following code files are referenced in the steps above: ### ViewController.swift ``` // // ViewController.swift // juspay-sdk-integration-swift // // import UIKit // Importing Hyper SDK // block:start:import-hyper-sdk import HyperSDK // block:end:import-hyper-sdk class ViewController: UIViewController { // Creating an object of HyperServices class. // block:start:create-hyper-services-instance let hyperInstance = HyperServices(); // block:end:create-hyper-services-instance override func viewDidLoad() { super.viewDidLoad() } // Creating initiate payload JSON object // block:start:create-initiate-payload func createInitiatePayload() -> [String: Any] { let innerPayload : [String: Any] = [ "action": "initiate", "merchantId": "", "clientId": "", "customerId": "", "xRoutingId": "", "environment": "prod" ]; let sdkPayload : [String: Any] = [ "requestId": UUID().uuidString, "service": "in.juspay.hyperapi", "payload": innerPayload ] return sdkPayload } // block:end:create-initiate-payload // Creating HyperPaymentsCallbackAdapter // This callback will get all events from hyperService instance // block:start:create-hyper-callback func hyperCallbackHandler(response : (Optional>)) { if let data = response, let event = data["event"] as? String { if (event == "hide_loader") { // hide loader } // Handle Process Result // block:start:handle-process-result else if (event == "process_result") { let error = data["error"] as! Bool let innerPayload = data["payload"] as! [ String: Any ] let status = innerPayload["status"] as! String let pi = innerPayload["paymentInstrument"] as? String let pig = innerPayload["paymentInstrumentGroup"] as? String if (!error) { // txn success, status should be "charged" // process data -- show pi and pig in UI maybe also? // example -- pi: "PAYTM", pig: "WALLET" // call orderStatus once to verify (false positives) } else { let errorCode = data["errorCode"] as! String let errorMessage = data["errorMessage"] as! String switch (status) { case "backpressed": // user back-pressed from checkout screen without initiating any txn break; case "user_aborted": // user initiated a txn and pressed back // poll order status break; case "pending_vbv", "authorizing": // txn in pending state // poll order status until backend says fail or success break; case "authorization_failed", "authentication_failed", "api_failure": // txn failed // poll orderStatus to verify (false negatives) break; case "new": // order created but txn failed // also failure // poll order status break; default: // unknown status, this is also failure // poll order status break; } } } // block:end:handle-process-result } } // block:end:create-hyper-callback @IBAction func initiatePayments(_ sender: Any) { // Calling initiate on hyperService instance to boot up payment engine. // block:start:initiate-sdk hyperInstance.initiate( self, payload: createInitiatePayload(), callback: hyperCallbackHandler ) // block:end:initiate-sdk } // Creating process payload JSON object // block:start:process-sdk-call if hyperInstance?.isInitialised() ?? false { hyperInstance.process(processPayload) } // block:end:process-sdk-call } ``` ### ViewController.m ``` // // ViewController.swift // juspay-sdk-integration-swift // // import UIKit // Importing Hyper SDK // block:start:import-hyper-sdk #import // block:end:import-hyper-sdk class ViewController: UIViewController { // Creating an object of HyperServices class. // block:start:create-hyper-services-instance self.hyperInstance = [[HyperServices alloc] init]; // block:end:create-hyper-services-instance override func viewDidLoad() { super.viewDidLoad() } // Creating initiate payload JSON object // block:start:create-initiate-payload - (NSDictionary *)createInitiatePayload { NSDictionary *innerPayload = @{ @"action": @"initiate", @"merchantId": @"", @"clientId": @"", @"customerId": @"", @"xRoutingId": @"", @"environment": @"prod" }; NSDictionary *sdkPayload = @{ @"requestId": @"12398b5571d74c3388a74004bc24370c", @"service": @"in.juspay.hyperapi", @"payload": innerPayload }; return sdkPayload; } // block:end:create-initiate-payload // Creating HyperPaymentsCallbackAdapter // This callback will get all events from hyperService instance //block:start:create-hyper-callback self.hyperCallbackHandler = ^(NSDictionary * _Nullable response) { NSDictionary *data = response; NSString *event = data[@"event"]; if ([event isEqualToString:@"hide_loader"]) { // hide loader } // Handle Process Result // block:start:handle-process-result else if ([event isEqualToString:@"process_result"]) { BOOL error = [data[@"error"] boolValue]; NSDictionary *innerPayload = data[@"payload"]; NSString *status = innerPayload[@"status"]; NSString *pi = innerPayload[@"paymentInstrument"]; NSString *pig = innerPayload[@"paymentInstrumentGroup"]; if (!error) { // txn success, status should be "charged" // process data -- show pi and pig in UI maybe also? // example -- pi: "PAYTM", pig: "WALLET" // call orderStatus once to verify (false positives) } else { NSString *errorCode = data[@"errorCode"]; NSString *errorMessage = data[@"errorMessage"]; if([status isEqualToString:@"backpressed"]) { // user back-pressed from checkout screen without initiating any txn } else if ([status isEqualToString:@"backpressed"]) { // user initiated a txn and pressed back // poll order status } else if ([status isEqualToString:@"pending_vbv"] || [status isEqualToString:@"authorizing"]) { // txn in pending state // poll order status until backend says fail or success } else if ([status isEqualToString:@"authorization_failed"] || [status isEqualToString:@"authentication_failed"] || [status isEqualToString:@"api_failure"]) { // txn failed // poll orderStatus to verify (false negatives) } else if([status isEqualToString:@"new"]) { // order created but txn failed // also failure // poll order status } else { // unknown status, this is also failure // poll order status } } } // block:end:handle-process-result }; //block:end:create-hyper-callback @IBAction func initiatePayments(_ sender: Any) { // Calling initiate on hyperService instance to boot up payment engine. // block:start:initiate-sdk NSDictionary *initPayload = [self createInitiatePayload]; [self.hyperInstance initiate:self payload:initPayload callback:self.hyperCallbackHandler]; // block:end:initiate-sdk } // Creating process payload JSON object // block:start:process-sdk-call if ([hyperInstance isInitialised]) { [hyperInstance process:processPayload]; } // block:end:process-sdk-call } ``` --- ## See Also - [3. Initialize SDK](https://juspay.io/in/docs/ec-headless/ios/base-sdk-integration/initiating-sdk) - [5. Making a Payment](https://juspay.io/in/docs/ec-headless/ios/base-sdk-integration/making-a-payment)