# 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.

<details>

<summary>Step 1: Setup your Account</summary>

Register with us and get your **Key** and **Secret** by following the steps mentioned in [Account Setup](https://docs.s9y.xyz/integration-first-steps/account-setup). Also whitelist your domain name with us. \
\
While using our services, use these Key and Secret while calling the APIs.

</details>

<details>

<summary>Step 2: Import the SDK</summary>

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.&#x20;

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

{% code overflow="wrap" %}

```javascript
(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'
);
```

{% endcode %}

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

```bash
npm install singularity-init
```

{% code overflow="wrap" %}

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

{% endcode %}

</details>

<details>

<summary>Step 3: Initialize the Singularity SDK</summary>

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.&#x20;

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:

{% code overflow="wrap" %}

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

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

{% endcode %}

**Alternate Method 2:**

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

{% code overflow="wrap" %}

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

{% endcode %}

Once Injection is done:

{% code overflow="wrap" %}

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

{% endcode %}

</details>

### **Sample Implementation**

<https://github.com/coinbrix/demo-app>[/](https://github.com/coinbrix/demo-app)

### See Singularity in action in our web Demo Apps

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