📃
Developer Docs
  • Overview
  • Integration Options
  • Webhooks
    • Build a webhook endpoint
    • Check signature
  • Getting Started
    • 1. Creating User Accounts
    • 2. User Account Types & Permissions
    • 3. Generate Access Tokens
    • 4. Choose Integration Options
    • 5. Securing Embedded UIs
      • 5a. Securing Embedded UIs Using HMAC (deprecated)
    • 6. Loading the frontend library
      • 6a. Preloading PayEngine Web-Component in SPA
    • 7. Custom styling the Web-Components
    • 8. Handling Callbacks from Web-Components
    • 9. Available Web-Components
    • 10. Available Webhooks
  • Merchant Onboarding
    • Overview
    • Integration Options
    • Onboarding/Payments Application Workflow
    • Embedded Onboarding UI
    • Merchant onboarding APIs
    • Partner's Onboarding UI
    • Merchant Lifecycle
    • Onboarding to Partner Relationships
  • Processing Payments
    • Introduction
      • Transaction Flow and Status
    • SecureFields JS
      • SecureFields Bank Account
      • Using tokens
    • Credit Card Form
    • Connect with Plaid
    • Connect Mailgun
    • 3D Secure
    • Payments API
    • Searching Transactions
    • Registering a cloud connected device
    • Apple Pay
      • Apple Pay in your native app
    • Google Payâ„¢
    • Level 2 and Level 3 Data
    • Fraud Prevention
    • Reporting
    • PCI Compliance
    • Address Verification Service (AVS) Check
    • Hosted Payments
      • Embedded Payments Session Integration
    • Tap to Pay
  • Card Account Updater
  • ORCHESTRATION SYSTEM
    • Orchestration Overview
    • Onboarding Orchestration
    • Transactions Orchestration
    • Omnicommerce Orchestration
    • Merchant Servicing
    • Universal Reporting
  • TOKENIZATION
    • Automatic Network Tokenization
    • Token Migration Process
  • DISPUTE MANAGEMENT
    • Retrieval Requests & Chargebacks
  • Certification
    • Partner Certification
  • Data Sharing
    • Secure Data Sharing with PayEngine
  • eCommerce Integration
    • PayEngine Payment Gateway for WooCommerce
Powered by GitBook
On this page
  • 1. Onboarding
  • 2. Transactions
  • 3. Batch Settlements
  • 4. Payouts (Funding)
  • 5. Credit Card Form
  • 6. ACH Form
  • 7. Device Management
  • 8. Dispute Management (Contact support to enable)
  • 9. Plaid Connect (Plaid Account Required)
  • 10. Dashboard (Merchant's GMV)
  • 11. Virtual Terminal
  • 12. Merchant Statements
  • 13. Merchant Reports
  • 14. Payment Session and Link
  • 15. Payment page
  • 16. Recurring Payments
  • 17. Gateway Connection
  1. Getting Started

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 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"
    hash="<HMAC>"
    payment-link-id="<Payment Link ID>"
    shouldProcess3ds="true" // Optional. Default is false
    onTransactionEvent="<custom callback function>"
    type="payment-session">
</pay-engine>

b. Payment Link

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

<pay-engine
    id="elementID"
    hash="<HMAC>"
    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>"
    hash="<HMAC>"
    type="payment-link-create">
</pay-engine>

15. Payment page

<pay-engine
    id="elementID"
    merchant-id="<Merchant ID>"
    hash="<HMAC>"
    shouldProcess3ds="true" // Optional. Default is false
    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>

Previous8. Handling Callbacks from Web-ComponentsNext10. Available Webhooks

Last updated 8 days ago

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

Please see for more details

documentation
Gateway Orchestration