--- page_title: 3. Open Hypercheckout Screen product: Hypercheckout platform: iOS page_source: https://juspay.io/in/docs/hyper-checkout/ios/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 the Hypercheckout screen is opened, your users can proceed with the transactions. Opening the Hypercheckout screen 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/ios/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: - #### Swift Code Snippet: ```swift func getProcessPayload(completion: @escaping ([AnyHashable: Any]?) -> Void) { // Make an API Call to your server to create Session and return SDK Payload // API Call should be made on the merchants server createOrder { jsonData in completion(jsonData) } } ``` #### ObjectiveC Code Snippet: ```objectivec - (NSDictionary *)createProcessPayload { // Make an API Call to your server to create Session and return SDK Payload //Payload received from Session API call NSDictionary *sdkProcessPayload = @{ @"clientId": @"", @"x-routing-id": @"", @"amount": @"1.0", @"merchantId": @"", @"clientAuthToken": @"tkn_xxxxxxxxxxxxxxxxxxxxx", @"clientAuthTokenExpiry": @"2022-03-12T20:29:23Z", @"environment": @"sandbox", @"lastName": @"wick", @"action": @"paymentPage", @"customerId": @"testing-customer-one", @"returnUrl": @"https://shop.merchant.com", @"currency": @"INR", @"firstName": @"John", @"customerPhone": @"9876543210", @"customerEmail": @"test@mail.com", @"orderId": @"testing-order-one", @"description": @"Complete your payment" }; NSDictionary *sdkPayload = @{ @"requestId": NSUUID.UUID.UUIDString, @"service": @"in.juspay.hyperpay", @"payload": sdkProcessPayload }; return sdkPayload; } ``` ### Step 3.2. Call Process Function Pass the JSON inside `sdk_payload` obtained in `Step 3.1`, to `process`SDK function. Process is to be called on the same instance of HyperService using which initiate was called. #### Code Snippets: - #### Swift Code Snippet: ```swift hyperInstance.process(sdkProcessPayload) ``` #### ObjectiveC Code Snippet: ```objectivec NSDictionary *processPayload = [self createProcessPayload]; [self.hyperInstance process:processPayload]; ``` > **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/ios/resources/test-resources)page for more details. --- ## Complete Code Reference The following code files are referenced in the steps above: ### CheckoutViewController.swift ``` // // CheckoutViewController.swift // juspay-sdk-integration-swift // // Created by Arbinda Kumar Prasad on 08/06/23. // import UIKit var totalpayable = 1; class CheckoutViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() p1QntyOutlet.text = "x\(p1Qnty)" p2QntyOutlet.text = "x\(p2Qnty)" let total = (p1Qnty * p1Price) + (p2Qnty * p1Price) let tax = (total * 18)/100 totalpayable = total + tax p1Amount.text = "Rs. \(p1Qnty * p1Price)" p2Amount.text = "Rs. \(p2Qnty * p1Price)" totalAmount.text = "Rs. \(total)" taxOutlet.text = "Rs. \(tax)" totalPayableOutlet.text = "Rs. \(totalpayable)" } // block:start:fetch-process-payload func getProcessPayload(completion: @escaping ([AnyHashable: Any]?) -> Void) { // Make an API Call to your server to create Session and return SDK Payload // API Call should be made on the merchants server createOrder { jsonData in completion(jsonData) } } // block:end:fetch-process-payload @IBAction func startPayments(_ sender: Any) { getProcessPayload { sdkProcessPayload in DispatchQueue.main.async { [weak self] in guard let self = self else { return } if hyperInstance.isInitialised() { hyperInstance.baseViewController = self // Calling process on hyperService to open the Hypercheckout screen // block:start:process-sdk hyperInstance.process(sdkProcessPayload) // block:end:process-sdk } } } } // Note: Session API should only be called from merchant's server. Don't call it from client app // ----------------------------------------------------------------- func createOrder(completion: @escaping ([String: Any]?) -> Void) { let semaphore = DispatchSemaphore(value: 0) let orderId = String(Int.random(in: 10000000...99999999)) let parameters = """ { "order_id": "\(orderId)", "amount": "\(totalpayable)", "customer_id": "9876543201", "customer_email": "test@mail.com", "customer_phone": "9876543201", "payment_page_client_id": "", "action": "paymentPage", "description": "OrderDescription", "first_name": "John", "last_name": "wick" } """ let postData = parameters.data(using: .utf8) var request = URLRequest(url: URL(string: "https://api.juspay.in/session")!, timeoutInterval: Double.infinity) // 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 request.addValue("Basic \(Data("".utf8).base64EncodedString())", forHTTPHeaderField: "Authorization") request.addValue("", forHTTPHeaderField: "x-merchantid") request.addValue("", forHTTPHeaderField: "x-routing-id") request.addValue("application/json", forHTTPHeaderField: "Content-Type") request.httpMethod = "POST" request.httpBody = postData let task = URLSession.shared.dataTask(with: request) { data, response, error in guard let data = data else { semaphore.signal() completion(nil) return } do { if let json = try JSONSerialization.jsonObject(with: data, options: []) as? [String: Any], let sdkPayload = json["sdk_payload"] as? [String: Any] { completion(sdkPayload) } else { completion(nil) } } catch { print("Error: Failed to parse JSON - \(error)") completion(nil) } semaphore.signal() } task.resume() semaphore.wait() } // ----------------------------------------------------------------- /* // MARK: - Navigation // In a storyboard-based application, you will often want to do a little preparation before navigation override func prepare(for segue: UIStoryboardSegue, sender: Any?) { // Get the new view controller using segue.destination. // Pass the selected object to the new view controller. } */ @IBOutlet weak var p1QntyOutlet: UILabel! @IBOutlet weak var totalAmount: UILabel! @IBOutlet weak var totalPayableOutlet: UILabel! @IBOutlet weak var taxOutlet: UILabel! @IBOutlet weak var p2Amount: UILabel! @IBOutlet weak var p1Amount: UILabel! @IBOutlet weak var p2QntyOutlet: UILabel! } ``` ### ViewController.m ``` // // IntegViewController.m // DevTools // // Created by Balaganesh on 04/04/22. // Copyright © 2022 Juspay. All rights reserved. // #import "ViewController.h" // Importing Hyper SDK // block:start:import-hyper-sdk #import // block:end:import-hyper-sdk @interface ViewController () // Declaring HyperServices property @property (nonatomic, strong) HyperServices *hyperInstance; @property (nonatomic, copy) HyperSDKCallback hyperCallbackHandler; @end @implementation ViewController // Creating initiate payload JSON object // block:start:create-initiate-payload - (NSDictionary *)createInitiatePayload { NSDictionary *innerPayload = @{ @"action": @"initiate", @"merchantId": @"", @"clientId": @"", @"x-routing-id": @"", @"environment": @"production" }; NSDictionary *sdkPayload = @{ @"requestId": @"12398b5571d74c3388a74004bc24370c", @"service": @"in.juspay.hyperpay", @"payload": innerPayload }; return sdkPayload; } // block:end:create-initiate-payload // Creating process payload JSON object // block:start:fetch-process-payload - (NSDictionary *)createProcessPayload { // Make an API Call to your server to create Session and return SDK Payload //Payload received from Session API call NSDictionary *sdkProcessPayload = @{ @"clientId": @"", @"x-routing-id": @"", @"amount": @"1.0", @"merchantId": @"", @"clientAuthToken": @"tkn_xxxxxxxxxxxxxxxxxxxxx", @"clientAuthTokenExpiry": @"2022-03-12T20:29:23Z", @"environment": @"sandbox", @"lastName": @"wick", @"action": @"paymentPage", @"customerId": @"testing-customer-one", @"returnUrl": @"https://shop.merchant.com", @"currency": @"INR", @"firstName": @"John", @"customerPhone": @"9876543210", @"customerEmail": @"test@mail.com", @"orderId": @"testing-order-one", @"description": @"Complete your payment" }; NSDictionary *sdkPayload = @{ @"requestId": NSUUID.UUID.UUIDString, @"service": @"in.juspay.hyperpay", @"payload": sdkProcessPayload }; return sdkPayload; } // block:end:fetch-process-payload - (void)viewDidLoad { [super viewDidLoad]; //block:start:create-hyper-services-instance self.hyperInstance = [[HyperServices alloc] init]; //block:end:create-hyper-services-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 // This case will reach once the Hypercheckout screen closes // 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 PP 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 // very rare for V2 (signature based) // 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)initiatePayments:(id)sender { // 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 } - (IBAction)startPayments:(id)sender { // Calling process on hyperService to open the Hypercheckout screen // block:start:process-sdk NSDictionary *processPayload = [self createProcessPayload]; [self.hyperInstance process:processPayload]; // block:end:process-sdk } @end ``` --- ## See Also - [2. Initialize SDK](https://juspay.io/in/docs/hyper-checkout/ios/base-sdk-integration/initiating-sdk) - [4. Handle Payment Response](https://juspay.io/in/docs/hyper-checkout/ios/base-sdk-integration/handle-payment-response)