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

# Transactions Web-Component

Provide full payment history visibility to your customers.

![](/files/KFIsaxnNJgZJaQwq8njh)

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

```html
<payment-platform
  id="pf-transactions" 
  type="transactions" 
  merchant-id="PE_MERCHANT_ID" 
  hash="PE_MERCHANT_ID_HASH">
</payment-platform>
```

#### Example with default-filter property

```markup
<payment-platform
  id="pf-transactions" 
  type="transactions" 
  default-filter='{
  "amount": {
    "from": 50,
    "to": 100
  },
  "method": "Credit Card",
  "date": {
    "from": 1700780400, 
    "to": 1740264397
  },
  {"refund":"all"}
}'
  merchant-id="PE_MERCHANT_ID" 
  hash="PE_MERCHANT_ID_HASH">
</payment-platform>
```

#### Using the `onRowClick` event.

You can listen to the custom `onRowClick` event to execute custom behavior such as navigating away from the table to a transaction detail page. See the example below:

```html
<payment-platform
  id="transactions-table"
  type="transactions"
  merchant-id="PE_MERCHANT_ID"
  hash="PE_MERCHANT_ID_HASH">
</payment-platform>

<script>
  document.getElementById("transactions-table")
    .addEventListener("onRowClick", event => {
      const payengineTransactionId = event.detail.id;
      const internalTransactionId = event.detail.internalTransactionID;
      // use values here, e.g. navigate to transaction detail page
    })
</script>
```

#### Transactions Table Customization

You can customize column titles and control their visibility using the `columns` parameter. To do this, specify each column you want to configure by referencing its identifier and defining its display settings.

{% tabs %}
{% tab title="Format for column name customization" %}

```html
<payment-platform
  id="transactions-table"
  type="transactions"
  merchant-id="PE_MERCHANT_ID"
  hash="PE_MERCHANT_ID_HASH"
  columns='{
    "current_column_name": {
      "name": "New Name",
      "visible": true
    }
  }'>
</payment-platform>

<script>
  document.getElementById("transactions-table")
    .addEventListener("onRowClick", event => {
      const payengineTransactionId = event.detail.id;
      const internalTransactionId = event.detail.internalTransactionID;
      // use values here, e.g. navigate to transaction detail page
    })
</script>
```

{% endtab %}

{% tab title="Sample - Column name customization" %}

```html
<payment-platform
  id="transactions-table"
  type="transactions"
  merchant-id="PE_MERCHANT_ID"
  hash="PE_MERCHANT_ID_HASH"
  columns='{
    "internal_transaction_id": {
      "name": "Internal ID",
      "visible": true
    }
  }'>
</payment-platform>

<script>
  document.getElementById("transactions-table")
    .addEventListener("onRowClick", event => {
      const payengineTransactionId = event.detail.id;
      const internalTransactionId = event.detail.internalTransactionID;
      // use values here, e.g. navigate to transaction detail page
    })
</script>
```

{% endtab %}
{% endtabs %}

* `"current_column_name"` is the internal identifier for the column. These must match the values listed in the **“Column Name for JSON”** column in the table [below](#column-mapping).
* **`name`** : Overrides the default column title in the UI.
* **`visible`** : Set to `true` to show the column, or `false` to hide it.

#### Column Mapping

| Column name in UI for the Transaction table | Column Name for JSON      |
| ------------------------------------------- | ------------------------- |
| Transaction ID                              | transaction\_id           |
| Merchant Name                               | merchant\_name            |
| Customer Name                               | customer\_name            |
| Transaction Amount                          | transaction\_amount       |
| Internal ID                                 | internal\_transaction\_id |
| Status                                      | transaction\_status       |
| Payment Type                                | payment\_type             |
| Transaction Time                            | created\_at               |

### Properties and Styling

{% tabs %}
{% tab title="Properties" %}
The following properties can be set on this web-component. You can set each property via a JavaScript object reference, or directly inline as an HTML tag attribute.

<table><thead><tr><th width="269.0103759765625">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>hide-filter</code></td><td>Determinate show or hide the default filter element</td></tr><tr><td><code>default-filter</code></td><td>Default filter applying to the transaction table.</td></tr><tr><td><code>additional-columns</code></td><td>Additional columns to be displayed in the table in addition to the standard list</td></tr><tr><td><code>default-transaction-id</code></td><td>Show default transaction detail pop-up on table load.</td></tr><tr><td><code>print-receipt</code></td><td>Displays a button in the transaction detail modal to print the receipt.</td></tr><tr><td><code>columns</code></td><td><p>Rename column titles and control their visibility using the passing JSON object for each column name. The format is</p><pre><code>{
  "columns": {
    "current_column_name": {
      "name": "new name",
      "visible": true
    }
  }
}
</code></pre><p><br>Refer <a href="#transactions-table-customization">here</a> for details and <a href="#sample-column-name-customization">sample</a></p></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-transaction-style">
	.pf-transaction-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-transaction" 
    type="transaction"
    css="#custom-transaction-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-dashboard" 
    type="transaction"
    css="https://mysite.com/custom-transaction-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 "transaction" web-component

| Class                            | Description                                                                        |
| -------------------------------- | ---------------------------------------------------------------------------------- |
| `.pf-transaction-card`           | This class applies to all transaction top blocks                                   |
| `.pf-transaction-table`          | This class applies to the transaction table                                        |
| .pf-transactions-table-col-title | This class applies to the transactions table column text                           |
| `.pf-filter`                     | This class applies to table filter                                                 |
| `.pf-filter-search`              | This class applies to the search field                                             |
| `.pf-filter-field`               | This class 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 %}                    |                                                                                    |

### Transaction Details

To view only the details for an individual transaction, use the following code snippet and pass the individual transaction. See the example below:

```html
<payment-platform
  id="transaction"
  type="transaction-detail"
  merchant-id="PE_MERCHANT_ID"
  hash="PE_MERCHANT_ID_HASH"
  transaction-id="PE_TRANSACTION_ID"
></payment-platform>
```