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-preczn attributes) are prohibited from having id or name attributes 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:

personalChecking

personalSavings

corporateChecking

corporateSavings

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:

🦉

ACH Payment Fields

Open Recipe

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`

ACH PaymentFields Integration

1. Include the client on your page

2. Define the required form and controls

📘
Notes

3. Define the required JavaScript callback function

4. Obtain a payment token

❗️
Public Key Authentication

PaymentFields Data Flow

👍
When properly implemented, your frontend and backend applications never touch any sensitive account data! 🚫 💳

Use your token to process a payment

Using with a Content Security Policy

1. Include the client on your page

2. Define the required form and controls

📘Notes

3. Define the required JavaScript callback function

4. Obtain a payment token

❗️Public Key Authentication

PaymentFields Data Flow

👍When properly implemented, your frontend and backend applications never touch any sensitive account data! 🚫 💳

Use your token to process a payment

Using with a Content Security Policy

📘
Notes

❗️
Public Key Authentication

👍
When properly implemented, your frontend and backend applications never touch any sensitive account data! 🚫 💳