This package has been deprecated

Author message:

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

@passbase/button

Passbase

To integrate the Passbase SDK, follow this guide and use your own API Key which you can obtain from the developer dashboard.

The integration of the Passbase Web SDK follows a few simple steps:

1. Install the SDK through NPM / Yarn
2. Get an API Key
3. Render a Passbase verification button and handle the result

Additionally, a non package manager dependant solution, based on HTML script tag, can be found at Passbase doc website.

1. Install the SDK

# NPM
npm install --save @passbase/button

# Yarn
yarn add @passbase/button

2. Get an API Key

Passbase uses API keys to allow access to the API and route it back to your dashboard.

You need to register on our website to create a new Passbase API key here: Developer Dashboard.

3. Render the verification button

Import the Passbase SDK

import Passbase from "@passbase/button";

The SDK supports UMD modules, we present here the ES import method.

Handling Verifications

Verification is an asynchronous process that gives you a callback based result.

The callback method give you the ability to react on if a user verification is finished. e.g. bring the user to another screen.

Also, you can use callbacks for checking if a verification was complete or cancelled. Inside the callback method, you get back the authKey. This key is helpful if you want to ping our API for what the status of a verification is e.g. if it was approved or rejected. It might take a few minutes until a verification is fully processed and of course depend if you approve or reject it in your dashboard.

A. With a function

Invoke the button rendering function

renderButton(
  mountingElement,
  apiKey,
  (options = {
    onFinish,
  }),
);

mountingElement: The DOM element you want to mount the button on

apiKey: The Passbase API Key you obtained from the dashboard.

options: not required

  onStart: The callback which will be called on start, () => void

  onError: The callback which will be called on error, (error: string) => void

  onFinish: recommended The callback which will be called on completion, (identityAccessKey: string) => void

  onSubmitted: The callback which will be called on submission of the data, (identityAccessKey: string) => void

  metaData: An encrypted JSON represented as an ASCII-armored string which will be associated with the identity access

  prefillAttributes: an object containing attributes used for form prefilling on the button

    email: a string defining the user email

    country: a string defining the two-letters country code

  theme: not required - an object containing attributes used for the button's theme

    accentColor: a string defining color

    darkMode: enables the dark theme

B. With a React Component

In order to render the component provided by the Passbase SDK, you must install the peer dependencies which the component is leveraging.

npm install --save react-dom

You can now import and render the component as follows.

import VerifyButton from "@passbase/button/react";

<VerifyButton
  apiKey={apiKey}
  onStart={() => {}}
  onError={(error, context) => {}}
  onFinish={identityAccessKey => {}}
  onSubmitted={identityAccessKey => {}}
  metaData="YOUR_ENCRYPTED_CONTENT"
  prefillAttributes={{
    email: "[e-mail]",
    country: "de",
  }}
  theme={{
    accentColor: "#ff0000",
    fonts: {
      primary: "Exo",
      secondary: "Lato",
      cta: "Open sans",
    },
    darkMode: false,
  }}
/>;

Name	Description	Signature	Required
apiKey	The Passbase API Key you obtained from the dashboard	string	Yes
onStart	The callback which will be called on start	OnStartCallback	No
onError	The callback which will be called on error	OnErrorCallback	No
onFinish	The callback which will be called on completion	OnFinishCallback	No
onSubmitted	The callback which will be called on submission of the data	OnSubmittedCallback	No
metaData	An encrypted JSON represented as an ASCII-armored string which will be associated with the identity access	string	No
prefillAttributes	An object containing attributes used for form prefilling on the button: email - a string defining the user email country - a string defining the two-letters country code	PrefillAttributes	No
theme	An object containing attributes used for the button's theme accentColor - HEX string defining accent color fonts - an object containing primary, secondary, cta font family names found in customization section in dashboard darkMode - enables the dark theme	Theme	No

Troubleshooting

ReferenceError: window is not defined

You're likely trying to render the component server side, which is not supported yet. You should disable SSR in your rendering framework of choice (i.e. NextJS: https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr)