FRM WIDGET WEB SDK
[](https://www.npmjs.com/package/frm-widget)
[](https://www.npmjs.com/package/frm-widget)
[](https://www.npmjs.com/package/frm-widget)
[](https://www.jsdelivr.com/package/npm/frm-widget)
[](https://www.jsdelivr.com/package/npm/frm-widget)
Fraud Risk Management - Login & Transaction
## 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
```html
```
or use default type (umd file)
```html
```
- **Step 2:** Call `FRMWidget` function to get the fraud risk management service
```js
// 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 :-
```js
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
```bash
npm install frm-widget
or
yarn add frm-widget
```
- **Step 2:** import FRMWidget and its types from the frm-widget package
```tsx
import FRMWidget, { FRMWidgetProps, UserDetails, LogMessage } from "frm-widget";
```
- **Step 3:** Call `FRMWidget` function to get the fraud risk management service
```js
// 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
```ts
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](https://github.com/shankareshBB)
- [@AvinashDhumal](https://github.com/Avi-BB)