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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://paas.docs.machnetinc.com/api-references/funds/funding-account-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.