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>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>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>14. 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
Last updated