# 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 
<pay-engine
    id="elementID"
    merchant-id="<Merchant ID>"
    type="gateway-connect"
    gateway-id="<GATEWAY-ID>">
</pay-engine>
Please see [Gateway Orchestration](https://docs.payengine.co/payengine-api-reference/transactions/gateway-orchestration) for more details --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.payengine.co/developer-docs/getting-started-1/9.-available-web-components.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.