Payouts Web-Component

Provide full payout history visibility to your customers.

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

<pay-engine id="pf-payouts" 
    type="payouts" 
    merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085" 
    hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></pay-engine>

Properties and Styling

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:

<pay-engine id="pf-payouts" 
    type="payouts" 
    merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085"
    hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></pay-engine>

Following is a list of applicable properties.

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)
view-type	settlement|funding.If not provided, this widget shows settlement view by default.
hideFilter	Show or hide the default filter element
defaultFilter	Default filter applying to the payouts table.

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

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