Scellio
TarifsDocumentationSDKsFAQContact
ConnexionEssai gratuit
Documentation développeur

Composant Web d'onboarding Scell.io

Intégrez un flux complet de vérification d'entreprise et d'onboarding à la facturation électronique en une seule ligne de code. Validation SIREN, vérification TVA et confirmation du représentant légal incluses.

DémarrerRéférence API
Installé en 30 secondes
index.html
html
<script src="https://cdn.scell.io/widget/v1/onboarding.js"></script>
<scell-onboarding
  publishable-key="pk_test_xxxx"
  environment="sandbox"
></scell-onboarding>

Démarrage rapide

Mode Sandbox disponible : Utilisez votre propre clé publishable de test pk_test_* (obtenue dans votre dashboard) pour tester le composant en mode sandbox. Les données de test ne sont pas persistées.

Le composant d'onboarding Scell.io gère l'intégralité du flux de vérification d'entreprise : recherche SIREN/SIRET, validation du numéro de TVA, vérification d'adresse et confirmation du représentant légal.

Étape 1 : Inclure le script

html
<script src="https://cdn.scell.io/widget/v1/onboarding.js"></script>

Étape 2 : Ajouter le composant

html
<scell-onboarding
  api-key="pk_live_your_api_key"
  environment="production"
  theme="auto"
  locale="fr"
></scell-onboarding>

Étape 3 : Gérer les événements

javascript
document.querySelector('scell-onboarding')
  .addEventListener('onboarding:completed', (e) => {
    console.log('Company verified:', e.detail.company_id);
    // Redirect to dashboard or update UI
  });

Démo interactive

Cette démo utilise une clé publishable de test. Créez votre compte pour obtenir votre propre clé pk_test_* et tester le widget avec vos données.

Testez le composant Scell.io Onboarding directement ci-dessous. Ce widget permet à vos utilisateurs de vérifier leur entreprise (SIREN, TVA, représentant légal) et de compléter leur inscription.

Ce widget fonctionne en mode sandbox. Pour l'intégrer, consultez le guide Quick Start ci-dessus.

Référence API

Attributs

Configurez le comportement du composant via des attributs HTML.

AttributTypeRequisDescription
publishable-keystringOuiVotre clé publishable (pk_live_xxx ou pk_test_xxx)
environment"sandbox" | "production"NonEnvironnement. Par défaut : "sandbox"
external-idstringNonVotre identifiant interne pour ce sub-tenant (lien avec votre système)
callback-urlstringNonURL de redirection après complétion de l'onboarding
theme"light" | "dark" | "auto"NonThème de couleur. Par défaut : "light"
locale"fr" | "en"NonLangue du widget. Par défaut : "fr"
widthstringNonLargeur du widget. Par défaut : "100%"
heightstringNonHauteur du widget. Par défaut : "600px"

Événements

Écoutez les événements du composant pour réagir aux actions de l'utilisateur et aux changements d'état.

ÉvénementPayloadDescription
onboarding:started{ sessionId: string }La session d'onboarding a été initialisée
onboarding:step{ step: string, progress: number }L'utilisateur a changé d'étape (siret, verify, documents, complete)
onboarding:siret-verified{ companyName: string, siret: string }Le SIRET a été vérifié avec succès
onboarding:documents-uploaded{ count: number }Des documents KYB ont été uploadés
onboarding:completed{ authorizationCode: string, externalId?: string }L'onboarding est terminé — échangez le code via POST /onboarding/exchange
onboarding:error{ code: string, message: string }Une erreur s'est produite pendant l'onboarding

Modes d'intégration

Choisissez la méthode d'intégration qui correspond le mieux à votre architecture.

Recommandé

Web Component

Intégrez directement dans votre frontend. Idéal pour les SPAs et les applications web modernes.

  • Intégration la plus rapide
  • Personnalisation complète
  • Événements en temps réel
  • Fonctionne partout
Simple

Redirect Flow

Redirigez les utilisateurs vers la page hébergée Scell.io. Idéal pour les applications server-rendered.

  • Aucun code frontend
  • Hébergé par Scell.io
  • Flux OAuth-like
  • Conforme PCI
Avancé

API Only

Construisez votre propre UI. Contrôle total sur le flux de vérification.

  • Contrôle complet
  • UX personnalisée
  • Backend-first
  • White label

Exemple API REST

javascript
// Create onboarding session via API
const response = await fetch('https://api.scell.io/api/v1/onboarding/sessions', {
  method: 'POST',
  headers: {
    'X-API-Key': 'sk_live_xxxx',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    company_id: 'comp_xxxx',
    redirect_url: 'https://yourapp.com/callback',
    webhook_url: 'https://yourapp.com/webhooks/scell',
    metadata: {
      user_id: 'user_123',
      plan: 'enterprise'
    }
  })
});
const { session_id, session_url, expires_at } = await response.json();
// Redirect user to session_url or embed Web Component with session_id

Exemple Redirect Flow

javascript
// 1. Create session on your backend
const session = await scellApi.createOnboardingSession({
  company_id: companyId,
  redirect_url: 'https://yourapp.com/onboarding/callback',
  success_url: 'https://yourapp.com/dashboard?verified=true',
  cancel_url: 'https://yourapp.com/dashboard?verified=false'
});
// 2. Redirect user to Scell.io hosted page
window.location.href = session.session_url;
// 3. Handle callback on your redirect URL
// Query params: ?session_id=xxx&status=completed&signature=xxx

Exemples par framework

Exemples prêts à copier pour les frameworks populaires.

ScellOnboarding.tsx
tsx
import { useEffect, useRef } from 'react';
// Declare the custom element type
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'scell-onboarding': React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement> & {
          'api-key'?: string;
          'mode'?: 'sandbox' | 'production';
          'company-id'?: string;
          'redirect-url'?: string;
          'theme'?: 'light' | 'dark' | 'auto';
          'locale'?: string;
        },
        HTMLElement
      >;
    }
  }
}
export function ScellOnboarding({ apiKey, companyId, onComplete, onError }) {
  const ref = useRef<HTMLElement>(null);
  useEffect(() => {
    // Load the Web Component script
    const script = document.createElement('script');
    script.src = 'https://cdn.scell.io/widget/v1/onboarding.js';
    script.async = true;
    document.head.appendChild(script);
    return () => {
      document.head.removeChild(script);
    };
  }, []);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const handleComplete = (e: CustomEvent) => onComplete?.(e.detail);
    const handleError = (e: CustomEvent) => onError?.(e.detail);
    el.addEventListener('onboarding:completed', handleComplete);
    el.addEventListener('onboarding:error', handleError);
    return () => {
      el.removeEventListener('onboarding:completed', handleComplete);
      el.removeEventListener('onboarding:error', handleError);
    };
  }, [onComplete, onError]);
  return (
    <scell-onboarding
      ref={ref}
      api-key={apiKey}
      company-id={companyId}
      environment="production"
      theme="auto"
    />
  );
}

Webhooks

Recevez des notifications en temps réel lorsque des événements d'onboarding se produisent. Configurez votre URL webhook depuis le tableau de bord.

Sécurité : Vérifiez toujours la signature du webhook avec la clé secrète de votre tableau de bord. La signature est incluse dans le header x-scell-signature.

Exemple de payload webhook

onboarding.completed
json
// Example webhook payload for onboarding.completed
{
  "event": "onboarding.completed",
  "created_at": "2024-01-15T10:30:00Z",
  "data": {
    "session_id": "sess_xxxx",
    "company_id": "comp_xxxx",
    "status": "verified",
    "verification": {
      "siren_verified": true,
      "vat_verified": true,
      "address_verified": true,
      "legal_rep_verified": true
    },
    "company": {
      "name": "ACME Corporation",
      "siren": "123456789",
      "vat_number": "FR12345678901",
      "address": {
        "street": "123 Rue de Paris",
        "city": "Paris",
        "postal_code": "75001",
        "country": "FR"
      }
    }
  },
  "signature": "sha256=xxxxx"
}

Événements webhook disponibles

ÉvénementDescription
onboarding.startedL'utilisateur a démarré le flux d'onboarding
onboarding.step_completedL'utilisateur a complété une étape de vérification
onboarding.completedToutes les étapes de vérification ont été complétées avec succès
onboarding.failedLa vérification a échoué (données invalides, timeout, etc.)
onboarding.cancelledL'utilisateur a annulé l'onboarding

Prêt à intégrer ?

Créez votre compte et obtenez vos clés API en quelques minutes. Démarrez avec 100 crédits gratuits.

Obtenir des clés APIContacter les ventes