Transactions Web-Component

Provide full payment history visibility to your customers.

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

<pay-engine
  id="pf-transactions" 
  type="transactions" 
  merchant-id="PE_MERCHANT_ID" 
  hash="PE_MERCHANT_ID_HASH">
</pay-engine>

Example with default-filter property

<pay-engine
  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">
</pay-engine>

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:

<pay-engine
  id="transactions-table"
  type="transactions"
  merchant-id="PE_MERCHANT_ID"
  hash="PE_MERCHANT_ID_HASH">
</pay-engine>

<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.

Format for column name customization

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

<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>

Sample - Column name customization

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

<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>

• "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.

• 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

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.

Class	Description
merchant-id	Merchant ID (generated by using create merchant API call)
hash	HMAC generated from merchant-id (see securing embedded UIs section)
css	<Style> HTML element id, or URL of CSS file (see Styling specs for this component)
hide-filter	Determinate show or hide the default filter element
default-filter	Default filter applying to the transaction table.
additional-columns	Additional columns to be displayed in the table in addition to the standard list
default-transaction-id	Show default transaction detail pop-up on table load.
print-receipt	Displays a button in the transaction detail modal to print the receipt.
columns	Rename column titles and control their visibility using the passing JSON object for each column name. The format is { "columns": { "current_column_name": { "name": "new name", "visible": true } } } Refer here for details and sample

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>
<pay-engine id="pf-transaction" 
    type="transaction"
    css="#custom-transaction-style"
    merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085" 
    hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></pay-engine>

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

<pay-engine id="pf-dashboard" 
    type="transaction"
    css="https://mysite.com/custom-transaction-style.css"
    merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085" 
    hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></pay-engine>

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

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:

<pay-engine
  id="transaction"
  type="transaction-detail"
  merchant-id="PE_MERCHANT_ID"
  hash="PE_MERCHANT_ID_HASH"
  transaction-id="PE_TRANSACTION_ID"
></pay-engine>