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.

Note: Refer to this doc 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.

1. Onboarding

<pay-engine
    id="elementID"
    merchant-id="<Merchant ID>"
    type="boarding">
</pay-engine>

2. Transactions

<pay-engine
    id="elementID"
    merchant-id="<Merchant ID>"
    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>"
    print-receipt="true"
    type="transactions">
</pay-engine>

3. Batch Settlements

<pay-engine
    id="elementID"
    merchant-id="<Merchant ID>"
    type="payouts"
    view-type="settlement">
</pay-engine>

4. Payouts (Funding)

<pay-engine
    id="elementID"
    merchant-id="<Merchant ID>"
    type="payouts"
    view-type="funding">
</pay-engine>

5. Credit Card Form

<pay-engine
    id="elementID"
    merchant-id="<Merchant ID>"
    type="creditcardform"
    show-zip="true" >
</pay-engine>

<pay-engine
    id="elementID"
    merchant-id="<Merchant ID>"
    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>"
    type="bankaccountform"> 
</pay-engine>

<pay-engine
    id="elementID"
    merchant-id="<Merchant ID>"
    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>"
    type="devices">
</pay-engine>

8. Dispute Management (Contact support to enable)

<pay-engine
    id="elementID"
    merchant-id="<Merchant ID>"
    type="disputes">
</pay-engine>

9. Plaid Connect (Plaid Account Required)

<pay-engine
    id="elementID"
    merchant-id="<Merchant ID>"
    type="plaidconnect">
</pay-engine>

10. Dashboard (Merchant's GMV)

<pay-engine
    id="elementID"
    merchant-id="<Merchant ID>"
    type="dashboard">
</pay-engine>

11. Virtual Terminal

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

<pay-engine
    id="elementID"
    merchant-id="<Merchant ID>"
    type="merchant-terminal"
    show-zip="true"> //optional field
</pay-engine>

`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

<pay-engine
    id="elementID"
    merchant-id="<Merchant ID>"
    type="statements">
</pay-engine>

13. Merchant Reports

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

14. Payment Session and Link

a. Payment Session

Use the following web-component to embed a customer-facing payment session on your page:

<pay-engine
    id="elementID"
    payment-link-id="<Payment Link ID>"
    shouldProcess3ds="true" // Optional. Default is false
    onTransactionEvent="<custom callback function>"
    type="payment-session">
</pay-engine>

Note: Refer to the onTransactionEvent documentation for details and usage examples of the callback function.

b. Payment Link

To embed the payment link, use the following web-component:

<pay-engine
    id="elementID"
    payment-link-id="<Payment Link ID>"
    shouldProcess3ds="true" // Optional. Default is false
    type="payment-link">
</pay-engine>

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.

c. Creating and Managing Payment Links

To embed the interface for creating and managing payment links, use the following web-component:

<pay-engine
    id="elementID"
    merchant-id="<Merchant ID>"
    type="payment-link-create">
</pay-engine>

15. Payment page

<pay-engine
    id="elementID"
    merchant-id="<Merchant ID>"
    shouldProcess3ds="true" // Optional. Default is false
    type="payment-hosted-page">
</pay-engine>

16. Recurring Payments

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

17. Gateway Connection

<pay-engine
    id="elementID"
    merchant-id="<Merchant ID>"
    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 1 year ago