This bank account form makes it easy for you to collect bank account card data and submitting it to PCI Vault without touching your own servers. This form can be used to easily become PCI-compliant.
You can use the form by adding ach_form.js and ach_form.css to your page, and calling
window.ach_form() from your own javascript: Here's a quick example:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://api.pcivault.io/ach/ach_form.css" />
<script src="https://api.pcivault.io/ach/ach_form.js"></script>
</head>
<body>
<div id="ach_form"></div>
<script defer>
window.ach_form(document.getElementById("ach_form"), {
submit_secret: "your_secret_here",
submit_url: "/v1/capture/demo",
})
</script>
</body>
</html>
The first argument to the ach_form method is the DOM element where you want to mount
the form. The second argument is a settings object, of which submit_secret
and submit_url is required. These two values can be obtained by making a POST request
to /v1/capture on the PCI Vault API.
Required. This is the secret associated to the capture endpoint that was created through our API.
Required. The capture endpoint to use. The format must be /v1/capture/{unique_endpoint_name}.
Optional, default: false.
Set this option to true to send card data to the development sandbox rather than the production system.
Please note that all data on the development sandbox is made unavailable on the first of every month.
Optional, default: () => {}. A javascript function to call if the card was successfully
submitted. The function will be invoked with two arguments.
The first argument is the result
from PCI Vault in a JSON object. The result typically
looks like this:
{
"user": "DDD1",
"token": "63eb17a9e5561ba4efd655c2ccf16e4595bc605b3602b7fb59d8ef6d0d7f2c0c",
"reference": "DD0137EM"
}
Optional, default: () => {}. A javascript function to call if submission failed.
The function will be invoked with two arguments.
The first argument is an object which contains the HTTP error code and the response body of the HTTP request.
For example:
{
"code": 400,
"data": {
"error": "Descriptive Error Message."
}
}
Optional, default: {}. A javascript object that will be submitted along with the
payment card data. The following fields of this object will be overwritten by form input:
card_number, card_holder, cvv, expiry,
expiry_year, expiry_month, card_type, last_four.
If extra_data is not an object, the submission behaviour will be undefined.
Optional, default: false. Setting this option to true will disable keyboard input
for the routing number and account number fields.
Instead, a randomised keypad will be displayed on the screen for the user to input these fields with the
mouse.
This is handy for preventing keylogger exploits.
Optional, default: {}. A javascript object, specifying which fields to validate or display.
For example:
{
account_holder: {
visible: false
},
account_number: {
validate: false
}
}
account_holder,
account_number,
account_type,
and routing_number.
Each of these keys must have an object value with validate and/or visible as keys
containing true or false as values.
Unspecified, undefined, or null keys will be overridden by true values.
Invisible fields will not be validated.