> 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/accounting-web-component.md).

# Accounting Web-Component

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

### 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-accounting" 
    type="accounting" 
    merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085" 
    hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></payment-platform>
```

Following is a list of applicable properties.

<table><thead><tr><th width="182.1146240234375">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></tbody></table>
{% endtab %}
{% endtabs %}