Form — SDK JavaScript <dokicasa-form>

✦

Integra con un assistente AI

Scarica o copia il prompt di integrazione per SDK JavaScript e incollalo in Claude Code, Cursor o Copilot: contiene auth, esempi end-to-end e checklist.

Apri

L'SDK incorpora il form Dokicasa direttamente nel tuo sito come Web Component: un tag <dokicasa-form> con Shadow DOM (nessun conflitto di CSS), niente iframe, eventi DOM nativi.

🚀 In fase di lancio — disponibile prossimamente

L'SDK JavaScript <dokicasa-form> è in fase di lancio e sarà disponibile prossimamente. La documentazione qui sotto è un'anteprima: attributi, eventi ed esempi potrebbero cambiare prima del rilascio ufficiale, e la distribuzione su https://sdk.dokicasa.it/v1.js non è ancora attiva.

Quick start

<script src="https://sdk.dokicasa.it/v1.js"></script>

<dokicasa-form
  slug="locazione-ad-uso-abitativo-4-4"
  api-key="pk_live_xxx"
  user-token="eyJhbGc...">
</dokicasa-form>

Form disponibili

Ogni slug qui sotto è invocabile su POST /api/v3/form/{slug} (creazione) o montabile nell'SDK via attributo slug. I form sono raggruppati per bundle; ogni step indica il tipo (Contract o Service) e il suo slug (clicca lo slug per copiarlo).

TIP

Lo step di tipo Contract è un contratto compilabile; Service è un servizio collegato (es. una verifica). In un bundle i partner di solito compilano gli step in ordine.

Demo interattiva del Web Component

L'anteprima compilabile live di <dokicasa-form> è in fase di finalizzazione (serve uno slug reale + user-token e l'isolamento del layout): la attiveremo qui appena pronta. Per ora il catalogo sopra elenca gli slug disponibili.

Installazione

HTML / WordPress

<script src="https://sdk.dokicasa.it/v1.js"></script>
<dokicasa-form slug="..." api-key="pk_live_xxx" user-token="..."></dokicasa-form>

React / Next.js

// I custom element funzionano in React: usa il tag direttamente.
// Carica lo script una volta (es. in _app o con next/script).
export default function Contratto({ token }) {
  return (
    <dokicasa-form
      slug="locazione-ad-uso-abitativo-4-4"
      api-key="pk_live_xxx"
      user-token={token}
    />
  )
}

Vue

<template>
  <dokicasa-form slug="..." api-key="pk_live_xxx" :user-token="token" />
</template>
<!-- Dichiara 'dokicasa-form' come custom element nella config del compilatore -->

User token

La api_token segreta non deve mai stare nel browser. Il tuo backend emette un user_token a breve scadenza per l'utente finale, e lo passi all'attributo user-token.

// POST /tuo-backend/dokicasa-token
$token = Http::withToken(env('DOKICASA_TOKEN'))
    ->post('https://app.dokicasa.it/api/v3/...token...', [ /* user info */ ])
    ->json()['user_token'];

return response()->json(['user_token' => $token]);

TIP

La api-key (pk_live_…) è pubblica e identifica l'app: può stare nel frontend. Il user-token è per utente e a scadenza: emettilo server-side al bisogno.

Attributi

Attributo	Tipo	Default	Descrizione
slug	string	— (richiesto)	Slug del form da renderizzare
contract-type	string	default	Variante del contratto
api-key	string	null	Chiave pubblica del partner (pk_live_…)
user-token	string	null	Token a scadenza dell'utente finale
api-base	string	https://api.dokicasa.it/api	Base URL API

Eventi

Il componente emette CustomEvent con payload in event.detail:

Evento	detail
load	{ steps: number }
saved	{ userMakesContractId, bundleId, redirect }
error	{ message, status }

const form = document.querySelector('dokicasa-form')
form.addEventListener('saved', (e) => {
  console.log('Pratica salvata', e.detail.userMakesContractId)
})
form.addEventListener('error', (e) => {
  console.error(e.detail.message)
})

Dopo il salvataggio

A pratica creata, dal tuo backend puoi leggerne stato e task come nel capitolo Server-to-server.