Link

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, keeping your software fully PCI compliant.


Capabilities

Payments

Fast Track your payments integration with simple one-time payments using Fattmerchant.js. These payments will create customers, payment methods, invoices and transaction objects in the Omni platform.

How it works

  1. Setup and Initialize Fattmerchant.js
  2. Call the pay() method with information about the payment including customer, payment method, invoice, and transaction details.
  3. Send an automatic receipt by passing send_receipt: true into the pay() method.

Tokenization

Offer your customers the ability to store payment methods for future use within the Omni platform. By using these tokens instead of card and bank information, you do not have to worry about sending sensitive card information to your server.

How it works

  1. Setup and Initialize Fattmerchant.js
  2. Pass the customer and payment method data into the tokenize() method. This creates a Payment Method in Omni and returns the id.
  3. This Payment Method id is now stored and ready to be used to make a payment.

Setup Fattmerchant.js

1. Add Fattmerchant.js to your website or checkout page by adding 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

This step generates the secure iFrame for credit card number and cvv fields.

First, you will need to know your Web Payments Token (public key). You will need an Omni sandbox 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.

Credit Card: Passing the number and cvv into the instance of fattjs is what generates the secure iFrame around these two fields, keeping sensitive card information from touching your servers.

var fattjs = new FattJs( "your_website_payments_token" , {
  number: {
    id: 'card-number',     // the html id of the div you want to contain the credit card number field
    placeholder: '0000 0000 0000 0000',    // the placeholder the field should contain
    style: 'height: 30px; width: 100%; font-size: 15px;',    // the style to apply to the field
    type: 'text'    // the input type (optional)
    format: 'prettyFormat'    // the formatting of the CC number (prettyFormat || plainFormat || maskedFormat)
  },
  cvv: {
    id: 'card-cvv',    // the html id of the div you want to contain the cvv field
    placeholder: 'CVV',    // the placeholder the field should contain
    style: 'height: 30px; width: 100%; font-size: 15px;',    // the style to apply to the field
    type: 'text'    // the input type (optional)
  }
});

Bank: When creating our fattjs instance for a bank account, only the website payments token is needed.

var fattjs = new FattJs("your_website_payments_token", {});

3. Load the Credit Card fields

Now that we’ve initialized our instance of FattJs and made the elements that will contain the credit card fields, we can tell FattJs to load in those credit card fields.The showCardForm function returns a Promise which lets us handle the completion of the credit card fields loading in.

For Bank Accounts, skip to Step 4

fattJs
  .showCardForm()
  .then((handler) => {
    console.log("form was loaded");
    // for quick testing, you can set a test number and test cvv here
    // handler.setTestPan("4111111111111111");
    // handler.setTestCvv("123");
  })
  .catch((err) => {
    console.log("there was an error loading the form: ", err);
  });

Handling Form Completion

Fattmerchant.js has a few handlers available to check for field input validity. Firstly, we’ll handle the card_form_uncomplete event, which means that the input within the fields isn’t valid (yet!).

merchant.on("card_form_uncomplete", (message) => {
  // the customer hasn't quite finished filling in the fields
  // or the input in the fields are invalid
  console.log(message);
  // activate pay button
  var payButton = document.querySelector("#paybutton");
  payButton.disabled = true;
});

Next, we’ll handle the card_form_complete event, which means that the input within the fields is complete and valid.

merchant.on("card_form_complete", (message) => {
  // the customer has finished filling in the fields, and they're valid!
  // Nice!
  console.log(message);
  // activate pay button
  var payButton = document.querySelector("#paybutton");
  payButton.disabled = false;
});

4. Make a Payment or Tokenize a Payment Method

Now that you have set up Fattmerchant.js and generated your credit card fields, if applicable, you can gather the remaining information needed and either make a Simple Payment, or Tokenize and store a payment method on file for future use.

Make a Payment with Fattmerchant.js

Pay with Card Pay with Bank

Tokenize a Payment Method with Fattmerchant.js

Tokenize a Card Tokenize a Bank