Embedded Onboarding

Custom element (<frame-onboarding>) that hosts Frame's merchant onboarding flow. Renders a modal that walks merchants through the steps Frame requires to enable payouts (identity, business info, payout method, terms of service).

Get an instance via Frame.createOnboarding(apiKey) — the helper creates and appends the custom element to the document. Open the modal by calling open({ clientSecret }) with a session client secret minted by your backend.

Subscribe to lifecycle either via property callbacks (onSuccess, onStepComplete, onError, onClose) or via DOM events (frame:complete, frame:step-complete, frame:error, frame:close, frame:expired) bubbling off the element.

EXAMPLE
import Frame from '@framepayments/frame-js';

const onboarding = await Frame.createOnboarding('pk_test_...');

onboarding.onSuccess = (account) => {
  // merchant has completed onboarding
};

onboarding.onError = ({ step, error }) => {
  reportToTelemetry(step, error);
};

const { client_secret } = await createOnboardingSessionOnBackend();
await onboarding.open({ clientSecret: client_secret });

Properties

onCloseobject | null

Fires when the modal closes — whether via the close button, escape key, or programmatic close().

onErrorobject | null

Fires when a step submission throws. Step key and error are included.

onStepCompleteobject | null

Fires after each individual step completes.

onSuccessobject | null

Fires once the merchant has finished every required step.

Methods