Popup Flow

Popup flow lets the user stay on the current page while the verification runs in a separate window.

This is useful for apps, overlays, and checkout experiences where a full redirect would feel disruptive.

Flow overview

1. Your app opens or pre-opens a popup window
2. Your app calls init()
3. Your app calls startVerificationWithPopup(popup)
4. The popup navigates through the verification flow
5. Your popup callback page calls handleRedirectResult()
6. The popup sends the result back to the opener via postMessage
7. The opener page receives the result and updates its state

Recommended pattern

Pre-open the popup inside the click handler. This reduces the chance that the browser blocks it.

const popup = window.open('', 'unqverify-popup', 'width=500,height=650')

if (!popup) {
  console.error('Popup blocked')
  return
}

init({
  publicKey: 'pk_test_your_key',
  ageToVerify: 18,
  redirectUri: 'https://your-app.com/verify-popup',
  onVerified: (payload) => {
    console.log('Verified via popup', payload)
  },
  onDenied: (outcome) => {
    console.warn('Denied', outcome.code)
  },
  onCancelled: (outcome) => {
    console.warn('Cancelled', outcome.code)
  },
  onError: (outcome) => {
    console.error('Technical error', outcome.code, outcome.message)
  },
})

startVerificationWithPopup(popup)

Popup callback page

Your popup callback page still uses handleRedirectResult(), but it should usually close the popup once finished.

import { handleRedirectResult } from '@unqtech/age-verification-mitid'

await handleRedirectResult({
  targetOrigin: 'https://your-app.com',
  onVerified: () => {
    window.close()
  },
  onFailure: () => {
    window.close()
  },
  onError: (outcome) => {
    console.error(outcome.code, outcome.message)
  },
})

Why targetOrigin matters

When popup mode posts the result back to the opener window, targetOrigin prevents the SDK from broadcasting the message to *.

What counts as cancellation

Popup mode can trigger the onCancelled callback for:

• POPUP_CLOSED
• USER_CANCELLED
• POPUP_TIMEOUT

This is different from redirect mode, where the user is not operating inside a popup lifecycle.

Common issues

• Browser blocks the popup before the flow starts
• The callback page is not on a trusted or whitelisted origin
• The popup page does not call handleRedirectResult()
• The opener window expects messages from * instead of a controlled origin

When to use popup flow

Use popup flow when:

• You want to keep the current page visible
• You need a modal-like verification experience
• Your UI reacts immediately when the popup returns a result

If you want the simplest path, use Redirect Flow instead.