npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

hyper-sdk-capacitor

v3.0.15

Published

Capacitor Wrapper over HyperSDK

Downloads

120

Readme

HYPER-SDK-CAPACITOR

Capacitor Wrapper over HyperSDK which enables payment orchestration via different dynamic modules. More details available at Juspay Developer Docs for Express Checkout SDK and Payment Page SDK.

Install

npm install hyper-sdk-capacitor
npx cap sync

Android

Add following maven url in root build.gradle:

allprojects {
    repositories {
        ....
        ....
        maven { url "https://maven.juspay.in/jp-build-packages/hyper-sdk/" }
    }
}

Updating Client ID

Add the clientId ext property in root(top) build.gradle:

buildscript {
    ....
    ext {
        ....
        clientId = "<clientId shared by Juspay team>"
        hyperSDKVersion = "2.1.25"
        ....
    }
    ....
}

Optionally, you can also provide an override for base SDK version present in plugin (the newer version among both would be considered).

iOS

Place the MerchantConfig.txt file inside the folder where the Podfile is present. This file doesn't need to be added to the project. The content of the file should be as below

clientId = <clientId shared by Juspay Team>

Add below post_install script in the Podfile

post_install do |installer|
 fuse_path = "./Pods/HyperSDK/Fuse.rb"
 clean_assets = false # Pass true to re-download all the assets
 if File.exist?(fuse_path)
   if system("ruby", fuse_path.to_s, clean_assets.to_s)
   end
 end
end

Run the following command inside the ios folder of your project:

pod install

Import HyperSDK

import { Plugins } from '@capacitor/core';
import 'hyper-sdk-capacitor';

const { HyperServices } = Plugins;

Prefetch

To keep the SDK up to date with the latest changes, it is highly recommended to call preFetch as early as possible. It takes a JSON Object as its argument.

await HyperServices.preFetch(payload);

Step-1: Create HyperServices Object

This method creates an instance of HyperServices class in the Capacitor Plugin on which all the HyperSDK APIs / methods are triggered. It internally uses the current activity as an argument.

Note: This method is mandatory and is required to call any other subsequent methods from HyperSDK.

await HyperServices.createHyperServices();

Note: For Web, following parameters should be passed createHyperServices API.

  • clientId : "Client shared by Juspay"
  • service :
    • "in.juspay.hyperpay" (For Payment Page)
    • "in.juspay.hyperapi" (For Express Checkout)
await HyperServices.createHyperServices(clientId, service)

Step-2: Initiate

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 JSON Object as its argument which will contain the base parameters for the entire session and remains static throughout one SDK instance lifetime.

Notes:

  1. 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.
  2. initiate should be called only once in one session.
await HyperServices.initiate(initiatePayload);

Follow the documentation for initiatePayload


To check if SDK is initialized or not

var { isInitialised } = await HyperServices.isInitialised();

Step-3: Process

This API can be triggered any number of times based on requirements or app flow structure. It should not be called on an HyperSDK instance which has not been initiated (Initiate API should be called before calling process API and make sure SDK is initialized)

This API should be triggered for all operations required from HyperSDK. The operation may be related to:

  • Displaying payment options on your payment page
  • Performing a transaction
  • User's payment profile management

The result of the process call is provided in the Hyper Event listener, later discussed in step-4.

await HyperServices.process(processPayload);

Follow the documentation for Process Payload :


Step-4: Listen to events from HyperSDK

HyperSDK Native Module will be emitting all the relevant events to JS via notifyListeners and JavaScript modules can then register to receive events by invoking addListener on the HyperServices Plugin instance with the event name 'HyperEvent'. The listener will return a JSON response.

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 in step-2.
  • process_result: Result of the process operation done in step-3.

HyperServices.addListener('HyperEvent', async (data) => {
   var event = data["event"];
   switch (event) {
      case "show_loader": {
         // Show a loader
      }
      break;
      case "hide_loader": {
         // Hide Loader
      }
      break;
      case "initiate_result": {
         // Initiate api response
      }
      break;
      case "process_result": {
         // Process result
      }
      break;
      default:
         let payload = data["payload"];
         console.log("process result: ", payload)
      break;
   }
});

WEB

Documentation : https://developer.juspay.in/v5.1/docs/introduction Once the payment is complete the user is redirected to the return_url configured by you. Following is the typical destination where the user is taken to: Payment Response : https://developer.juspay.in/docs/integration#section-payment-response


Step-5: Android Hardware Back-Press Handling

HyperSDK internally uses an android fragment for opening the bank page and will need the control to hardware back press when the bank page is active. This can be done by invoking addEventListener on the backButton provided by React Capacitor.

If the blocking asynchronous call HyperServices.onBackPressed() returns true, HyperSDK will handle the back press, else merchant can handle it.

import { App } from '@capacitor/app';

.........
.........

App.addListener('backButton', async (data) => {
  const { onBackPressed } = await HyperServices.onBackPressed();
  if (!onBackPressed) {
    window.history.back();
  }
});

Terminate SDK

This method shall be triggered when HyperSDK is no longer required. Note : After calling terminate, initiate has to be called again.

await HyperServices.terminate();

Helper Method: Is Null

This is a helper method and can be used to check whether the HyperServices object is null at any particular moment. It is a blocking synchronous method and returns a boolean value.

var { isNull } = await HyperServices.isNull();

License

hyper-sdk-capacitor is distributed under AGPL-3.0-only license.