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>

<!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>

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>

<!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>

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 days ago

<!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>

<!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>