Bank Account Web-Component
You can utilize our bank account form component by specifying the pay-engine web component with type bankaccountform and other necessary properties.
1
<pay-engine id="pf-bank-account"
2
type="bankaccountform"
3
merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085"
4
hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></pay-engine>
Copied!
For a walkthrough integration example of this component. You can read more about the PayEngine web-component on https://docs.payengine.co/merchant-onboarding/introduction​

Properties and Styling

Properties
Following are properties that can be set on this web-component. You can set the property via a Javascript object reference, or directly inline as an HTML tag attribute. See the example below:
1
<pay-engine id="pf-bank-account"
2
type="bankaccountform"
3
merchant-id="d8dfafb5-88d6-46c7-ba14-1ff972564085"
4
button-text="Save account"
5
hash="0709c7f107ed6326aaeaa3810330834870591f3924943e7bce66a826ac532045"></pay-engine>
Copied!
Following is a list of applicable properties.
Class
Description
merchant-id
Merchant ID (generated by using create merchant API call)
hash
HMAC generated from merchant-id (see securing embedded UIs section)
button-text
Content of the save button

Events

1
document.getElementById("pf-bank-account")
2
.addEventListener('success', function(event) {
3
const account = event.detail
4
// make payment with bank account
5
})
Copied!
success Callback function is invoked when bank account is successfully linked and tokenized.
Example payload on success event
1
{
2
"message": "Bank account created",
3
"data": {
4
"token": "ba_test_j7YhUwokMcrUjyQZAyFRSNG9",
5
"account_data": {
6
"routing_number": "011401533",
7
"last_4": "1111",
8
"first_name": "John",
9
"last_name": "Doe"
10
}
11
}
12
}
Copied!
error Used to notify any error conditions during the process.
Last modified 1mo ago