Link

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.

  1. Navigate to Omni
  2. Click on Apps
  3. Click on API Keys
  4. 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
email 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.