React

React UI Package for KYC

Installation

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

npm install @faceki/react-kyc-sdk
# or
yarn add @faceki/react-kyc-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/react-kyc-sdk";

2. Configure the SDK by providing the necessary props:

const App = () => {
  const sdkConfig = {
    clientId: "your-client-id",
    clientSecret: "your-client-secret",
    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...",
    },
    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:

• clientId (required): Your client ID for authentication.

• clientSecret (required): Your client secret for authentication.

• 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.

Example

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

<FacekiSDK clientId="your-client-id" clientSecret="your-client-secret" />

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