frm-widget
Version:
An embeddable Fraud Risk Management - Login & Transaction
278 lines (223 loc) • 10 kB
Markdown
<!--
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level `parserOptions` property like this:
```js
export default tseslint.config({
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
})
```
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
```js
// eslint.config.js
import react from 'eslint-plugin-react'
export default tseslint.config({
// Set the react version
settings: { react: { version: '18.3' } },
plugins: {
// Add the react plugin
react,
},
rules: {
// other rules...
// Enable its recommended rules
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
},
})
``` -->
<center>
<h1> FRM WIDGET WEB SDK </h1>
[](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)
<p> Fraud Risk Management - Login & Transaction </p>
</center>
## 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
<script type="module">
// import frm package
import FRMWidget from "https://cdn.jsdelivr.net/npm/frm-widget@3.0.0/+esm";
</script>
```
or use default type (umd file)
```html
<script src="https://cdn.jsdelivr.net/npm/frm-widget@3.0.0/dist/index.umd.min.js"></script>
```
- **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({
...
});
}
}
```
- **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._ |
```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;
};
```
Use the **`onMessage`** callback to receive detailed logs about the operations. The logs include an action, message, code, and optional data.
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)