Node.js Powered / Common JS

Installation

Extract the zip file provided during merchant onboarding.
Rename the folder to synapse-js-sdk
Install the SDK using npm with following command:
- cd synapse-js-sdk
- npm install
To use the Synapse JS SDK in your web app, navigate to your app's folder directory and run the following command to install the Synapse JS SDK:
- npm install location-to-synapse-js-sdk/synapse_common_js_sdk

Initialisation and Usage

Note

If the merchant uses a framework which uses SSR and CSR, please ensure that synapse_common_js_sdk has to only be imported and initialised on Client side. synapse_common_js_sdk is essentially a bridge that connects the PWA to the Native application, and it uses dsbridge which is a client side library which facilitates the same.

Import the sdk using following code:
- import { SynapseSdk } from "synapse_common_js_sdk";
Initialize sdk using:
- var sdk = new SynapseSdk();
The methods in the sdk can be called as:
- for eg : sdk.initiateSynapsePayment(data).then( function body )
The callback can be registered using the same Synapse-SDK reference.
- for eg : sdk.initCompletePaymentCallback((data)=>{//function body})

Integration Health Check

Once you install the JS SDK - to test if the integration is working as expected, you can add a button and call any method from the JS SDK, for example, on click of the button, initiateSynapsePayment() like so,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Initiate Payment</title>
</head>
<body>
    <button id="paymentButton">Initiate Payment</button>

    <script>
        const initiatePayment = () => {
            sdk
                .initiateSynapsePayment(JSON.stringify(request))
                .then((val) => validateResponse(val))
                .catch((error) => console.log(error));
        };

        document.getElementById("paymentButton").addEventListener("click", initiatePayment);
    </script>
</body>
</html>

After implementing this - click on the button and in the console you should be able to see.

JS: calling initiateSynapsePayment

If this is seen, the JS SDK is installed correctly 🚀