ACH PaymentFields Integration
Preczn PaymentFields is a client-side (browser) script which helps reduce the compliance and security scope of your software by eliminating the need for your server-side software to transmit or store payment account data.
The PaymentFields script binds to existing input controls on your payment form and generates a secure single-use token, which you can then safely transmit from your client-side web application to your server-side for use processing a transaction.
1. Include the client on your page
Add the secure, hosted JavaScript reference in the <head> of your page:
<script src="https://api.preczn.com/v1/clients/paymentFields.min.js"></script>
2. Define the required form and controls
Ensure the form containing your payment information input fields is assigned an id attribute:
<form id="paymentForm">
Add the following payment information input fields to your form, or add the their respective data-preczn attributes to your existing input fields:
<select data-preczn="accountType">
<option data-preczn="accountType" value="personalChecking">
Personal Checking
</option>
<option data-preczn="accountType" value="personalSavings">
Personal Savings
</option>
<option data-preczn="accountType" value="corporateChecking">
Corporate Checking
</option>
<option data-preczn="accountType" value="corporateSavings">
Corporate Savings
</option>
</select>
<input type="text" data-preczn="accountNumber" />
<input type="text" data-preczn="routingNumber" />
<input type="text" data-preczn="bankCountry" />
Notes
- PaymentFields form controls (with
data-precznattributes) are prohibited from havingidornameattributes in order to ensure that sensitive payment data is never posted to your servers.- The
data-preczn="accountType"field is expected to be an enumerated string with one of four values:
personalCheckingpersonalSavingscorporateCheckingcorporateSavings- The
data-preczn="accountNumber"field is expected to be 8-12 numeric characters and a valid bank account number.- The
data-preczn="routingNumber"field is expected to be 9 numeric characters and a valid bank routing number.- The
data-preczn="bankCountry"field is expected to be 3 alpha-numeric characters and a valid ISO 3166-1 alpha-3 value.
3. Define the required JavaScript callback function
Define a JavaScript callback function for token results:
var tokenCallback = function(result) {
if (result.errors)
{
// Handle errors
// result.errors is an array of strings
}
else
{
// Utilize the token here
var token = result.token;
}
}
4. Obtain a payment token
Public Key Authentication
Ensure that you're using a public API key with PaymentFields, and not exposing and potentially compromising a sensitive private API key!
Call the getAchToken() function with your public API key, payment form ID, and token callback method:
Preczn.PaymentFields.getAchToken("Your-Public-API-Key", "paymentForm", tokenCallback);
The result object received by your callback method looks like this:
{
"type": "personalChecking",
"accountNumber": "1234",
"routingNumber": "123456789",
"bankCountry": "USA",
"token": "tkn_apkwm89dr8br9zvqw4b3xgktk",
}
{
"errors": [
"Missing form field: accountType",
"Form controls are prohibited from having ID or NAME attributes: cvv"
]
}
Check out the following Recipe for an example implementation:
PaymentFields Data Flow
- Your frontend web application requests a payment token by calling
Preczn.PaymentFields.getAchToken(). - The PaymentFields library securely calls the Preczn API to obtain a payment token.
- The PaymentFields library calls your self-defined callback function with the resulting payment token.
- Your frontend web application sends the payment token along with the rest of your order information to your backend server.
- Your backend service securely sends the transaction request with payment token to the Preczn API and receives the transaction result response.
- Your backend service returns the transaction result and order status to your frontend web application.
When properly implemented, your frontend and backend applications never touch any sensitive account data! 🚫 💳
Use your token to process a payment
You can now use your newly acquired payment token to process a transaction from your server using the Process Transaction endpoint with a Direct API Integration!
Using with a Content Security Policy
If you are using a Content Security Policy to secure your client-side web application, you will need to extend your policy to allow paymentFields.min.js to load and connect to the Preczn API.
Please add the following directives to your content security policy:
| Directive | Value |
|---|---|
script-src | api.preczn.com |
connect-src | api.preczn.com |
Updated 17 days ago