To serve dynamically changing requirements for the payments ecosystem HyperSDK uses a JS engine to improve user experience and enable faster iterations.
Initiate API starts up the js engine and enables it to improve the performance and experience of the next SDK API calls.

📘

Where to call Initiate?

  • Android: In the onCreate() method of your application's main activity
  • iOS: In application:didFinishLaunchingWithOptions method of the application's AppDelegate class
  • React
    • Class Component architecture: In componentDidMount() method
    • Function Component architecture: In useEffect() hook

Android

This method should be called on the onCreate of the host activity. This will start the Hyper engine.
A JSONObject and HyperPaymentsCallback (or HyperPaymentsCallbackAdapter) are its parameters.

  • The JSON object which contains base [parameters for the entire session and remains static throughout.
  • HyperPaymentsCallbackAdapter is an interface method to handle various callbacks/outputs the SDK when process is called.

Integration Sample

Sample Snippet (using HyperPaymentsCallbackAdapter)

hyperInstance.initiate(initiationPayload, new HyperPaymentsCallbackAdapter() {
   @Override
   public void onEvent(JSONObject data, JuspayResponseHandler handler) {
       try {
         String event = data.getString("event");
         if (event.equals("show_loader")) {
           // Show some loader here
         } else if (event.equals("hide_loader")) {
           // Hide Loader
         } else if (event.equals("initiate_result")) {
           // Get the response
           JSONObject response = data.optJSONObject("payload");
         } else if (event.equals("process_result")) {
           // Get the response
           JSONObject response = data.optJSONObject("payload");
           //Merchant handling
         }
       } catch (Exception e) {
         // merchant code...
       }  
    }
});
hyperInstance.initiate(initiationPayload, object : HyperPaymentsCallbackAdapter() {
        fun onEvent(data: JSONObject, handler: JuspayResponseHandler?) {
            try {
                val event: String = data.getString("event")
                if (event == "show_loader") {
                    // Show some loader here
                } else if (event == "hide_loader") {
                    // Hide Loader
                } else if (event == "initiate_result") {
                    // Get the response
                    val response: JSONObject = data.optJSONObject("payload")
                } else if (event == "process_result") {
                    // Get the response
                    val response: JSONObject = data.optJSONObject("payload")
                    //Merchant handling
                }
            } catch (e: Exception) {
                // merchant code...
            }
        }
    })

iOS

This method should be called only once on the viewDidLoad of the host view controller. This will start the Hyper engine.

A ViewController, a Dictionary and HyperSDKCallback are its parameters.

  • View Controller is the host view controller.
  • The Dictionary will contain the base parameters for the entire session and remains static throughout.
  • HyperPaymentsCallback is a callback block which has a Dictionary as parameter to return various outputs from the SDK when process is called.

Integration Sample

self.hyperInstance.initiate(self, payload: initiationPayload, callback: { [unowned self] (response) in
     if let data = response {
         let event = data["event"] as? String ?? ""
         if event == "show_loader" {
           // Show some loader here
         } else if event == "hide_loader" {
           // Hide Loader
         } else if event == "initiate_result" {
           // Get the payload
           let payload = data["payload"]
         } else if event == "process_result" {
           // Get the payload
           let payload = data["payload"]
           //Merchant handling
         }
     } else {
       //Error handling
     }
})
[self.hyperInstance initiate:self payload:initiationPayload callback:^(NSDictionary *data) {
      if (data && data[@"event"]) {
          if ([event isEqualToString:@"show_loader"]) {
              // Show some loader here
          } else if ([event isEqualToString:@"hide_loader"]) {
              // Hide Loader
          } else if ([event isEqualToString:@"initiate_result"]) {
              // Get the payload
              NSDictionary *payload = data["payload"];
          } else if ([event isEqualToString:@"process_result"]) {
              // Get the payload
              NSDictionary *payload = data["payload"];
              // Merchant handling
          }
      } else {
        //Error handling
     }
}];

React Native

This method should be called on the render of the host screen. This will boot up the SDK and start the Hyper engine. It takes a stringified JSON as its argument which will contain the base parameters for the entire session and remains static throughout one SDK instance lifetime.

HyperSdkReact.initiate(JSON.stringify(initiatePayload));

Initiate is an asynchronous call and its result (whether success or failure) is provided in the Hyper Event listener

Listen to events from HyperSDK

Hyper SDK Native Module will be emitting all the relevant events to JS via RCTDeviceEventEmitter and JavaScript modules can then register to receive events by invoking addListener on the NativeEventEmitter class in the componentDidMount() method with the event name 'HyperEvent'. The listener will return a stringified JSON response (resp).
The following events should be handled here:
show_loader: To show a loader for the processing state.
hide_loader: To hide the previously shown loader.
initiate_result: Result of initiate done.
process_result: Result of the process operation done in Process.

Note: The listener can be removed when the React component unmounts in componentWillUnmount() method.

componentDidMount() {
   ...
   const eventEmitter = new NativeEventEmitter(NativeModules.HyperSdkReact);
   this.eventListener = eventEmitter.addListener('HyperEvent', (resp) => {
     var data = JSON.parse(resp);
     var event: string = data.event || '';
     switch (event) {
       case 'show_loader':
         // show some loader here
         break;
       case 'hide_loader':
         // hide the loader
         break;
       case 'initiate_result':
         var payload = data.payload || {};
         console.log('initiate_result: ', payload);
         // merchant code
         ...
         break;
       case 'process_result':
         var payload = data.payload || {};
         console.log('process_result: ', payload);
         // merchant code
         ...
         break;
       default:
         console.log('Unknown Event', data);
     }
     ...
   });
   ...
 }
 componentWillUnmount() {
   ...
   this.eventListener.remove();
   ...
 }

What’s Next