React

2 min read

Installation

  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

Integration

  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

Changing appearance

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.

Setting user data

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: 'john.doe@gmail.com',
          phoneNumber: '+1-202-555-0179',
        }}
      />
    </main>
  );
};

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