Skip to main content

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>
  1. Initialise SDK using
const synapseSdk = new SynapseSdk(bridge)
  1. The methods in the sdk can be called as,
synapseSdk.initiateSynapsePayment(function body)
  1. 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 🚀

Last updated on by achyuth13