# Payment Widget

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

<div><figure><img src="https://3504918617-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXps6Hpvtcnwm326Ywnfb%2Fuploads%2FEt60dTXZCc1RhKqNCI1j%2Fscreenshot-1.png?alt=media&#x26;token=607e5226-0105-4f54-ac44-1357b47dab71" alt=""><figcaption></figcaption></figure> <figure><img src="https://3504918617-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXps6Hpvtcnwm326Ywnfb%2Fuploads%2Ffhs3wjBUerjCA9kEB2HJ%2Fscreenshot-2.png?alt=media&#x26;token=02ad6538-f14f-496d-9b5f-8c5def7cad54" alt=""><figcaption></figcaption></figure> <figure><img src="https://3504918617-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXps6Hpvtcnwm326Ywnfb%2Fuploads%2F6SDHYGL3405IG5RFxniW%2Fscreenshot-3.png?alt=media&#x26;token=d2842a6d-1361-4951-8f92-362be6327ade" 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                              |