This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@trully/trully-sdk-react-next12

TrullyWebSDK

TrullyWebSDK is an identity validation component designed to be integrated into your decision-making process. This version was created to provide support for Next.js Page Router System. Please, go to [TrullyWebSDK package](https://www.npmjs.com/package/trully-sdk-react-2) for full documentation and Next.js App Router System integration.

Install

npm i @trully/trully-sdk-react-next12

How to use

The component receives the configuration prop, which should contain an object for configuring and personalizing the experience. This object has three keys: DocumentReader, AppConfiguration, and usage. Of these keys, only usage is required for the component to function properly.
This is a client-side component, which means it needs to run on the client. By default, every component created in Next.js is executed on the server. You need to make sure our component runs only on the client.

Add styles

To import the styles, go to your _app.js file and add the following import

import "../node_modules/@trully/trully-sdk-react-next12/dist/styles.css";

Example

"use client";
import "../styles/globals.css";
import "../node_modules/@trully/trully-sdk-react-next12/dist/styles.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Creating a component

First, create a new component so you can configure TrullyWebSDK component

Example

import { TrullyWebSDK } from "@trully/trully-sdk-react-next12";

const Trully = () => {
  return (
    <TrullyWebSDK
      configuration={{
        usage: {
          apiKey: "YOUR_API_KEY",
          user_id: "YOU_USER_ID",
          handleData: (data) => {
            //What should be done with the obtained data?
          },
          handleError: (error) => {
            //What should be done if there is an error retrieving the data?
          },
        },
      }}
    />
  );
};
export default Trully;

Mandatory keys definition

Key	Description
apiKey	Your cliente API Key
user_id	String. Will match the response you get with the user completing the process
handleData	Should be a callback function receiving a parameter. This parameter will hold the process result.
handleError	Should be a callback function receiving a parameter. This parameter will hold an error object.

Dynamically import the component

Then, to ensure the component runs only on the client, make a dynamic import with ssr: false.

import dynamic from "next/dynamic";

const DynamicComponent = dynamic(() => import("@/components/Trully"), {
  ssr: false,
});

export default function Home() {
  return <DynamicComponent />;
}