React Guide for Fraud Buster Client Integration

Overview

Welcome to the React integration guide for the Fraud Buster Client. This guide walks you through the steps to set up and integrate Hive Forensics AI’s Fraud Buster API into your React application using the official fraud-buster-client package.

Prerequisites

Before proceeding, ensure you have the following:

  • Node.js installed (LTS recommended).
  • Basic knowledge of React and JavaScript/ES6.
  • An API key provided by Hive Forensics AI.
  • A code editor (e.g., VSCode).

Setup Instructions

Step 1: Create a React Application

If you don’t already have a React project, create one using Create React App:

npx create-react-app fraud-buster-demo
cd fraud-buster-demo

Step 2: Install the Fraud Buster Client

Install the fraud-buster-client package using npm:

npm install fraud-buster-client

Or, if you use yarn:

yarn add fraud-buster-client

Step 3: Configure Environment Variables

  1. Create a .env file in the root directory of your React project:
touch .env
  1. Add the following variables to the .env file:
REACT_APP_FRAUD_BUSTER_URL=http://localhost:8000/api/transaction
REACT_APP_API_KEY=your-api-key-here

Note: Environment variables in React must be prefixed with REACT_APP_.
Ensure your .env file is not committed to version control by adding it to .gitignore.

Step 4: Usage in React

Import and Initialize the Client

import FraudBusterClient from 'fraud-buster-client';

const fraudClient = new FraudBusterClient({
  apiKey: process.env.REACT_APP_API_KEY,
});

Example Component

import React, { useEffect } from 'react';
import FraudBusterClient from 'fraud-buster-client';

const App = () => {
  useEffect(() => {
    const runTest = async () => {
      try {
        // Initialize the client
        const fraudClient = new FraudBusterClient({
          apiKey: process.env.REACT_APP_API_KEY,
        });

        // Sample transaction data
        const transactionData = {
          product: "Rolex Watch",
          amount: 9500,
          location: "Florida",
          time: "2024-03-04T10:30:00Z",
          customerProfile: "Tech Enthusiast",
          onlinePurchase: true,
          paymentMethod: "Amex",
          shippingAddress: "PO BOX 8877 Los Angeles CA 90210",
          billingAddress: "2525 SW 33 Ave Miami Florida 33155",
          customerEmail: "sam@protonmail.com",
          customerName: "Steven Smith",
          isVPN: false,
          clientBrowser: "Chrome",
          deviceType: "Desktop",
          ipAddress: "352.168.1.186",
          deviceFingerprint: "abcd1234efgh5678",
          transactionFrequency: 2,
          accountAge: 365,
          emailDomain: "protonmail.com",
          addressMismatch: true,
          twoFactorAuth: false,
          referralSource: "Google Search",
          proxyOrVPN: true,
          orderQuantity: 1,
          strictness: 50
        };

        // Send the transaction data to the Fraud Buster API
        const response = await fraudClient.evaluateTransaction(transactionData);
        console.log("Fraud Assessment Result:", response);
      } catch (error) {
        console.error("Error:", error.message);
      }
    };

    runTest();
  }, []);

  return <h1>Fraud Buster Client Test</h1>;
};

export default App;

Step 5: Start the Development Server

Run the React application:

npm start

Open your browser at http://localhost:3000 to see the results in your browser’s console.

Response Format

A typical API response looks like this:

{
  "transactionId": "821c09c1-fdaa-4199-b3ea-c4b715f8a150",
  "ConfidenceLevel": "Medium",
  "Result": "Failed"
}

Risk Level Definitions

Risk LevelDescription
0Critical Risk - Immediate Failure
1High Risk - Manual Verification Required
2Failed
3Monitor Closely - Review Logs
4Low Risk - Auto Approved
5Safe Zone - Pass
6Caution - Review Recommended
7Additional Verification Needed (Fallback)

Additional Information

Handling Errors

The Fraud Buster Client includes built-in error handling. If an error occurs during the request, it throws an exception that you can catch and handle gracefully.

Example:

try {
  const response = await fraudClient.evaluateTransaction(transactionData);
} catch (error) {
  console.error("Error:", error.message);
}

Production Builds

When deploying the application, make sure your environment variables are properly configured for the production server. Use:

npm run build

Serve it with:

npx serve -s build

FAQ

For more detailed explanations and troubleshooting, visit our FAQ section.

Summary

  • Installed fraud-buster-client for easy integration.
  • Set up environment variables securely in .env.
  • Demonstrated examples for evaluating transactions in React using the Fraud Buster API.
  • Provided detailed response handling and error management.

For further assistance, check out our official documentation or reach out to our support team.