ES6 JS

ES6 JS

Installation

1. Extract the zip file provided during merchant onboarding.
2. Rename the folder to synapse-js-sdk
3. Add the folder to your project directory.

Initialisation and Usage

The following code is written in basic HTML and vanilla JS

1. At the top, add the following imports

<script src="./synapse_es6_js_sdk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dsbridge/3.1.4/dsbridge.min.js"></script>

2. Initialise SDK using

const synapseSdk = new SynapseSdk(bridge)

3. The methods in the sdk can be called as,

synapseSdk.initiateSynapsePayment(function body)

4. The callback can be registered using the same Synapse-SDK reference.

synapseSdk.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 🚀