Tokenizing a bank card is similar to tokenizing a credit card. The difference is you do not need expiry or CVV information but banking information.

Add Stax.js to your site

Add the following script tag to the head of your HTML file.

<script src="https://staxjs.staxpayments.com/staxjs-captcha.js"></script>

Initialize Stax.js

First, you must know your Web Payments Token (public key) within Stax Pay by navigating to Apps > API Keys.
Initialize your Stax.js instance with the StaxJs class using your website payments token, like in the examples below.

var staxjs = new StaxJs("your_website_payments_token", {});

Insert the Data

To tokenize the bank, 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 Stax.js.

Properties of extraDetails (When tokenizing via Bank)

Field Name	Description	Required
customer_id	It must be a string matching a valid customer_id in 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.	No
firstname	max of 50 characters	Yes
lastname	max of 50 characters	Yes
phone	must be at least ten characters	No
email	must be a valid email. Receipts will be sent here automatically if the `send_receipt` flag is set to `true`.	No
adddress_1	max of 255 characters. This field is required for AVS if the account is configured to perform an AVS check on the street address. Required if customer_id is not passed into details	No*
address_2	max of 255 characters	No
address_city	Required if customer_id is not passed into details, max of 255 characters	No*
address_state	Required if customer_id is not passed into details, max of 2 characters (e.g. FL)	No*
address_country	- character country code (e.g. USA)	No
address_zip	It is not required unless AVS is configured to perform an AVS check on the zip code.	No*
company	String	No
method	“card” or “bank”	Yes
month	A string representing the 2-digit month when the card expires(“05”)	Yes*
year	A string representing the 4-digit year when the card expires (“2020”)	Yes*
match_customer	Boolean. This determines whether or not Stax.js matches the customer to an existing customer based on some combination of the same data sent into the JS request. See the Best Practices: Customer matching section for more details.	No
validate	Determines whether or not Stax.js does client-side validation.	No

The following are specific to accepting a bank tokenization:

Parameter	Required	Description	Type
bank_type	Yes	checking” or “savings	ENUM
bank_holder_type	Yes	personal” or “business	ENUM
bank_account	Yes	The bank account number	String
bank_routing	Yes	The bank routing number (9 digits)	String

Example

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,
  match_customer: false
};

Handling Form Completion

Stax.js has handlers available to check for field input validity. First, we will handle the card_form_uncomplete event, which means that the input within the fields is invalid.

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 tokenizeButton = document.querySelector("#tokenizebutton");
  tokenizeButton.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 tokenizeButton = document.querySelector("#tokenizebutton");
  tokenizeButton.disabled = false;
});

Call the tokenize() method with extraDetails

document.querySelector("#tokenizebutton").onclick = () => {
  staxjs
    .tokenize(extraDetails)
    .then((response) => {
      console.log("payment method object:", response);
      console.log("customer object:", response.customer);
    })
    .catch((err) => {
      console.log("unsuccessful tokenization:", err);
    });
};

Response

{
  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";
}