> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fractalpay.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Low Code JS

> Fractal JS in depth

Welcome to the Widgets API documentation. This API allows you to integrate and interact with various payment widgets seamlessly. You can embed buttons for payments, request payments, and display transaction tables.

### Widget Usage

### Pay Link

**Pay Button**

HTML implementation

```html theme={null}
<a href="javascript:void(0);" onclick="getPaymentPage(8)" class="btn btn-primary">Pay</a>
```

React/Vue js implementation

```java theme={null}
import { GetPaymentPage } from 'fractalpay';
```

**Description**: This widget generates a button that, when clicked, opens a payment page for the amount `8.00`.

**Parameters**:

* `amount` (number): The amount of the widget to open the payment page for.

**Example**:

```html theme={null}
<a href="javascript:void(0);" onclick="getPaymentPage(8.00)" class="btn btn-primary">Pay</a>
```

```html theme={null}
  <GetPaymentPage fractalpayClientKey={fractalpayClientKey} amount={8.55} />
```

### Request Link

**Request Payment Button**

HTML implementation

```html theme={null}
<a href="javascript:void(0);" onclick="sendRequestPayment(8.00, '9695969889')" class="btn btn-primary">Request payment</a>
```

React/Vue js implementation

```java theme={null}
import { RequestPaymentonClick } from 'fractalpay';
```

**Description**: This widget generates a button that, when clicked, sends a payment request to the specified phone number for the amount of `8.00`.

**Parameters**:

* `amount` (number): The value of the widget to send the payment request for.
* `recipient_phone` (string): The phone number of the recipient.

**Example**:

```html theme={null}
<a href="javascript:void(0);" onclick="sendRequestPayment(8.00, '9695969889')" class="btn btn-primary">Request payment</a>
```

React/Vue js

```html theme={null}
  <RequestPaymentonClick fractalpayClientKey={fractalpayClientKey} amount={invoice.amount} phone_number={phoneNumbers[invoice.id] || ""}/>
```

### Transactions Table

**Transactions Table**

HTML implementation

```html theme={null}
<table id="fractal_complete_transactions" class="table"></table>
```

React/Vue js implementation

```java theme={null}
import { CompletedTransactions } from 'fractalpay';
```

**Description**: This widget generates a table to display complete transactions.

**Parameters**:

* `id` (string): The ID of the table element. In this case, it is `fractal_complete_transactions`.

**Example**:

```html theme={null}
<table id="fractal_complete_transactions" class="table"></table>
```

React/Vue.js

```html theme={null}
<CompletedTransactions fractalpayClientKey={fractalpayClientKey}/>
```

### Installing JS & NPM Package

To use these widgets, include the following script tag in your HTML:

```html theme={null}
<script src="https://testapi.fractalpay.com/js/dynamic-launch.js?fractalpay_merchant_public_key={{merchant_public_key}}"></script>
```

Replace `{{merchant_public_key}}` with your actual merchant public key.

To use these widgets in a react/Vue.js app, install the following npm package:

```java theme={null}
npm i fractal-pay-now
```

To use the components in a react/Vue.js app, use the below line to import the proper npm function:

```java theme={null}
import { --flag-- } from 'fractalpay';
```

### Error Handling and FAQs

### Error Handling

**Error Codes:**

* **400 Bad Request**: The request was invalid or cannot be otherwise served.
* **401 Unauthorized**: Authentication is required and has failed or has not yet been provided.
* **404 Not Found**: The requested resource could not be found.
* **500 Internal Server Error**: An error occurred on the server.

### FAQs and Troubleshooting

* **Q: What should I do if I receive a 401 Unauthorized error?**
  **A:** Ensure that your API key is correct and included in the request header.

* **Q: How do I update the settings of a widget?**
  **A:** Use the PUT /widgets/{id} endpoint with the new settings in the request body.