React

React UI Package for KYC

Installation

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

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

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";

1. Configure the SDK by providing the necessary props:

Read configurable Props before implementation of SDK

const App = () => {
  const sdkConfig = {
    link="841ae640-ce9c-XXXX-XXXX-c6f4f2e68bd5", 
    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"
    },
    onSuccess: (data) => {
      console.log("SDK operation successful:", data);
    },
    onFail: (data) => {
      console.error("SDK operation failed:", data);
    },
  };

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

export default App;

NextJS

nextJSImages should be True for NextJS Applications

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);
    },
  };

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

export default App;

Configurable Props

The <FacekiSDK> component accepts the following configurable props:

• link (required): Generated Link ID from https://docs.faceki.com/api-integration/verification-apis/generate-kyc-link

USE THE KEY "data" to start the SDK, not the URL key

{
    "responseCode": 0,
    "data": "841ae640-ce9c-XXXX-XXXX-c6f4f2e68bd5",  // 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.

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 users to agree to your terms and conditions before they continue verification

• nextJSImages: if you are using SDK on the NEXTJS App, make sure to pass it as True, if you are facing an issue with images.

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-02-28 -- 1.0.4

  • Added Support For NextJS

• 2024-02-28 -- 1.0.3

  • Read Me Updates

• 2024-02-28 -- 1.0.2

  • Added External Terms and Conditions URL.

  • Added Quality Check

  • Added Link Verification Replaced Client ID and Secret For Better Security

Need Support?

Contact us on WhatsApp Click here