> For the complete documentation index, see [llms.txt](https://docs.payengine.co/payengine-api-v2.5/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.payengine.co/payengine-api-v2.5/ui-styleguide-specs/payouts-web-component-1.md).

# Payouts Web-Component

Provide full payout history visibility to your customers.

![](/files/xn3iApSVESMSmsqTGP4X)

You can utilize our payouts component by specifying the `payment-platform` web component with type `payouts` and other necessary properties.

```html
<payment-platform id="pf-payouts" 
    type="payouts" 
    merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085" 
    hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></payment-platform>
```

### Properties and Styling

{% tabs %}
{% tab title="Properties" %}
Following are properties that can be set on this web-component. You can set the property via a JavaScript object reference, or directly inline as an HTML tag attribute. See the example below:

```html
<payment-platform id="pf-payouts" 
    type="payouts" 
    merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085"
    hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></payment-platform>
```

Following is a list of applicable properties.

<table><thead><tr><th width="197.265625">Class</th><th>Description</th></tr></thead><tbody><tr><td><code>merchant-id</code></td><td>Merchant ID (generated by using <a href="/pages/Sf3ovxLi3M73vpF9JcNI">create merchant</a> API call)</td></tr><tr><td><code>hash</code></td><td>HMAC generated from <code>merchant-id</code> (see <a href="https://docs.payengine.co/developer-docs-v2.5/getting-started-1/securing-embedded-uis-merchant-session/securing-embeddable-uis">securing embedded UIs</a> section)<br><br><strong>Note</strong>: his field is deprecated. Use <a href="https://docs.payengine.co/developer-docs-v2.5/getting-started-1/securing-embedded-uis-merchant-session">MerchantSession</a> to integrate the web component; this field is no longer required.</td></tr><tr><td><code>css</code></td><td>&#x3C;Style> HTML element id, or URL of CSS file (see Styling specs for this component)</td></tr><tr><td><code>view-type</code></td><td><code>settlement</code>|<code>funding.</code>If not provided, this widget shows settlement view by default.</td></tr><tr><td><code>hideFilter</code></td><td>Show or hide the default filter element</td></tr><tr><td><code>defaultFilter</code></td><td>Default filter applying to the payouts table.</td></tr></tbody></table>
{% endtab %}

{% tab title="Styling" %}

#### Styling

As you build and improve your website, it's important that our UI elements work well with, and similar to, your own user interface. To make the building and programming process easier, we put in work to make our component as flexible and user-friendly as possible for you.

Therefore, we added a customization option with a property called `css` , simply embed a style element within your HTML file with all your customizations, and pass the id of this element to our web-component.

```
<style id="custom-payouts-style">
	.pf-payout-table{
				position: relative;
			  background-color: #fff;
			  overflow: hidden;
			  font-size: 1rem;
			  text-align: left;
			  width: 100%;
			  max-width: 100%;
			  transform: translatez(0);
			  border-radius: 0px 0px 0.25rem 0.25rem;
		}
</style>
<payment-platform id="pf-payouts" 
    type="payouts"
    css="#custom-payouts-style"
    merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085" 
    hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></payment-platform>
```

Additionally, you can also pass an external stylesheet URL to the `css` prop, like so:

```
<payment-platform id="pf-payouts" 
    type="payouts"
    css="https://mysite.com/custom-payouts-style.css"
    merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085" 
    hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></payment-platform>
```

![](/files/5az8Y6DduH3z61Gmdyi4)

Here you can find a list of customizable classes within the "payouts" web-component

| Class                    | Description                                                                           |
| ------------------------ | ------------------------------------------------------------------------------------- |
| `.pf-payout-card`        | This class applies for all transaction top blocks                                     |
| `.pf-payout-table`       | This class applies for transaction table                                              |
| `.pf-filter`             | This class applies to table filter                                                    |
| `.pf-filter-search`      | This class applies to the search field                                                |
| `.pf-filter-field`       | This class is applies to most filter form controls such as text, number, select, etc. |
| `.pf-filter-checkbox`    | This class applies to the filter fields, that are of type checkbox                    |
| `.pf-filter-button-done` | This class applies to the filter done button                                          |
| `.pf-button-filter`      | This class applies to the button, that opens a filter                                 |
| {% endtab %}             |                                                                                       |
| {% endtabs %}            |                                                                                       |