Gatsby Guide for Fraud Buster API Integration


Fraud Buster API Integration in Gatsby


Overview

Welcome to the Gatsby guide for integrating Hive Forensics AI’s Fraud Buster API. This guide walks you through the steps to securely connect and interact with our fraud detection service in your Gatsby application using the fraud-buster-client package.


Prerequisites

Before starting, ensure you have the following:

  • Node.js installed.
  • A working Gatsby project (or follow the steps below to create one).
  • Basic knowledge of Gatsby framework and JavaScript/ES6.
  • An API key provided by Hive Forensics AI.
  • A code editor (e.g., VSCode).

Setup Instructions

Step 1: Create a Gatsby Project

If you don’t already have a Gatsby project, create one using the Gatsby CLI:

npm install -g gatsby-cli
gatsby new 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.development file in the root directory of your Gatsby project:
touch .env.development
  1. Add the following variables to the .env.development file:
GATSBY_FRAUD_BUSTER_URL=http://localhost:8000/api/transaction
GATSBY_FRAUD_BUSTER_API_KEY=your-api-key-here

Note: Environment variables in Gatsby must be prefixed with GATSBY_.
Ensure your .env.* files are not committed to version control by adding them to .gitignore.


Step 4: Usage in Gatsby

Import and Initialize the Client

import FraudBusterClient from 'fraud-buster-client';

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

Example Component

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

const FraudChecker = () => {
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const checkFraud = async () => {
      try {
        // Initialize the Fraud Buster Client
        const fraudClient = new FraudBusterClient({
          apiKey: process.env.GATSBY_FRAUD_BUSTER_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: "18803 SW 92 Ave Miami Florida 33157",
          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 result = await fraudClient.evaluateTransaction(transactionData);
        setResponse(result);
      } catch (err) {
        setError(err.message);
      }
    };

    checkFraud();
  }, []);

  return (
    <div>
      <h1>Fraud Buster API Test</h1>
      {error && <p style={{ color: 'red' }}>Error: {error}</p>}
      {response ? <pre>{JSON.stringify(response, null, 2)}</pre> : 'Checking transaction...'}
    </div>
  );
};

export default FraudChecker;

Step 5: Start the Gatsby Development Server

Run the Gatsby application:

gatsby develop

Open your browser at http://localhost:8000 to see the results in your browser.


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

Error Handling

  • Errors are thrown if the request fails and can be caught using a try-catch block.
  • Use Gatsby’s built-in logging (gatsby develop) for debugging API requests.

Production Builds

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

gatsby build

Serve it with:

gatsby serve

FAQ

For more details and troubleshooting, visit our FAQ section.


Summary

  • Installed fraud-buster-client for easy integration.
  • Set up environment variables securely in .env.development.
  • Demonstrated examples for evaluating transactions in Gatsby 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.