# Payment acceptance widget
## Description
The widget allows you to set up payment acceptance with minimal integration. On your part, you will need to configure the reception of webhooks and place the widget on your application page.
### Payment acceptance
> Depending on the selected type of payment acceptance, we will send the appropriate type of webhook
>
> [Webhook when paying an invoice](https://docs.apollopayment.io/english-2/webhooks#invoice-status-webhook)\
> [Webhook when adding funds to a personal address](https://docs.apollopayment.io/english-2/webhooks#webhook-for-deposit-on-personal-address)
> **Orphan transaction webhook**. In order to handle cases of sending a payment with the wrong currency, contact your personal manager to issue a webhook about the orphan transaction
#### Invoices
For each new payment, the user receives a new invoice with a unique address that is valid for a limited time. The invoice can be issued in crypto or fiat currency, with a fixed amount or without it for free payment.
{% @mermaid/diagram content="sequenceDiagram
Client->>Merchant: Proceeds to payment
Merchant->>Merchant: Places iframe widget
alt widget
Client->>Merchant: Selects coin/network
Merchant ->> Apollopayment: Creates an invoice for payment
Merchant ->> Client: Shows payment address
end
Apollopayment-->>Merchant: Sends webhook
Note over Client: Client sends coins
Note over Apollopayment: Seen transaction on blockchain
Apollopayment-->>Merchant: Sends webhook" %}
***
#### Personal addresses
Payment acceptance allows you to create a list of crypto addresses for each payer. These addresses are permanently assigned to the user.
{% @mermaid/diagram content="sequenceDiagram
Client->>Merchant: Proceeds to payment
Merchant->>Merchant: Places iframe widget
alt widget
Client->>Merchant: Selects coin/network
Merchant ->> Apollopayment: Receiving personal address
Merchant ->> Client: Showing payment address
end
Note over Client: Client sends coins
Note over Apollopayment: Seen transaction in blockchain
Apollopayment-->>Merchant: Sending webhook" %}
### Payouts
Payouts can be made using the widget.
{% @mermaid/diagram content="sequenceDiagram
alt Before the output, you need to add the addresses where the user can make the payout
Client->>Merchant: Adds an address for payout
Merchant->>Apollopayment: POST /api-gateway/personal-addresses/add-trusted-address
end
```
Client->>Merchant: Proceeds to payout
Merchant->>Merchant: Places an iframe widget
alt Widget
Client->>Merchant: Selects a currency/network
Merchant ->> Apollopayment: Creating a payout
Merchant ->> Client: Waiting for payout completion page
end
Note left of Apollopayment: The coins don't go away right away, we send a webhook with the WAIT_APPROVE status.
Apollopayment-->>Merchant: Sending a webhook
Merchant->>Apollopayment: POST /api-gateway/auto-withdrawals/approve
Note over Apollopayment: Sending coins to the client
Apollopayment-->>Merchant: Sending a webhook
alt Widget
Merchant ->> Client: Success Page
end" %}
```
## Connection
The connection is made using the HTML tag ``
Example:
```html
```
> The attribute `allow="clipboard-read; clipboard-write"` is required so that your customers can copy the payment address by clicking the "Copy" button
## Available options
The parameters are passed to the `query`
> To insert data into the `query`, it must be escaped. In JavaScript, this can be done using the function `encodeURIComponent`
>
> const payinCryptoInvoiceId = encodeURIComponent('#12345');
### Parameters for accepting payments using invoices
| Parameter | Example | Description |
| ---------------------------- | --------------------------------- | ---------------------------------------- |
| payinCryptoInvoiceAmount | (decimal) `123.45` | Amount to be paid |
| payinCryptoInvoiceCurrencies | (string) `USD,EUR` | Currency to be converted |
| payinCryptoInvoiceId | (string) `#12345` | Payment ID |
| payinCryptoInvoiceDesc | (string) `Payment payment 12345` | Payment description |
| payinCryptoCurrenciesTo | (string) `USDT_bsc,BNB,USDD_tron` | List of coins available for payment |
| extUserId | (string) `user1234567` | Merchant's payer ID (required parameter) |
> If you do not pass the `payinCryptoInvoiceCurrencies` parameter, the user will be prompted\
> choose from all available currencies to recalculate its amount
>
> Multiple currencies can be separated by commas in the parameter, then the user will be offered a choice\
> only from the specified currencies
>
> One currency can be transferred, then it will be selected, without the possibility for the user to change
> The `payinCryptoInvoiceAmount` parameter will work if one currency is passed to `payinCryptoInvoiceCurrencies`
> You can specify multiple coins/networks separated by commas in the parameter
>
> Only the ticker of the coin is available, in this case all networks that have this coin will be available\
> Example: `USDT,BNB,ETH`
>
> It is possible to specify the coin in a specific network, the separator is an underscore\
> Example: `USDT_tron,BNB_bsc,ETH_ethereum`
> When specifying the `extUserId` parameter, a personal address is reserved for the specified user. If the specified personal user is not exist, it will be created.
***
### Parameters for payment with a personal address
| Parameter | Example | Description |
| --------- | ---------------------- | ---------------------------------------- |
| extUserId | (string) `user1234567` | Merchant's payer ID (required parameter) |
> The personal users created from the widgets will be isolated between the widgets
>
> *If you get the payment address for the user **X** from the widget **A**, it will not be the same as for the same user **X** from the widget **B***
>
> ***
>
> If you want to get a user **X** through the Personal payment API, then you must add the widget ID to the beginning
>
> User **X**: `user12345`\
> Widget ID: `00000000-0000-0000-0000-000000000000`
>
> Client ID to receive via API will be: `00000000-0000-0000-0000-000000000000@user12345`