Overview

The FRM-widget is designed to provide a secure and efficient way to handle user authentication and transaction verification using FRM analysis. It supports login and transaction processes with detailed logging and error handling.

Features

• Fraud Risk Management: Dynamically adjusts security measures based on the assessed risk level.
• Login and Transaction Support: Handles both user login and transaction verification.
• Detailed Logging: Provides comprehensive logs for actions and errors.
• Configurable: Easily integrate and configure with your existing systems.

Installation :-

i). Install at HTML pages

• Step 1: Be ready with HTML form and import the package

<script type="module">
  // import frm package
  import FRMWidget from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
</script>

or use default type (umd file)

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.min.js"></script>

• Step 2: Call FRMWidget function to get the fraud risk management service

   // form submission with FRMWidget for validating user
   FRMWidget({
      baseUrl: string,
      ipInfoToken:  string,
      type: string, // login | transaction | updateMFAStatus
      userDetails: {
        userId: string,
        secret: string,
        accountId: string | null,
      },
      trackingId?:string; // if mfaType is custom then send trackingId
      paymentMode?: 'NETBANKING' | 'UPI' | 'CARD' | 'ATM' | '', // if type is transaction then send paymentMode
       transactionDetails?:TransactionDetails; // if type is transaction then send transactionDetails
      onMessage: (arg: LogMessage) => void;
      jwt?: undefined | string;
      mfaType?: 'default' | 'custom', // optional for custom mfa
      mfaStatus?: 'pending' | 'success' | 'decline' | 'failed' // optional for custom mfa
      pageLoadTime: number,
      onMessage: (arg) => { }
   });

Note: If FRMWidget function is called in form, make sure you prevent default value.

Example :-

document.addEventListener("DOMContentLoaded", function () {
   document.getElementById("myForm").addEventListener("submit", function (event) {
      // Prevent the default form submission behavior
      event.preventDefault();
      ...
      // call widget
      FRMWidget({
         ...
      });
   }
}

ii). Install at package.json

• Step 1: Be ready with terminal and install the package

npm install frm-widget

or

yarn add frm-widget

• Step 2: import FRMWidget and its types from the frm-widget package

import FRMWidget, { FRMWidgetProps, UserDetails, LogMessage } from "frm-widget";

• Step 3: Call FRMWidget function to get the fraud risk management service

// form submission with FRMWidget for validating user
FRMWidget({
  baseUrl: string,
  ipInfoToken: string,
  type: string, // login | transaction | updateMFAStatus
  userDetails: {
    userId: string,
    secret: string,
    accountId: string | null,
  },
  pageLoadTime: number,
  trackingId?: string, // if mfaType is custom then send trackingId
  paymentMode?: "NETBANKING" | "UPI" | "CARD" | "ATM" | "", // if type is transaction then send paymentMode
  transactionDetails?: {}, // if type is transaction then send transactionDetails
  onMessage: (arg) => {
    if (arg.code === 1) {
      // alert success
    } else if (arg.code === 0) {
      // alert failed
    } else {
      // observe the log messages
    }
  },

});

| Key | Required | value | Description | | ---------------------- | :------: | :------: | :------------------------------------------------------------------------------------------------------------- | | baseUrl | true | string | It is used call the back office server base URL. | | ipInfoToken | true | string | It is used to location details api at ipInfo. | | type | true | string | It is used send what type of method going to be used. only login or transaction or updateMFAStatus is allowed | | userDetails | true | object | It is used to get the user details, given in the form and from axiom protect dashboard. | | onMessage | true | function | It is used get the response with more details. | | pageLoadTime | false | number | It is used pass the page loaded time by Date.now(). If not provided widget will take its initialized time. | | transactionDetails | false | object | Its required when type is transaction containing transaction details. | | trackingId | false | string | It is used to track the user for custom mfa type. | | paymentMode | false | string | It is used to send the payment mode for transaction type. | | mfaType | false | string | It is used to send the mfa type, default or custom. | | mfaStatus | false | string | It is used to send the mfa status, pending, success, decline or failed. |

Types

type FRMWidgetProps = {
  baseUrl: string;
  ipInfoToken: string;
  type: "login" | "transaction";
  userDetails: UserDetails;
  onMessage: (arg: LogMessage) => void;
  pageLoadTime?: number;
  trackingId?: string; // if mfaType is custom then send trackingId
  paymentMode?: "NETBANKING" | "UPI" | "CARD" | "ATM" | ""; // if type is transaction then send paymentMode
  transactionDetails?: {}; // if type is transaction then send transactionDetails
  jwt?: string; // optional for custom mfa
  mfaType?: "default" | "custom"; // optional for custom mfa
  mfaStatus?: "pending" | "success" | "decline" | "failed"; // optional for custom mfa
};

type UserDetails = {
  userId: string;
  secret: string;
  accountId?: string | null;
};

type TransactionDetails = {
  transaction_amount?: string;
  transaction_type?: string;
  recipient_details?: string;
  recipient_bank_name?: string;
  transaction_category?: string;
  transaction_currency?: string;
  transaction_frequency?: string;
  recipient_account_no?: string | number;
  transactionId?: string;
  wallet_id?: string;
  payment_mode?: string;
  upi_id?: string;
  recipient_ifsc_code?: string;
  ifsc_code?: string;
  sender_upi_id?: string;
  account_no?: number | string;
  bank_name?: number | string;
  debit_card_no?: number | string;
  debit_card_expiry?: string;
  debit_card_cvv?: number | string;
  credit_card_no?: number | string;
  credit_card_expiry?: string;
  credit_card_cvv?: number | string;
};

type LogMessage = {
  action: string;
  message: string;
  code: number;
  data?: unknown;
};

Logging

Use the onMessage callback to receive detailed logs about the operations. The logs include an action, message, code, and optional data.

Response Codes

The widget provides response codes to indicate the status of operations(check for code):

• -1: Configuration error message
• 0: Failed message
• 1: Success message
• 2: Information message

Authors

• @Shankaresh
• @AvinashDhumal