client-verification-trential-sdk-react-test v0.0.12

Installation

npm install client-verification-trential-sdk

This SDK is supported on React (on version 16 and above) and NextJS (13.0.4)

The Vendor Client will hit the following API and send payload to generate a session token

Backend API call

curl --location --request POST '
https://api.trential.dev/verification/api/1.0/transactions/start-group-verification'
\
--header 'x-api-key: TRENTIAL_ORG_API_KEY' \
--header 'Content-Type: application/json' \
--data-raw '{
    "verificationNameList": ["aadhaar","dl","passport"]
}'

Response

{
    "code": 0,
    "message": "Success",
    "data": {
        "transactionId": "660bef7e6bbda02fb731b850",
        "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJvcmd1aWQiOiI2NTk0MGJkYjliMjcxZDdlMTIzYTkwY2MiLCJncm91cFR4bklkIjoiNjYwYmVmN2U2YmJkYTAyZmI3MzFiODUwIiwidHlwZSI6ImFjY2VzcyIsImlhdCI6MTcxMjA1ODI0NSwiZXhwIjoxNzEyMDYwMDQ1fQ.zBuW6aW4QdwZF2oLC1ZUqRuKq3h0ZfdpJlFYbbXpt7Q"
    }
}

On receiving the response, inject the token in the client SDK as follows

import { ClientVerificationUI } from '@trential/client-verification-sdk'

// component
<ClientVerificationUI
    token={"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJvcmd1aWQiOiI2NTk0MGJkYjliMjcxZDdlMTIzYTkwY2MiLCJncm91cFR4bklkIjoiNjYwYmVmN2U2YmJkYTAyZmI3MzFiODUwIiwidHlwZSI6ImFjY2VzcyIsImlhdCI6MTcxMjA1ODI0NSwiZXhwIjoxNzEyMDYwMDQ1fQ.zBuW6aW4QdwZF2oLC1ZUqRuKq3h0ZfdpJlFYbbXpt7Q"}
    onSuccess={()=> successHandler()}
    onError={()=> errorHandler()}
/>

The ClientVerificationUI component can be rendered anywhere but it is best suited inside a modal view which will provide a better user experience

The token will be used to start the session and all the verifications will be listed accordingly

Example Code

import axios from "axios";
import React from "react";
import { ClientVerificationUI } from "client-verification-trential-sdk";

function TrentialDemo() {
  const [token, setToken] = React.useState();

  // generate session token
  const generateSessionToken = async () => {
    const response = await axios({
      url: "https://api.trential.dev/verification/api/1.0/transactions/start-group-verification",
      method: "POST",
      headers: {
        "x-api-key": "8d388308-4023-4f83-94a3-9351c72a6690",
      },
      data: {
        verificationNameList: ["aadhaar", "dl", "passport"],
      },
    });
    if (response?.data?.data) {
      setToken(response?.data?.data?.token);
    }
  };

  const invokeSDK = () => {
    if (!token) {
      generateSessionToken();
    }
  };

  return (
    <div className="App">
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            {token && (
              <div style={{ margin: 20 }}>
                <ClientVerificationUI
                  onError={() => {}}
                  onSuccess={() => alert("hey")}
                  verifications={["aadhaar", "passport", "drivingLicense"]}
                  token={token}
                  disclaimer="I provide my consent to share my Aadhaar Card with Hudini"
                />
                <p style={{ marginTop: 20 }}>
                  Powered by{" "}
                  <img
                    src="https://storage.googleapis.com/indisi-wallet-app/trential-logo-white-bg.png"
                    style={{ height: 40, width: "auto" }}
                  />
                </p>
              </div>
            )}
          </div>
        </div>
      </div>
      <h1>Client Verification SDK Testing Sandbox</h1>
      <button
        type="button"
        style={{ backgroundColor: "rgb(4,77,160)" }}
        onClick={() => invokeSDK()}
        class="btn btn-info btn-lg"
        data-toggle="modal"
        data-target="#myModal"
      >
        Invoke SDK
      </button>
      <br />
      <div>
        <p>token - {token ? "Intialised" : "Not Initialised"}</p>
      </div>
    </div>
  );
}

export default TrentialDemo;

Update on Upcoming SDK Version

🚀 More customization is on the way in client-side verification SDK:-

1. The developer would have an option to choose m out of n verifications, that is the choice for developers to pick specific verifications from a set.

2. The developer would be able to set conditions whether to restart the verification whenever the client-verification-sdk is invoked or re-use earlier session