Embed document signing in React without losing control

Let your server own request creation

Create the submission from your backend, not from browser code that contains an API key. Map your internal agreement identifier into Signa metadata, persist the returned submission and submitter identifiers, and send only the signer-specific URL to the client.

The browser should know enough to render the signing session, but it should not have credentials that can create or inspect unrelated submissions.

Render the hosted workflow with explicit lifecycle states

The Signa React package loads the hosted custom element and exposes initialization, load, completion, and decline callbacks. Keep a stable container size while it loads so the page does not jump when the document becomes ready.

import { SignaForm } from "@signajs/react";

export function Agreement({ signingUrl }) {
  return (
    <SignaForm
      host="https://signa.example.com"
      src={signingUrl}
      withDownloadButton
      onLoad={() => setReady(true)}
      onComplete={() => setLocallyComplete(true)}
    />
  );
}

Treat the callback as UX, not final authority

Use the completion callback to update the immediate interface, but confirm the durable status from your backend or a verified webhook before releasing protected resources. Client events can be interrupted, replayed, or lost when a tab closes.

This split gives the signer a responsive experience while the server remains responsible for entitlement and downstream processing.

Production checklist

Pin the embed script version, allow the Signa host in your content security policy, test keyboard and mobile behavior, and provide a clear recovery path for expired or already-completed links.

• Skeleton and explicit load-error state.
• Stable minimum height at desktop and mobile widths.
• Decline and expiration routes owned by the parent product.
• Verified webhook or API reconciliation after completion.
• No API keys or unrestricted tokens in client JavaScript.