> For the complete documentation index, see [llms.txt](https://paas.docs.machnetinc.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://paas.docs.machnetinc.com/api-references/funds/funding-account-widget.md).

# Funding Account Widget

You will need to use our widget with the type "CARD" to add a card or "BANK" to add a bank as a funding account. A particular user can only have 2 active bank and 2 active card accounts. 

To initialize the widget, you will need to first generate a Widget Token, which will only be valid for a certain time period. You will need to pass this token along with the Sender ID to widget initialization snippets.

#### `GET /users/{{user_id}}/widget-token`

{% tabs %}
{% tab title="Response Parameters" %}

| **Field**       | **Required** | **Type** | **Description**     |
| --------------- | ------------ | -------- | ------------------- |
| token           | Yes          | String   | Token Details       |
| user\_id        | Yes          | UUID     | User ID             |
| expiry\_minutes | Yes          | Numeric  | Token validity time |
| {% endtab %}    |              |          |                     |

{% tab title="Request Sample" %}

```
curl --location -g --request GET '{{url}}/users/{{user_id}}/widget-token' \
--header 'X-Client-Id: {{client_id}}' \
--header 'X-Client-Secret: {{client_secret}}' \
--header 'Content-Type: application/json'
```

{% endtab %}

{% tab title="Response Sample" %}

```
{
   "expiry_minutes": 15,
   "user_id": "85e1595e-4b08-44d6-acdf-e842149e8f6a",
   "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzZW5kZXJJZCI6Ik9EVmxNVFU1TldVdE5HSXdPQzAwTkdRMkxXRmpaR1l0WlRnME1qRTBPV1U0WmpaaFxyXG4iLCJtdG9JZCI6IlFUQXdNd1xyXG4iLCJyb2xlcyI6WyJXSURHRVQiXSwib3JpZ2luYXRvciI6IkEwMDMiLCJleHAiOjE2MzYzMzkxMDEsImFmZmlsaWF0ZSI6IkEwMDMiLCJhZmZpbGlhdGVJZCI6NH0.JEXzaJeqpREbi2j1krWfgTAAKmS9Lh3q7PFpYppO4dU"
}
```

{% endtab %}
{% endtabs %}

After you have the Widget Token, you will need to follow the steps mentioned below to set up the widget.

### **1. Include the Widget Script**

```
<script src="https://widget.v4sandbox.machpay.com/widget/widget.js" charset="utf-8"></script>
```

### **2. Create a div where widget needs to be placed**

```
<div id="widget-root"></div>
```

### **3. Initialize the Widget**

{% tabs %}
{% tab title="For Card" %}

```
<script>
    var widget = new MachnetWidget({
      elementId: "widget-root",
      userId: "{{user_id}}",
      width: "100%",
      height: "200px",
      type: "card",
      locale: "en",
      stylesheet: "https://example.com/mystyle.css",
      token: "{{token}}",
    });
    widget.init();
</script>
```

{% endtab %}

{% tab title="For Bank" %}

```
<script>
    var widget = new MachnetWidget({
      elementId: "widget-root",
      userId: "{{userId}}",
      width: "100%",
      height: "200px",
      type: "card",
      locale: "en",
      appScheme:'myapp://myapp', // For oAuth flows. Add deep link for android or iOs app. Not recommended for web browsers.
      userId: '{{userId}}', 
      stylesheet: "https://example.com/mystyle.css",
      token: "{{token}}",
      bankId: {{funding_souce_id}}, // Required only when funding source is in LOGIN_REQUIRED status and user needs to re-login to their bank account
    });
    widget.init();
  </script>

```

{% endtab %}
{% endtabs %}

[Funding account webhooks](/api-references/webhooks/events.md#funding-account-events) and[ widget events](/api-references/webhooks/events.md#widget-events) will provide details on the status of the process.