TrullyWebSDK

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 />;
}