Inlined React

Verifying individuals with the Inlined React Flow can be easily achieved with a short code snippet. You'll only need your template ID which can be found in the Integration Section of your Dashboard.

❗️

Looking for v3?

We will stop making updates to persona@3 on December 31, 2022. You will still be able to create inquiries, but no new features or fixes will be available. Please move to persona@4 for access to the latest product improvements- please see migration to v4 section or contact [email protected].

Inlining the flow

Persona can be integrated with the following code snippet. Remember to replace templateId with your organization's template ID.

import Persona from 'persona';

const InlineInquiry = () => {
  return (
    <Persona.Inquiry
      templateId='itmpl_Ygs16MKTkA6obnF8C3Rb17dm'
      environment='sandbox'
      onLoad={() => { console.log('Loaded inline'); }}
      onComplete={({ inquiryId, status, fields }) => {
     	  // Inquiry completed. Optionally tell your server about it.
        console.log(`Sending finished inquiry ${inquiryId} to backend`);
      }}
    />
	);
};

When using the persona NPM package, you must also ensure its peer dependencies are installed.

# npm
npm install persona react styled-components
# yarn
yarn add persona react styled-components

To permit the Persona iframe to render on your domain, see Security > Embedding the Persona iframe.

Styling

The inlined React component renders an iframe containing the Persona flow. The frameHeight and frameWidth parameters are exposed as props and are passed directly to the iframe as max-height and max-width inline styles.

For more granular or dynamic styling, the iframe can be targeted via CSS. We recommend targeting a selector provided by your app such as .your-classname > iframe instead of relying on Persona class names to avoid unexpected breakage.