SDK setup and initialization

Using Singularity payments APIs, you can easily allow the user to top-up their own wallet with any ERC-20 token that you configure. The user can buy these tokens using fiat or any other token on any chain.

Note: The user can be signed into your app using any wallet - external or Singularity wallet for payments to work.

First, follow the following steps to load and setup the Singularity SDK.

Step 1: Setup your Account

Register with us and get your Key and Secret by following the steps mentioned in Account Setup. Also whitelist your domain name with us. While using our services, use these Key and Secret while calling the APIs.

Step 2: Import the SDK

The first step is to import the Singularity SDK into your app. The SDK allows your app to use the Singularity Drawer, open and close the drawer and let users interact with it as you deem fit using the APIs mentioned in the sections below. The Singularity Drawer automatically switches between Wallet and Payments based on the APIs you use.

Add the following self-calling function snippet and supporting snippet in your application's HTML body:

(function (w, d, s, o, f, js, fjs, e) {
    w[o] =
    w[o] ||
    function () {
        (w[o].q = w[o].q || []).push(arguments);
    };
    (js = d.createElement(s)), (fjs = d.getElementsByTagName(s)[0]);
    js.id = o;
    js.src = f;
    js.async = 1;
    fjs.parentNode.insertBefore(js, fjs);
    w.SingularityEnv = e;
})(
    window,
    document,
    "script",
    "Singularity",
    "https://unpkg.com/singularity-client-script@latest/index.js", '', '',
    'production'
);

Alternatively, you can import the library from NPM and call the initSingularity() function

npm install singularity-init

import { initializeSingularity } from 'singularity-init';
initializeSingularity(window, document, 'script','Singularity','latest','','','production');

Step 3: Initialize the Singularity SDK

Now you must initialize the Singularity SDK. For this, you need the Key which you get during account setup. We notice that on some browsers, there can be a race condition if the initialization is done before checking that the SDK has been mounted. Hence please follow either of the following 2 methods to first check if the mount is successful, before initializing.

Similarly, please use the callbackFn feature during initialization to confirm that initialization has completed before calling any other Singularity APIs.

Method 1:

Add an event listener as follows:

const bodyElem = document.getElementsByTagName('body')[0];

bodyElem.addEventListener('Singularity-mounted', (e) => {
	// Singularity is mounted
	Singularity.init(API_KEY, callbackFn); //callbackFn is optional but recommended
});

Alternate Method 2:

When mounted successfully, the below object key can be referred:

window.Singularity.isMounted //returns true if mounted, else false

Once Injection is done:

Singularity.init(API_KEY, callbackFn); //callbackFn is optional but recommended

Sample Implementation

https://github.com/coinbrix/demo-app/

See Singularity in action in our web Demo Apps

Visit https://demo.s9y.gg?key=2 to check out our web Demo App using the Singularity integration