> For the complete documentation index, see [llms.txt](https://dev.simplepay.ai/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dev.simplepay.ai/docs/components/widget.md).

# Payment Widget

We provide ready to use widget that can be integrated into your app in less than 30 minutes

<div><figure><img src="/files/LtX3GblGTFfaIh9Be0T3" alt=""><figcaption></figcaption></figure> <figure><img src="/files/sXEbS7sYaGDroHIxZFbx" alt=""><figcaption></figcaption></figure> <figure><img src="/files/AVESvR4SsIPKcvzXGUoi" alt=""><figcaption></figcaption></figure></div>

[Go to SimplePay Demo Widget ↗️](https://widget-test-gamma.vercel.app/)

## Installation

To install Widget use package manager or load script from CDN

{% tabs %}
{% tab title="TypeScript" %}

```shell
npm install --save-dev @simplepay-ai/widget
```

```typescript
import '@simplepay-ai/widget';
```

{% endtab %}

{% tab title="jsDelivr" %}

```html
<script src="https://cdn.jsdelivr.net/npm/@simplepay-ai/widget@0/dist/widget.min.js" type="module"></script>
```

{% endtab %}

{% tab title="Skypack" %}

```html
<script src="https://cdn.skypack.dev/-/@simplepay-ai/widget@v0.0.4-J8bM7EPrp28FSp8FCgOy/dist=es2019,mode=raw/dist/widget.js" type="module"></script>
```

{% endtab %}

{% tab title="UNPKG" %}

```html
<script src="https://unpkg.com/@simplepay-ai/widget@0.0.4/dist/widget.js" type="module"></script>
```

{% endtab %}
{% endtabs %}

Then add component to desired place on page

```html
<payment-app
    price="0.8"
    appId="09476f0c-ed36-4dfe-84f4-ef2df1644830"
    clientId="bf298925-2f45-492c-891d-f997aa7ac864" # UUID or Int
    backToStoreUrl="https://example.com"
/>
```

## Configuration

Component configuration may be done via html attributes

Available attributes:

| Attribute        | Required | Description                                                                                    |
| ---------------- | -------- | ---------------------------------------------------------------------------------------------- |
| `appId`          | ✅        | ID of application, may be obtained in [Console](https://console.simplepay.ai/settings)         |
| `clientId`       | ✅        | ID of end customer who making payment. Should be linked to customer entry in merchant database |
| `backToStoreUrl` |          | URL where to redirect customer after payment                                                   |
| `price`          |          | Price for invoice in fiat currency                                                             |
| `dark`           |          | Dark theme on/off                                                                              |
| `invoiceId`      |          | Returns to the current step of the payment process or the receipt                              |