React

1. Install footprint-js and footprint-react:

bash
# With NPM
npm install @onefootprint/footprint-js
npm install @onefootprint/footprint-react

# With yarn
yarn add @onefootprint/footprint-js
yarn add @onefootprint/footprint-react

1. Grab the Onboarding Publishable Key, for example ob_test_VMooXd04EUlnu3AvMYKjMW.

2. Import the styles file and embed the Footprint button, passing the Publishable Key and the callback functions:

typescript
import '@onefootprint/footprint-js/dist/footprint-js.css';

import { FootprintButton } from '@onefooprint/footprint-react';

const Page = () => {
  const handleCompleted = (validationToken: string) => {
    console.log(validationToken);
  };

  const handleCanceled = () => {
    console.log('user canceled');
  };

  return (
    <main>
      <FootprintButton
        publicKey="ob_test_VMooXd04EUlnu3AvMYKjMW"
        onCompleted={handleCompleted}
        onCanceled={handleCanceled}
      />
    </main>
  );
};

Click here to check out a full example. We also have some examples using Next.js

You can customize the appearance of our flow using the appearance prop:

typescript
import '@onefootprint/footprint-js/dist/footprint-js.css';

import { FootprintButton } from '@onefooprint/footprint-react';

const Page = () => {
  return (
    <main>
      <FootprintButton
        publicKey="ob_test_VMooXd04EUlnu3AvMYKjMW"
        appearance={{
          borderRadius: 0,
          inputBg: 'red',
        }}
      />
    </main>
  );
};

Click here to check out a full example and here for more details about customization.

Depending on your onboarding configuration, Footprint might request customer's phone number and email. In some circustances, you might have this data already available, so Footprint doesn't need to request this data once more. To pass user data to Footprint's flow, use the prop userData:

typescript
import '@onefootprint/footprint-js/dist/footprint-js.css';

import { FootprintButton } from '@onefooprint/footprint-react';

const Page = () => {
  return (
    <main>
      <FootprintButton
        publicKey="ob_test_VMooXd04EUlnu3AvMYKjMW"
        userData={{
          email: 'jane.doe@acme.com',
          phoneNumber: '+12025550179',
        }}
      />
    </main>
  );
};

Click here to check out a full example and here for more details about user data.