Implementing Persona Idv on NextJS

Question

We are attempting to use an embedded Persona flow on our NextJS app.

Code as follows:

export default function PersonaTest(props) {
  const PersonaInquiry = dynamic(() => import('persona').then((mod) => mod.Inquiry), { ssr: false });

  const RenderFrame = () => (
    <PersonaInquiry
      templateId="itmpl_Ygs16MKTkA6obnF8C3Rb17dm"
      environment="sandbox
      frameHeight="900"
      frameWidth="500"
      parent="root"
      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`);
      }}
    />
  );

  return (
    <>
      <Grid container spacing={2} style={{ paddingTop: 400 }}>
        <Grid item xs={12} sm={6}>
          <div id="root" />
          <RenderFrame />
        </Grid>
      </Grid>
    </>
  );
}

The Persona component renders and imbedded iframe to allow an idv flow.

The Persona widget is rendered but in a very small frame. It seems the params frameHeight, frameWidth and parent are being ignored.

Why dynamic rendering is needed to allow the component to render the iframe (if not, it will throw 'self' type errors).

Persona support is unable to diagnose/help.

What am I doing wrong?

Thanks!

I have tried numerous options to set the frame height and width.

Answer 1

I had a similar issue and found this when I was troubleshooting - frameHeight and frameWidth only set the max height and width. Persona's docs recommend targeting the general iframe tag from a parent container and that ended up working for me. I wrapped my PersonaInquiry tag in a styled component and targeted child iframe tags from there. Hope that helps!