Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
hyper-sdk-react
Advanced tools
Readme
React native module for HyperSDK which enables payment orchestration via different dynamic modules. More details available at Juspay Developer Docs for Express Checkout SDK and Payment Page SDK. Some part of module depends heavily on native functionalities are not updatable dynamically.
npm install hyper-sdk-react
Add following maven url in the allProjects > repositories section of root(top) build.gradle:
maven { url "https://maven.juspay.in/jp-build-packages/hyper-sdk/" }
Add the clientId ext property in root(top) build.gradle
:
buildscript {
....
ext {
....
clientId = "<clientId shared by Juspay team>"
hyperSDKVersion = "2.1.24"
....
}
....
}
Optionally, you can also provide an override for base SDK version present in plugin (the newer version among both would be considered).
Run the following command inside the ios folder of your react native project:
pod install
(Optional) Add the following property in package.json
of your project before running pod install if you want to override the base SDK version present in the plugin (the newer version among both would be considered):
{
....
"scripts": {
....
},
"dependencies": {
....
},
"devDependencies": {
....
},
"hyperSdkIOSVersion": "2.1.34"
....
}
Note: This version is just for explanatory purposes and may change in future. Contact Juspay support team for the latest SDK version.
Change the hyperSdkIOSVersion
to 2.1.15
(This version is just for explanatory purposes and may change in future. Contact Juspay support team for the latest SDK version).
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
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>
type HyperSdkReactType = {
HyperEvent: string;
preFetch(data: string): void;
createHyperServices(): void;
initiate(data: string): void;
process(data: string): void;
processWithActivity(data: string): void;
terminate(): void;
onBackPressed(): boolean;
isNull(): boolean;
isInitialised(): Promise<boolean>;
updateBaseViewController(): void;
};
const { HyperSdkReact } = NativeModules;
export default HyperSdkReact as HyperSdkReactType;
import HyperSdkReact from 'hyper-sdk-react';
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 stringified JSON
as its argument.
HyperSdkReact.preFetch(JSON.stringify(preFetchPayload));
This method creates an instance of HyperServices
class in the React Bridge Module 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
.
HyperSdkReact.createHyperServices();
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.
Initiate is an asynchronous call and its result (whether success or failure) is provided in the Hyper Event listener
, later discussed in step-4.
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.
HyperSdkReact.initiate(JSON.stringify(initiatePayload));
This API should be triggered for all operations required from HyperSDK
. The operation may be related to:
The result of the process call is provided in the Hyper Event listener
, later discussed in step-4.
HyperSdkReact.process(JSON.stringify(processPayload));
If any of the react-native library is impacting the UI/UX, please use processWithActivity
instead, which starts a new Activity for opening the Payment Page, isolated of react native.
HyperSdkReact.processWithActivity(JSON.stringify(processPayload));
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'
(You can use the HyperSdkReact.HyperEvent
as well). 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 in step-2.process_result
: Result of the process operation done in step-3.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(HyperSdkReact.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();
...
}
Hyper SDK
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 BackHandler
provided by React-Native.
If the blocking asynchronous call HyperSdkReact.onBackPressed()
returns true, Hyper SDK
will handle the back press, else merchant can handle it.
Note: HyperSdkReact.isNull()
(refer here) can also be called before calling onBackPressed()
to ensure that the HyperServices object is not null.
componentDidMount() {
...
BackHandler.addEventListener('hardwareBackPress', () => {
return !HyperSdkReact.isNull() && HyperSdkReact.onBackPressed();
});
...
}
componentWillUnmount() {
...
BackHandler.removeEventListener('hardwareBackPress', () => null);
...
}
Hyper SDK needs to listen to the response of permissions asked to the user for handling auto SMS reading (wherever applicable). To do so, the merchant's activity should delegate the response to Hyper SDK once it is received from the user. This can be done by adding the following snippet in merchant's react activity (MainActivity
):
@Override
public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) {
if (HyperSdkReactModule.getPermissionRequestCodes().contains(requestCode)) {
HyperSdkReactModule.onRequestPermissionsResult(requestCode, permissions, grantResults);
} else {
super.onRequestPermissionsResult(requestCode, permissions, grantResults);
}
}
This method shall be triggered when HyperSDK
is no longer required.
HyperSdkReact.terminate();
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: boolean = HyperSdkReact.isNull();
console.log('is HyperSDK null: ', isNull);
This is a helper / optional method to check whether SDK has been initialised after step-2. It returns a JS Promise
with a boolean
value.
HyperSdkReact.isInitialised().then((init: boolean) => {
console.log('isInitialised:', init);
});
This is an optional method to update the base view controller in case if any new view controller is presented over top view controller after the SDK initiation. This method should be called before making HyperSdkReact.process()
call.
HyperSdkReact.updateBaseViewController();
Please refer here for Express Checkout SDK and here for Payment Page SDK, for all request and response payload structure.
See the contributing guide to learn how to contribute to the repository and the development workflow.
hyper-sdk-react is distributed under AGPL-3.0-only license.
FAQs
React native module for HyperSDK which enables payment orchestration via different dynamic modules. More details available at https://developer.juspay.in/v2.0/docs . Some part of module depends heavily on native functionalities are not updatable dynamical
The npm package hyper-sdk-react receives a total of 1,137 weekly downloads. As such, hyper-sdk-react popularity was classified as popular.
We found that hyper-sdk-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.