Tokenize with a Bank - Fattmerchant.js
Fattmerchant.js is Fattmerchant’s browser-side JavaScript library, used to tokenize and send sensitive bank and card information directly from a user’s browser to Fattmerchant’s servers. When you tokenize a bank, you are securely storing that card on file for future use.
See the Pen Fattmerchant.js Demo - ACH by Fattmerchant (@FattLabs) on CodePen.
1. Add Fattmerchant.js to your website or checkout page.
Add the following script tag to the head of your HTML file.
<script src="https://fattjs.fattpay.com/js/fattmerchant.js"></script>
2. Initialize Fattmerchant.js
First, you will need to know your Web Payments Token (public key). You will need an Omni sandbox account to complete this step. If you do not have a sandbox, click one of the buttons below.
Developers Click Here Partner Developers Click Here
Once you have an Omni sandbox, complete the following steps.
- Navigate to Omni
- Click on Apps
- Click on API Keys
- Copy your website payments token
Initialize your fattjs instance with the FattJs class using your website payments token, like in the examples below.
var fattjs = new FattJs("your_website_payments_token", {});
3. Define additional properties
We are getting ready to tokenize the bank, but we need to gather some additional fields to send into the request to tokenize. We will put together an object called extraDetails which will include - at a minimum - the required fields for creating a tokenized bank account with Fattmerchant.js.
Properties of extraDetails (When tokenizing via Bank)
Pay special attention to properties highlighted in bold which may be required
| customer_id | not required, must be a string matching a valid customer_id which belongs to your merchant account. If supplied, a new customer will not be created or matched based on values. Instead, the supplied ID will be assigned this new payment method and transaction. If a customer_id is supplied, certain customer fields such as firstname, lastname, phone, all address fields, etc will be ignored |
| firstname | required, max of 50 characters |
| lastname | required, max of 50 characters |
| person_name | required, max of 50 characters, Full name of bank account holder name |
| phone | required if customer_id is not passed into details, must be at least 10 characters |
| not required, must be a valid email. Receipts will be sent here automatically if the `send_receipt` flag is set to `true`. | |
| address_1 | required if customer_id is not passed into details, max of 255 characters. This field is required for AVS if the account is configured to perform an AVS check on street address. |
| address_2 | not required, max of 255 characters |
| address_city | required if customer_id is not passed into details, max of 255 characters |
| address_state | required if customer_id is not passed into details, max of 2 characters (e.g. FL) |
| address_country | not required, 3 character country code (e.g. USA) |
| address_zip | not required unless AVS is configured to perform an AVS check on zip code. |
| company | not required, string |
| method | required, "card" or "bank" |
| bank_name | not required, ex. "Chase" |
| bank_type | required, "checking" or "savings" |
| bank_holder_type | required, "personal" or "business" |
| bank_account | required for bank, string representing the bank account number |
| bank_routing | required for bank, string representing the bank routing number (9 digits) |
| validate | not required, boolean. Determines whether or not Fattmerchant.js does client-side validation. See Validation section for more details. |
Example extraDetails object
const extraDetails = {
firstname: "John",
lastname: "Doe",
person_name: firstName + " " + lastName,
method: "bank",
bank_type: "savings",
bank_name: "Bank INC",
bank_account: "9876543210",
bank_routing: "021000021",
bank_holder_type: "personal",
phone: "5555555555",
address_1: "100 S Orange Ave",
address_2: "Suite 400",
address_city: "Orlando",
address_state: "FL",
address_zip: "32811",
address_country: "USA",
validate: false,
};
4. Call the tokenize() method with extraDetails
document.querySelector("#tokenizebutton").onclick = () => {
fattjs
.tokenize(extraDetails)
.then((response) => {
console.log("payment method object:", response);
console.log("customer object:", response.customer);
})
.catch((err) => {
console.log("unsuccessful tokenization:", err);
});
};
5. View the response
A successful call to the Fattmerchant.js tokenize() method will create a tokenized payment method which is tied to a new or existing customer. If you already had a customer_id and passed it into the request, you already have an understanding of that customer, but if you are letting Fattmerchant.js create a new customer for you when calling tokenize(), you can retrieve the customer_id from the response and, if applicable, correlate it with the customer in your application.
Example Response(payment method object):
{
address_1: "100 S Orange Ave";
address_2: null;
address_city: "Orlando";
address_country: "USA";
address_state: "FL";
address_zip: "32811";
bank_holder_type: "personal";
bank_name: "Bank INC";
bank_type: "savings";
card_exp: null;
card_exp_datetime: null;
card_last_four: "3210;
card_type: null;
created_at: "2020-07-06 16:22:16";
customer: {
address_1: "100 S Orange Ave";
address_2: "";
address_city: "Orlando";
address_country: "USA";
address_state: "FL";
address_zip: "32811";
allow_invoice_credit_card_payments: true;
cc_emails: null;
cc_sms: null;
company: "";
created_at: "2020-07-06 16:22:16";
deleted_at: null;
email: "";
firstname: "Jon";
gravatar: false;
id: "cd10fbd4-199c-4753-8db8-66c4e2c2b4e8";
lastname: "Doe";
notes: null;
options: null;
phone: "111111111111111";
reference: "";
updated_at: "2020-07-06 16:22:16";
}
customer_id: "cd10fbd4-199c-4753-8db8-66c4e2c2b4e8";
has_cvv: false;
id: "2e34394f-5f1d-4ec0-a56d-f669509a5b14"; // payment_method_id
is_default: 0;
is_usable_in_vt: true;
method: "bank";
nickname: "personal savings, Bank INC (ending in: 3210)";
person_name: "Jon Doe";
updated_at: "2020-07-06 16:22:18";
}
Congratulations! You have now successfully created a tokenized payment method using Fattmerchant.js. If you need to implement other payment functionalities, please see the API reference documentation to understand additional payments capabilities.
Additional Payments Capabilities
Get Payment Methods by Customer →
See all payment methods that are associated with a customer.
Charge a Payment Method →
Make a payment using a payment method.
Set up Recurring Payments →
Attach a payment method to our scheduled invoices to set up automatic payments.