@faceki/blaze-kyc-react-sdk-v17

🚀 React NPM Packege For FACEKI Blaze 3.0 🚀

Faceki Blaze Know Your Customer

Faceki React KYC Package - Documentation

Installation

You can install the @faceki/blaze-kyc-react-sdk-v17 package using npm or yarn:

npm install @faceki/blaze-kyc-react-sdk-v17
# or
yarn add @faceki/blaze-kyc-react-sdk-v17

Usage

To use the <FacekiSDK> component in your React application, follow these steps:

1. Import the component at the top of your component file:

import React from "react";
import FacekiSDK from "@faceki/blaze-kyc-react-sdk-v17";

2. Configure the SDK by providing the necessary props:

import { Bounce } from "react-toastify";

const App = () => {
  const sdkConfig = {
    link="your-generated-link", 
    theme: {
      mainColor: "#FF5733",
      secondaryColor: "#2ECC71",
      backgroundColor: "#F4F4F4",
      cardBackgroundColor: "#FFFFFF",
      headingTextColor: "#333333",
      secondaryTextColor: "#777777",
      secondaryBorderColor: "#DDDDDD",
      iconFillColor: "#555555",
      iconBorderColor: "#888888",
      iconTextColor: "#FFFFFF",
      logo: "https://example.com/logo.png",
      disableGuidance: false,
      failedText: "Operation failed. Please try again.",
      successText: "Operation successful!",
      buttonbg: "#F8B427",
      textBg: "#EFEFEF",
      verificationProcessingText: "Processing verification...",
      externalTermsUrl:"https://faceki.com",
      qualityFailureText:"Quality Check Failed! Please retry"
      qualityLoadingText:"Processing"
    },
    onSuccess: (data) => {
      console.log("SDK operation successful:", data);
    },
    onFail: (data) => {
      console.error("SDK operation failed:", data);
    },
    toastProps={{
        position: "top-left",
        autoClose: 5000,
        hideProgressBar: false,
        newestOnTop: true,
        closeOnClick: true,
        rtl: false,
        pauseOnFocusLoss: true,
        draggable: true,
        pauseOnHover: true,
        theme: "light",
        transition: Bounce,
    }}
  };

  return <FacekiSDK {...sdkConfig} />;
};

export default App;

NextJS

nextJSImages should be True for NextJS Applications

import { Bounce } from "react-toastify";
const App = () => {
  const sdkConfig = {
    link="your-generated-link", 
    theme: {
      nextJSImages: true  
    },
    onSuccess: (data) => {
      console.log("SDK operation successful:", data);
    },
    onFail: (data) => {
      console.error("SDK operation failed:", data);
    },
    onQualityCheckFailed (data) => {
      console.error("Quality Check Failure Count:", data);
    },
    toastProps={{
        position: "top-left",
        autoClose: 5000,
        hideProgressBar: false,
        newestOnTop: true,
        closeOnClick: true,
        rtl: false,
        pauseOnFocusLoss: true,
        draggable: true,
        pauseOnHover: true,
        theme: "light",
        transition: Bounce,
      }}
  };

  return <FacekiSDK {...sdkConfig} />;
};

export default App;

Configurable Props

The <FacekiSDK> component accepts the following configurable props:

• link (required): Your generated link Id from https://docs.faceki.com/api-integration/verification-apis/generate-kyc-link

{
    "responseCode": 0,
    "data": "LINKID",  // This Value will be used here
    "url": "Verification URL"
}

.

• theme (optional): An object to customize the visual appearance of the SDK. It includes properties like mainColor, secondaryColor, etc.
• onSuccess (optional): A callback function to be called when the SDK operation is successful. It receives data as a parameter.
• onFail (optional): A callback function to be called when the SDK operation fails. It receives data as a parameter.
• toastProps (optional): Props according to the react-toastify library "https://www.npmjs.com/package/react-toastify"

Theme Configuration

The theme object can be customized with the following properties:

• mainColor: Main color used in the theme.
• secondaryColor: Secondary color for the theme.
• backgroundColor: Background color of the SDK component.
• cardBackgroundColor: Background color of cards within the SDK.
• headingTextColor: Color of text used in headings.
• secondaryTextColor: Color of secondary text.
• secondaryBorderColor: Color of secondary borders.
• iconFillColor: Fill color for icons.
• iconBorderColor: Border color for icons.
• iconTextColor: Color of text within icons.
• logo: URL for a custom logo image.
• disableGuidance: A boolean to disable guidance (if applicable).
• failedText: Text to display on failure.
• successText: Text to display on success.
• buttonbg: Background color for buttons.
• textBg: Background color for text elements.
• verificationProcessingText: Text to display during verification processing.
• externalTermsUrl: External Terms and Conditional URL. If you need user to agree on your terms and condition before they continue verification
• nextJSImages: if you are using SDK on NEXTJS App, make sure to pass it as True, if you are facing issue with images.
• qualityFailureText: Text to display after quality check failed
• qualityLoadingText: Text to display during quality check is in progress.

Example

Here's an example of how you can use the <FacekiSDK> component with minimal configuration:

<FacekiSDK link="your-generated-link" />

For advanced customization, you can provide additional theme properties and callback functions as needed.

Feel free to explore and customize your <FacekiSDK> integration! 👩‍💻🚀

Change Log

• 2024-06-06 -- 1.0.2

  • Added Toast Props for customization

• 2024-06-05 -- 1.0.1

  • Added Quality Failure Count, Icon Fill Fixes, Customize Message for Quality Checks.