Tokenization Forms

Copy

• Copy for LLM

  Copy page as Markdown for LLMs
• View as Markdown

  Open this page as Markdown
• Open in ChatGPT

  Get insights from ChatGPT
• Open in Claude

  Get insights from Claude
• Connect to Cursor

  Install MCP server on Cursor
• Connect to VS Code

  Install MCP server on VS Code

{
  "id": "IDcjL3Jv7S63B859Uwmnek25",
  "created_at": "2025-12-08T17:12:03.33Z",
  "updated_at": "2025-12-08T17:12:03.33Z",
  "application": "APc9vhYcPsRuTSpKD9KpMtPe",
  "entity": {
    "ach_max_transaction_amount": 0,
    "amex_mid": null,
    "annual_card_volume": 0,
    "business_address": null,
    "business_name": null,
    "business_phone": null,
    "business_tax_id_fingerprint": null,
    "business_tax_id_provided": false,
    "business_type": null,
    "default_statement_descriptor": null,
    "discover_mid": null,
    "dob": null,
    "doing_business_as": null,
    "email": null,
    "first_name": null,
    "has_accepted_credit_cards_previously": false,
    "incorporation_date": null,
    "last_name": null,
    "max_transaction_amount": 0,
    "mcc": null,
    "ownership_type": null,
    "personal_address": {
      "line1": null,
      "line2": null,
      "city": null,
      "region": null,
      "postal_code": null,
      "country": null
    },
    "phone": null,
    "principal_percentage_ownership": null,
    "short_business_name": null,
    "tax_authority": null,
    "tax_id_fingerprint": null,
    "tax_id_provided": false,
    "title": null,
    "url": null
  },
  "identity_roles": [
    "BUYER"
  ],
  "tags": {},
  "type": "PERSONAL",
  "_links": {
    "self": {
      "href": "https://finix.sandbox-payments-api.com/identities/IDcjL3Jv7S63B859Uwmnek25"
    },
    "verifications": {
      "href": "https://finix.sandbox-payments-api.com/identities/IDcjL3Jv7S63B859Uwmnek25/verifications"
    },
    "merchants": {
      "href": "https://finix.sandbox-payments-api.com/identities/IDcjL3Jv7S63B859Uwmnek25/merchants"
    },
    "settlements": {
      "href": "https://finix.sandbox-payments-api.com/identities/IDcjL3Jv7S63B859Uwmnek25/settlements"
    },
    "authorizations": {
      "href": "https://finix.sandbox-payments-api.com/identities/IDcjL3Jv7S63B859Uwmnek25/authorizations"
    },
    "transfers": {
      "href": "https://finix.sandbox-payments-api.com/identities/IDcjL3Jv7S63B859Uwmnek25/transfers"
    },
    "payment_instruments": {
      "href": "https://finix.sandbox-payments-api.com/identities/IDcjL3Jv7S63B859Uwmnek25/payment_instruments"
    },
    "associated_identities": {
      "href": "https://finix.sandbox-payments-api.com/identities/IDcjL3Jv7S63B859Uwmnek25/associated_identities"
    },
    "disputes": {
      "href": "https://finix.sandbox-payments-api.com/identities/IDcjL3Jv7S63B859Uwmnek25/disputes"
    },
    "application": {
      "href": "https://finix.sandbox-payments-api.com/applications/APc9vhYcPsRuTSpKD9KpMtPe"
    }
  }
}

{
  "id": "PImmCg3Po7oNi7jaZcXhfkEu",
  "created_at": "2022-10-10T05:32:17.78Z",
  "updated_at": "2022-10-10T05:32:17.78Z",
  "account_updater_enabled": false,
  "application": "APgPDQrLD52TYvqazjHJJchM",
  "created_via": "API",
  "currency": "USD",
  "enabled": true,
  "fingerprint": "FPRiCenDk2SoRng7WjQTr7RJY",
  "identity": "IDgWxBhfGYLLdkhxx2ddYf9K",
  "instrument_type": "PAYMENT_CARD",
  "address": {
    "line1": "900 Metro Center Blv",
    "line2": null,
    "city": "San Francisco",
    "region": "CA",
    "postal_code": "94404",
    "country": "USA"
  },
  "address_verification": "UNKNOWN",
  "bin": "520082",
  "brand": "MASTERCARD",
  "card_type": "DEBIT",
  "expiration_month": 12,
  "expiration_year": 2029,
  "issuer_country": "NON_USA",
  "last_four": "8210",
  "name": "Amy White",
  "network_token_enabled": false,
  "network_token_state": "NOT_ENABLED",
  "security_code_verification": "UNKNOWN",
  "tags": {
    "card_name": "Business Card"
  },
  "type": "PAYMENT_CARD",
  "_links": {
    "self": {
      "href": "https://finix.sandbox-payments-api.com/payment_instruments/PImmCg3Po7oNi7jaZcXhfkEu"
    },
    "authorizations": {
      "href": "https://finix.sandbox-payments-api.com/payment_instruments/PImmCg3Po7oNi7jaZcXhfkEu/authorizations"
    },
    "transfers": {
      "href": "https://finix.sandbox-payments-api.com/payment_instruments/PImmCg3Po7oNi7jaZcXhfkEu/transfers"
    },
    "verifications": {
      "href": "https://finix.sandbox-payments-api.com/payment_instruments/PImmCg3Po7oNi7jaZcXhfkEu/verifications"
    },
    "application": {
      "href": "https://finix.sandbox-payments-api.com/applications/APgPDQrLD52TYvqazjHJJchM"
    },
    "identity": {
      "href": "https://finix.sandbox-payments-api.com/identities/IDgWxBhfGYLLdkhxx2ddYf9K"
    },
    "updates": {
      "href": "https://finix.sandbox-payments-api.com/payment_instruments/PImmCg3Po7oNi7jaZcXhfkEu/updates"
    }
  }
}

document.addEventListener("DOMContentLoaded", () => {
  Finix.PaymentForm(
    "finix-form",
    "sandbox",
    "APgPDQrLD52TYvqazjHJJchM",
    {
      onSubmit(error, response) {
        if (error) {
          console.error(error);
          alert("Error creating token");
          return;
        }
        const tokenId = response?.data?.id;
        alert("Your token ID is: " + tokenId);
        console.log("Token Response:", response);
      },
    }
  );
});

document.addEventListener("DOMContentLoaded", () => {
  const submitElement = document.getElementById("submit");

  const form = Finix.PaymentForm(
    "finix-form",
    "sandbox",
    "APgPDQrLD52TYvqazjHJJchM",
    {
      onUpdate: function(state, binInformation, hasErrors) {
        submitElement.disabled = hasErrors;
      }
    }
  );

  submitElement.addEventListener("click", function() {
    form.submit(function(error, response) {
      if (error) {
        console.error(error);
        alert("Error creating token");
        return;
      }
      const tokenId = response?.data?.id;
      alert("Your token ID is: " + tokenId);
      console.log("Token Response:", response);
    });
  });
});

import React, { useEffect } from 'https://esm.sh/react@18.2.0';
import ReactDOM from 'https://esm.sh/react-dom@18.2.0';

const FinixForm = () => {
  useEffect(() => {
    // Create finix.js V2 Payment Form
    const form = Finix.PaymentForm(
      'form',
      'sandbox',
      'APgPDQrLD52TYvqazjHJJchM',
      {
        showAddress: true,
        // onSubmit callback automatically creates a submit button
        onSubmit: function (error, response) {
          if (error) {
            console.error("Tokenization error:", error);
            return;
          }
          // get token ID from response
          const tokenData = response.data || {};
          const token = tokenData.id;
          alert("Your token ID is: " + token);
        },
      }
    );
  }, []);

  return React.createElement('div', null, [
    React.createElement('h2', { key: 'header' }, 'Finix Payment Form Demo'),
    React.createElement('div', { id: 'form', key: 'form' })
  ]);
};

ReactDOM.render(React.createElement(FinixForm), document.getElementById('app'));

document.addEventListener("DOMContentLoaded", () => {

  const options = {
    // ============================================================
    // PAYMENT METHOD CONFIGURATION
    // ============================================================

    // Specify which payment methods to allow
    // Options: ["card", "bank"], ["card"], or ["bank"]
    // Default: ["card", "bank"]
    // paymentMethods: ["card", "bank"],

    // ============================================================
    // ADDRESS FIELDS
    // ============================================================

    // Show address fields in the form
    // Default: false
    showAddress: true,

    // ============================================================
    // LABELS
    // ============================================================

    // Show labels above each input field
    // Default: true
    showLabels: true,

    // Custom labels for each field
    // Card fields: card_holder_name, number, expiration_date, security_code
    // Bank fields: account_holder_name, account_number, bank_code, account_type
    // Address fields: address_line1, address_line2, address_city, address_region, address_postal_code, address_country
    labels: {
      card_holder_name: "Full Name",
      // number: "Card Number",
      // expiration_date: "Expiration Date",
      // security_code: "CVV",
      // account_holder_name: "Account Holder Name",
      // account_number: "Account Number",
      // bank_code: "Routing Number",
      // account_type: "Account Type",
      // address_line1: "Street Address",
      // address_line2: "Apt, Suite, etc.",
      // address_city: "City",
      // address_region: "State/Region",
      // address_postal_code: "Postal Code",
      // address_country: "Country",
    },

    // ============================================================
    // PLACEHOLDERS
    // ============================================================

    // Show placeholder text in input fields
    // Default: true
    showPlaceholders: true,

    // Custom placeholders for each field
    // Card fields: card_holder_name, number, expiration_date, security_code
    // Bank fields: account_holder_name, account_number, bank_code, account_type
    // Address fields: address_line1, address_line2, address_city, address_region, address_postal_code, address_country
    placeholders: {
      card_holder_name: "Full Name",
      // number: "4111 1111 1111 1111",
      // expiration_date: "MM/YY",
      // security_code: "123",
      // account_holder_name: "John Doe",
      // account_number: "000123456789",
      // bank_code: "110000000",
      // account_type: "Checking",
      // address_line1: "123 Main St",
      // address_line2: "Apt 4B",
      // address_city: "San Francisco",
      // address_region: "CA",
      // address_postal_code: "94102",
      // address_country: "USA",
    },

    // ============================================================
    // DEFAULT VALUES
    // ============================================================

    // Pre-fill values for fields (cannot pre-fill card/bank numbers due to PCI compliance)
    // Supported: card_holder_name, account_holder_name, address_line1, address_line2,
    //            address_city, address_region, address_postal_code, address_country
    defaultValues: {
      // card_holder_name: "John Doe",
      // account_holder_name: "John Doe",
      // address_line1: "123 Main St",
      // address_line2: "Apt 4B",
      // address_city: "San Francisco",
      // address_region: "CA",
      // address_postal_code: "94102",
      // address_country: "USA",
    },

    // ============================================================
    // HIDE FIELDS
    // ============================================================

    // Hide specific fields that you do not need
    // Note: "number" and "expiration_date" cannot be hidden as they are required by networks
    // Supported: card_holder_name, security_code, account_holder_name, address_line1,
    //            address_line2, address_city, address_region, address_postal_code, address_country
    hideFields: [
      // "card_holder_name",
      // "security_code",
      // "account_holder_name",
      // "address_line1",
      // "address_line2",
      // "address_city",
      // "address_region",
      // "address_postal_code",
      // "address_country",
    ],

    // ============================================================
    // REQUIRED FIELDS
    // ============================================================

    // Require specific fields that are not required by default
    // Supported: card_holder_name, account_holder_name, address_line1, address_line2,
    //            address_city, address_region, address_postal_code, address_country
    requiredFields: [
      "card_holder_name",
      "address_line1",
      "address_city",
      "address_region",
      // "address_state",  // alias for address_region
      "address_country",
      "address_postal_code",
    ],

    // ============================================================
    // SECURITY & VALIDATION OPTIONS
    // ============================================================

    // Require security code (CVV/CVC) for card payments
    // Default: true
    // requiredSecurityCode: true,

    // Show double confirmation input for bank account numbers
    // Validates both entries match to reduce incorrect account numbers
    // Default: true
    // confirmAccountNumber: true,

    // Hide warning messages for non-standard but valid card numbers
    // Default: true
    // hidePotentialIssueMessages: true,

    // ============================================================
    // ERROR MESSAGES
    // ============================================================

    // Hide input error messages entirely
    // Default: false
    hideErrorMessages: false,

    // Custom error messages for each field
    // Card fields: card_holder_name, number, expiration_date, security_code
    // Bank fields: account_holder_name, account_number, bank_code, account_type
    // Address fields: address_line1, address_line2, address_city, address_region, address_postal_code, address_country
    errorMessages: {
      card_holder_name: "Please enter a valid name",
      // number: "Please enter a valid card number",
      // expiration_date: "Please enter a valid expiration date",
      // security_code: "Please enter a valid security code",
      // account_holder_name: "Please enter the account holder name",
      // account_number: "Please enter a valid account number",
      // bank_code: "Please enter a valid routing number",
      // account_type: "Please select an account type",
      // address_line1: "Please enter a valid street address",
      // address_line2: "Please enter a valid address line 2",
      address_city: "Please enter a valid city",
      // address_region: "Please enter a valid state/region",
      // address_postal_code: "Please enter a valid postal code",
      // address_country: "Please enter a valid country",
    },

    // ============================================================
    // THEME & APPEARANCE
    // ============================================================

    // Set the visual theme of the form
    // Options: finix, amethyst, sapphire, topaz, ruby, emerald, midnight, elevated
    // Default: "finix"
    // theme: "finix",

    // Enable dark mode styling for the payment form
    // Default: false
    // enableDarkMode: false,

    // ============================================================
    // PLAID SETTINGS (for bank account linking)
    // ============================================================

    // Configure Plaid bank account settings
    // plaidLinkSettings: {
    //   displayName: "Your Merchant Name",  // Name shown at top of Plaid modal
    //   language: "en",                      // Language for Plaid experience (default: "en")
    //   countries: ["USA", "CAN"],           // ISO-3 country codes (default: ["USA", "CAN"])
    // },

    // ============================================================
    // CUSTOM STYLES
    // ============================================================

    // Custom styles for the form inputs
    styles: {
      // Default styling for all fields
      default: {
        color: "#000",
        border: "1px solid #CCCDCF",
        borderRadius: "8px",
        padding: "8px 16px",
        fontFamily: "Noto Sans Thaana",
        fontSize: "16px",
        boxShadow: "0px 1px 1px rgba(0, 0, 0, 0.03), 0px 2px 4px rgba(0, 0, 0, 0.03)",
      },
      // Styling when the field is valid
      success: {
        // color: "#5cb85c",
        // border: "1px solid #5cb85c",
      },
      // Styling when the field has errors
      error: {
        // color: "#d9534f",
        border: "1px solid rgba(255,0,0,0.3)",
      },
    },

    // ============================================================
    // CUSTOM FONTS
    // ============================================================

    // Custom fonts for input text (requires HTTPS hosted font file)
    // To use custom fonts, set the fontFamily in the styles.default above
    fonts: [
      {
        fontFamily: "Noto Sans Thaana",
        url: "https://fonts.cdnfonts.com/s/107457/NotoSansThaana[wght].woff",
        format: "woff",
      },
    ],

    // ============================================================
    // SUBMIT BUTTON
    // ============================================================

    // Label for the auto-generated submit button
    submitLabel: "Create Token",

    // ============================================================
    // CALLBACK FUNCTIONS
    // ============================================================

    // Callback function that triggers after the form has loaded
    onLoad: function () {
      console.log("Payment form loaded");
    },

    // Callback function that triggers when form state changes
    // Parameters:
    //   state: Object with form metadata (valid, dirty, pristine - no PI data exposed)
    //   binInformation: Object with BIN data (BIN number, card brand)
    //   hasErrors: Boolean indicating if form has errors (useful for custom submit buttons)
    onUpdate: function (state, binInformation, hasErrors) {
      // console.log("Form state:", state);
      // console.log("BIN info:", binInformation);
      // console.log("Has errors:", hasErrors);
    },

    // Callback function for form submission
    // Adding this option automatically creates a submit button
    // Parameters:
    //   error: Error object if submission failed, null otherwise
    //   response: Response object containing token data
    onSubmit: function (error, response) {
      if (error) {
        console.error(error);
        alert("Error creating token");
        return;
      }
      const tokenId = response?.data?.id;
      alert("Your token ID is: " + tokenId);
      console.log("Token Response:", response);
    },
  };

  // ============================================================
  // INITIALIZE THE PAYMENT FORM
  // ============================================================

  // Create finix.js V2 Payment Form
  // Parameters:
  //   element: The ID of the HTML element where the form will render
  //   environment: "sandbox" or "live"
  //   applicationId: Your Finix application ID
  //   options: Configuration options object
  Finix.PaymentForm(
    "form-element",
    "sandbox",
    "APgPDQrLD52TYvqazjHJJchM",
    options
  );
});