# 9. Available Web-Components
Web components provide a user-friendly solution for partners looking to implement a streamlined and interactive payment system. Its ease of inclusion and integration make it simple to set up and customize, providing a seamless user experience from onboarding to transaction and batch processing, to eventual payouts.
{% hint style="warning" %}
**Note:** Refer to [this doc](https://docs.payengine.co/developer-docs/getting-started-1/securing-embedded-uis-merchant-session) for guidance on implementing embedded web components. PayEngine now uses **MerchantSession** to enable embedded web components.
If you're currently using HMAC-based security, please note that it has been deprecated and will continue to be supported for backward compatibility. However, we strongly recommend migrating to **MerchantSession** for improved security and future support.
{% endhint %}
### 1. Onboarding
```javascript
```
### 2. Transactions
```javascript
```
To enable the print option in the transaction widget, set the "print-receipt" attribute to true in the transaction web-component as shown below:
```javascript
```
### 3. Batch Settlements
```javascript
```
### 4. Payouts (Funding)
```javascript
```
### 5. Credit Card Form
{% tabs %}
{% tab title="Credit Card Form" %}
```javascript
```
{% endtab %}
{% tab title="Credit Card Form - Zip Code Properties" %}
```javascript
```
{% endtab %}
{% tab title="Example" %}
```html
PayEngine Test
Result
```
{% endtab %}
{% endtabs %}
You can customize the **allowed countries** and **ZIP code validation** behavior in the credit card form web-component using the following properties:
#### `allowed-countries` (optional)
* Defines which countries are allowed for the zip code in the form.
* If not specified, the default is **US** and **CA**.
* Provide a comma-separated list of country codes (case-insensitive), for example: `"JP, AU"`
* To allow **all supported countries**, use: `allowed-countries="INTL"`
#### `validate-zip` (optional)
* Accepts `true` or `false`. Default is `true`.
* When `true`, the form will validate ZIP/postal codes for the allowed countries.
* When `false`, ZIP validation will be skipped for all allowed countries.
{% hint style="info" %}
Supported countries for zip code
`UK`, `JE`, `GG`, `IM`, `US`, `CA`, `IE`, `DE`, `JP`, `FR`, `AU`, `IT`, `CH`, `AT`, `ES`, `NL`, `BE`, `DK`, `SE`, `NO`, `BR`, `PT`, `FI`, `AX`, `KR`, `CN`, `TW`, `SG`, `DZ`, `AD`, `AR`, `AM`, `AZ`, `BH`, `BD`, `BB`, `BY`, `BM`, `BA`, `IO`, `BN`, `BG`, `KH`, `CV`, `CL`, `CR`, `HR`, `CY`, `CZ`, `DO`, `EC`, `EG`, `EE`, `FO`, `GE`, `GR`, `GL`, `GT`, `HT`, `HN`, `HU`, `IS`, `IN`, `ID`, `IL`, `JO`, `KZ`, `KE`, `KW`, `LA`, `LV`, `LB`, `LI`, `LT`, `LU`, `MK`, `MY`, `MV`, `MT`, `MU`, `MX`, `MD`, `MC`, `MA`, `NP`, `NZ`, `NI`, `NG`, `OM`, `PK`, `PY`, `PH`, `PL`, `PR`, `RO`, `RU`, `SM`, `SA`, `SN`, `SK`, `SI`, `ZA`, `LK`, `TJ`, `TH`, `TN`, `TR`, `TM`, `UA`, `UY`, `UZ`, `VA`, `VE`, `ZM`, `AS`, `CC`, `CK`, `RS`, `ME`, `CS`, `YU`, `CX`, `ET`, `FK`, `NF`, `FM`, `GF`, `GN`, `GP`, `GS`, `GU`, `GW`, `HM`, `IQ`, `KG`, `LR`, `LS`, `MG`, `MH`, `MN`, `MP`, `MQ`, `NC`, `NE`, `VI`, `PF`, `PG`, `PM`, `PN`, `PW`, `RE`, `SH`, `SJ`, `SO`, `SZ`, `TC`, `WF`, `XK`, `YT`, `INTL`
{% endhint %}
{% hint style="warning" %}
**Visa 3D Secure Mandate**
Partners must collect cardholder's mobile number OR email address during payment processing. For this purpose, set show-email = "true" and/or show-phone-number = "true"
{% endhint %}
### 6. ACH Form
{% tabs %}
{% tab title="ACH Form" %}
```javascript
```
{% endtab %}
{% tab title="ACH Form - Optional Business Bank Account Name" %}
```javascript
//optional field
```
{% endtab %}
{% tab title="Example" %}
```html
PayEngine Test
Result
```
{% endtab %}
{% endtabs %}
If your use case supports both personal and business bank accounts, you can include the optional `show-business-name` property in the ACH web-component. When enabled, the form will display a **Business Name** input field. This field should be completed by the user when they are entering a business bank account.
### 7. Device Management
```javascript
```
### 8. Dispute Management (Contact support to enable)
```javascript
```
### 9. Plaid Connect (Plaid Account Required)
```javascript
```
### 10. Dashboard (Merchant's GMV)
```javascript
```
### 11. Virtual Terminal
{% tabs %}
{% tab title="Virtual terminal" %}
```javascript
```
{% endtab %}
{% tab title="Virtual terminal with zip code validation" %}
```javascript
//optional field
```
{% endtab %}
{% endtabs %}
#### `show-zip` (optional)
* Accepts `true` or `false`. Default is `false`.
* When set to `true`, the form will display a mandatory ZIP/postal code field and apply validation based on the entered ZIP/postal code.
### 12. Merchant Statements
```
```
### 13. Merchant Reports
```
```
### 14. Payment Session and Link
#### a. **Payment Session**
Use the following web-component to embed a customer-facing payment session on your page:
```javascript
```
Note: Refer to the `onTransactionEvent` [documentation](https://docs.payengine.co/api-reference/ui-styleguide-specs/accounting-web-component/payment-link-web-component) for details and usage examples of the callback function.
#### b. Payment Link
To embed the payment link, use the following web-component:
```javascript
```
{% hint style="warning" %}
**Difference between Payment Link and Payment Session**
**Payment Session**: If your use case involves displaying a secure form to collect payment information within a modal and showing the transaction status in the same modal through a callback mechanism, then use Payment Session.
**Payment Link**: If your use case requires presenting a payment link that captures additional details—such as contact information—along with payment details, and you prefer to display the link in a flexible manner (not necessarily in a modal), then use Payment Link.
{% endhint %}
#### c. Creating and Managing Payment Links
To embed the interface for creating and managing payment links, use the following web-component:
```javascript
```
### 15. Payment page
```javascript
```
### 16. Recurring Payments
```
```
### 17. Gateway Connection