Form — JavaScript SDK <dokicasa-form>

✦

Integrate with an AI assistant

Download or copy the integration prompt for JavaScript SDK and paste it into Claude Code, Cursor or Copilot: it contains auth, end-to-end examples and a checklist.

Open

The SDK embeds the Dokicasa form directly in your site as a Web Component: a <dokicasa-form> tag with Shadow DOM (no CSS conflicts), no iframe, native DOM events.

🚀 Launching soon — coming soon

The <dokicasa-form> JavaScript SDK is launching soon and will be available shortly. The docs below are a preview: attributes, events and examples may change before the official release, and distribution at https://sdk.dokicasa.it/v1.js is not active yet.

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>

Available forms

Each slug below can be called on POST /api/v3/form/{slug} (creation) or mounted in the SDK via the slug attribute. Forms are grouped by bundle; each step shows its type (Contract or Service) and its slug (click a slug to copy it).

TIP

A Contract step is a fillable contract; a Service step is a linked service (e.g. a check). Partners usually fill the steps of a bundle in order.

Installation

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

// Custom elements work in React: use the tag directly.
// Load the script once (e.g. in _app or with next/script).
export default function Contract({ 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>
<!-- Declare 'dokicasa-form' as a custom element in the compiler config -->

User token

The secret api_token must never live in the browser. Your backend issues a short-lived user_token for the end user, which you pass to the user-token attribute.

// POST /your-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

The api-key (pk_live_…) is public and identifies the app: it can live in the frontend. The user-token is per-user and short-lived: mint it server-side on demand.

Attributes

Attribute	Type	Default	Description
slug	string	— (required)	Slug of the form to render
contract-type	string	default	Contract variant
api-key	string	null	Partner public key (pk_live_…)
user-token	string	null	Short-lived end-user token
api-base	string	https://api.dokicasa.it/api	API base URL

Events

The component emits CustomEvents with a payload in event.detail:

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

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

After saving

Once the practice is created, from your backend you can read its status and tasks as in the Server-to-server chapter.