JS SDK Reference

npm install @allsign/embedded

<script src="https://js.allsign.io/v1.js" async></script>

import { AllSign } from '@allsign/embedded';

const session = AllSign.init({
  clientSecret: 'as_sess_xxx_secret_yyy',
  // callbacks y opciones (ver tabla más abajo)
});

const session = AllSign.init({
  clientSecret: 'as_sess_xxx_secret_yyy',
  locale: 'es-MX',
  theme: { primaryColor: '#1a73e8' },
  onSuccess: (result) => { /* firmado */ },
  onExit: (metadata) => { /* cerró */ },
  onEvent: (event) => { /* progreso */ },
});

session.modal();

const session = AllSign.init({
  clientSecret: 'as_sess_xxx_secret_yyy',
  locale: 'es-MX',
  values: { nombre: 'Juan', rfc: 'ABC123' },
  onSuccess: (result) => { /* firmado */ },
});

session.inline('#firma-container');

<div id="firma-container" style="width: 100%; height: 600px;"></div>

const session = AllSign.init({
  clientSecret: 'as_sess_xxx_secret_yyy',
  onSuccess: (result) => { /* firmado */ },
});

session.slider();

npm install @allsign/embedded

import { useAllSignLink } from '@allsign/embedded/react';

function SignButton({ clientSecret }) {
  const { open, ready, error } = useAllSignLink({
    clientSecret,
    mode: 'modal',  // 'modal' | 'slider'

    onSuccess: (result) => {
      // result.signatureId — UUID de la firma
      // result.documentId  — UUID del documento
      // result.signedAt    — timestamp ISO-8601
      console.log('Firmado:', result.signatureId);
    },

    onExit: (metadata) => {
      // metadata.reason — 'completed' | 'cancelled' | 'expired' | 'error'
      // metadata.lastStep — último paso completado ('otp', 'id_scan', 'signature')
      console.log('Salió en:', metadata.lastStep);
    },

    onEvent: (event) => {
      // Eventos granulares para analytics y UI
      // event.name — 'OTP_SENT', 'OTP_VERIFIED', 'ID_SCAN_STARTED',
      //              'ID_SCAN_COMPLETED', 'DOCUMENT_VIEWED',
      //              'SIGNATURE_DRAWN', 'SIGNATURE_SUBMITTED'
      // event.timestamp — ISO-8601
      // event.metadata — datos adicionales del paso
      console.log('Evento:', event.name);
    },
  });

  if (error) return <p>Error: {error.message}</p>;

  return (
    <button onClick={open} disabled={!ready}>
      Firmar documento
    </button>
  );
}

interface SigningResult {
  signatureId: string;    // UUID de la firma
  documentId: string;     // UUID del documento
  signerEmail: string;    // Email del firmante
  signedAt: string;       // Timestamp ISO-8601
}

interface ExitMetadata {
  reason: 'completed' | 'cancelled' | 'expired' | 'error';
  lastStep: 'otp' | 'id_scan' | 'variables' | 'document_view' | 'signature' | null;
  sessionId: string;
  documentId: string;
  error?: {
    code: string;
    message: string;
  };
}

interface SigningEvent {
  name: string;        // Nombre del evento
  timestamp: string;   // ISO-8601
  metadata: Record<string, any>;
}

const session = AllSign.init({ clientSecret: '...' });
session.inline('#container');

// Después...
session.close();

useEffect(() => {
  const session = AllSign.init({ clientSecret });
  session.inline('#container');
  return () => session.unmount();
}, [clientSecret]);

import type {
  AllSignSession,
  AllSignInitOptions,
  SigningResult,
  ExitMetadata,
  SigningEvent,
  ThemeOptions,
} from '@allsign/embedded';

import type {
  UseAllSignLinkOptions,
  UseAllSignLinkReturn,
} from '@allsign/embedded/react';

import { AllSign, isRetryableError } from '@allsign/embedded';

const session = AllSign.init({
  clientSecret: '...',
  onExit: async (metadata) => {
    const code = metadata.error?.code;
    if (!code) return; // salida limpia (completada / cancelada por el firmante)

    if (isRetryableError(code)) {
      // Transitorio (NETWORK_ERROR, BACKEND_UNREACHABLE, INTERNAL_ERROR,
      // INIT_TIMEOUT, HTTP_5xx…): el MISMO client_secret sigue siendo
      // válido dentro de su ventana de 15 min — re-invoca init con backoff.
      setTimeout(() => reintentar(clientSecret), 2000);
    } else {
      // Terminal (SESSION_EXPIRED, SESSION_CANCELLED, ORIGIN_NOT_ALLOWED…):
      // pide a TU backend una sesión NUEVA y re-invoca init con el
      // client_secret fresco.
      refreshSession();
    }
  },
});