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.

1. Onboarding

<pay-engine
    id="elementID"
    merchant_id="<Merchant ID>"
    hash="<HMAC>"
    type="boarding">
</pay-engine>

2. Transactions

<pay-engine
    id="elementID"
    merchant_id="<Merchant ID>"
    hash="<HMAC>"
    type="transactions">
</pay-engine>

To enable the print option in the transaction widget, set the "print_receipt" attribute to true in the transaction web-component as shown below:

<pay-engine
    id="elementID"
    merchant_id="<Merchant ID>"
    hash="<HMAC>"
    print_receipt="true"
    type="transactions">
</pay-engine>

3. Batch Settlements

<pay-engine
    id="elementID"
    merchant_id="<Merchant ID>"
    hash="<HMAC>"
    type="payouts"
    view_type="settlement">
</pay-engine>

4. Payouts (Funding)

<pay-engine
    id="elementID"
    merchant_id="<Merchant ID>"
    hash="<HMAC>"
    type="payouts"
    view_type="funding">
</pay-engine>

5. Credit Card Form

<pay-engine
    id="elementID"
    merchant_id="<Merchant ID>"
    hash="<HMAC>"
    type="creditcardform"
    show_zip="true" >
</pay-engine>

<pay-engine
    id="elementID"
    merchant_id="<Merchant ID>"
    hash="<HMAC>"
    type="creditcardform"
    show_zip="true" 
    allowed_countries="UK, JP, AU"
    validate_zip="true">
</pay-engine>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>PayEngine Test</title>

    <script src="http://<PayEngine_HOST>/js/1.0.0/embed.js?key=<Public API Key>"></script>
    <style>
      #btn {
        width: 100%;
        color: #fff;
        background-color: #409eff;
        display: block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        border: 1px solid #409eff;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
      }
    </style>
  </head>

  <body style="overflow: auto !important">
    <pay-engine style="width: 500px;" id="pf-cc" 
      type="creditcardform" 
      show_zip="true" 
      merchant_id="<Merchant ID>" 
      hash="<HMAC>">
    </pay-engine>
    <button id="btn">Submit</button>
    <h4>Result</h4>
    <div id="result"></div>
    <script>
      document.getElementById('btn').addEventListener('click', function() {
        document.getElementById("pf-cc").submit();
      })
      document.getElementById("pf-cc")?.addEventListener("success", function (e) {
        console.log(e.detail);
        document.getElementById("result").innerHTML = JSON.stringify(e.detail);
      });
      document.getElementById("pf-cc")?.addEventListener("error", function (e) {
        console.log(e.detail);
        document.getElementById("result").innerHTML = JSON.stringify(e.detail);
      });
    </script>
  </body>
</html>

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.

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

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"

6. ACH Form

<pay-engine
    id="elementID"
    merchant_id="<Merchant ID>"
    hash="<HMAC>"
    type="bankaccountform"> 
</pay-engine>

<pay-engine
    id="elementID"
    merchant_id="<Merchant ID>"
    hash="<HMAC>"
    type="bankaccountform"
    show_business_name="true"> //optional field
</pay-engine>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>PayEngine Test</title>

    <script src="http://<PayEngine_HOST>/js/1.0.0/embed.js?key=<Public API Key>"></script>
    <style>
      #btn {
        width: 100%;
        color: #fff;
        background-color: #409eff;
        display: block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        border: 1px solid #409eff;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
      }
    </style>
  </head>

  <body style="overflow: auto !important">
    <pay-engine style="width: 500px;" 
      id="pf-ach" 
      type="bankaccountform" 
      merchant_id="<Merchant ID>" 
      hash="<HAMC>">
    </pay-engine>
    <button id="btn">Submit</button>
    <h4>Result</h4>
    <div id="result"></div>
    <script>
      document.getElementById('btn').addEventListener('click', function() {
        document.getElementById("pf-ach").submit();
      })
      document.getElementById("pf-ach")?.addEventListener("success", function (e) {
        console.log(e.detail);
        document.getElementById("result").innerHTML = JSON.stringify(e.detail);
      });
      document.getElementById("pf-ach")?.addEventListener("error", function (e) {
        console.log(e.detail);
        document.getElementById("result").innerHTML = JSON.stringify(e.detail);
      });
    </script>
  </body>
</html>

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

<pay-engine
    id="elementID"
    merchant_id="<Merchant ID>"
    hash="<HMAC>"
    type="devices">
</pay-engine>

8. Dispute Management (Contact support to enable)

<pay-engine
    id="elementID"
    merchant_id="<Merchant ID>"
    hash="<HMAC>"
    type="disputes">
</pay-engine>

9. Plaid Connect (Plaid Account Required)

<pay-engine
    id="elementID"
    merchant_id="<Merchant ID>"
    hash="<HMAC>"
    type="plaidconnect">
</pay-engine>

10. Dashboard (Merchant's GMV)

<pay-engine
    id="elementID"
    merchant_id="<Merchant ID>"
    hash="<HMAC>"
    type="dashboard">
</pay-engine>

11. Virtual Terminal

<pay-engine
    id="elementID"
    merchant_id="<Merchant ID>"
    hash="<HMAC>"
    type="merchant-terminal">
</pay-engine>

12. Merchant Statements

<pay-engine
    id="elementID"
    merchant_id="<Merchant ID>"
    hash="<HMAC>"
    type="statements">
</pay-engine>

13. Merchant Reports

<pay-engine
    id="elementID"
    merchant_id="<Merchant ID>"
    hash="<HMAC>"
    type="merchant-reports">
</pay-engine>

14. Payment links

<pay-engine
    id="elementID"
    merchant_id="<Merchant ID>"
    hash="<HMAC>"
    type="payment-link">
</pay-engine>

15. Payment page

<pay-engine
    id="elementID"
    merchant_id="<Merchant ID>"
    hash="<HMAC>"
    type="payment-hosted-page">
</pay-engine>

16. Recurring Payments

<pay-engine
    id="elementID"
    merchant_id="<Merchant ID>"
    hash="<HMAC>"
    type="merchant-recurring-payment">
</pay-engine>

17. Gateway Connection

<pay-engine
    id="elementID"
    merchant_id="<Merchant ID>"
    hash="<HMAC>"
    type="gateway-connect"
    gateway_id="<GATEWAY-ID>">
</pay-engine>

Please see Gateway Orchestration for more details

Previous8. Handling Callbacks from Web-Components Next10. Available Webhooks

Last updated 2 months ago