# React

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

2. 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?&#x20;

Contact us on WhatsApp [Click here ](https://wa.me/+13026131330)<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.faceki.com/web-sdk/react.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.