Initiate

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.

For one instance of HyperSDK, initiate can only be called once. If it is called multiple times it will throw an error. Ref Error codes -> JP_017.
To check if an instance is initiated, use isinitialised function. Ref Code Snippets -> isinitialised.

Note: It is highly recommended to initiate SDK from the order summary page (at least 5 seconds before opening your payment page) for seamless user experience.

Android

Input

JSON object which contains base payload that will remain static for one SDK instance.
HyperPaymentsCallbackAdapter is an interface method to handle callbacks/outputs from sdk. HyperSDK uses single point of communication with continuous events triggered during a payments lifecycle.

Integration Sample

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...
       }  
    }
});

iOS

Input

View Controller ref which acts as a starting point for any SDK UI calls.
Dictionary object which contains base parameters that will remain static for one SDK instance.
HyperSDKCallback is an interface method to handle callbacks/outputs from sdk.

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

Input

Stringified Dictionary object which contains base parameters that will remain static for one SDK instance.

Integration Sample

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();
   ...
 }

Note: In case there is any major version upgrade and any changes in Juspay SDK integration steps, we will upgrade the SDK major version number and communicate it to you. You will have to update the way your code triggers to HyperSDK.