@rightdoor/js

Load RightDoor's address form and type it.

<rightdoor-address> checks Dutch and Belgian addresses against the official registers (Kadaster BAG and BeST) while the shopper types. Postcode and house number become a checked address in about a second. It never stops a real customer: when RightDoor is slow or down, it's a normal address form.

This package doesn't contain the form itself. Like Stripe.js, the form is always loaded from js.rightdoor.eu, so fixes reach your site without a redeploy. The package gives you:

• loadRightDoor(), which adds the script once;
• TypeScript types for the element, its value and its events;
• typings for React 19 and Vue templates;
• a Custom Elements Manifest, for editor autocomplete.

Install

npm install @rightdoor/js

Use

import { loadRightDoor } from "@rightdoor/js";

await loadRightDoor();
const form = document.querySelector("rightdoor-address");
form?.addEventListener("rightdoor-change", (event) => {
  console.log(event.detail.status, event.detail.address);
});

<form method="post" action="/checkout">
  <rightdoor-address publishable-key="rd_pk_live_…" countries="NL,BE" required></rightdoor-address>
  <button>Continue</button>
</form>

Get a publishable key in the RightDoor dashboard, and add your site's origin to it.

React 19

import "@rightdoor/js/react";
import { loadRightDoor, type FormValue } from "@rightdoor/js";

void loadRightDoor();

export function Address({ onChange }: { onChange: (value: FormValue) => void }) {
  return <rightdoor-address publishable-key="rd_pk_live_…" country="NL" required onrightdoor-change={(e) => onChange(e.detail)} />;
}

React reserves key for itself, which is why the attribute is publishable-key. React 19 sets messages, transformResult, format and beforeFill as properties.

Vue 3

import "@rightdoor/js/vue";
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith("rightdoor-");

<rightdoor-address publishable-key="rd_pk_live_…" country="NL" required @rightdoor-change="onChange" />

Angular

Add CUSTOM_ELEMENTS_SCHEMA to the component, call loadRightDoor(), and bind events as usual: (rightdoor-change)="onChange($event)".

Svelte 5

<rightdoor-address publishable-key="rd_pk_live_…" onrightdoor-change={onChange} />

Events

| Event | detail | |---|---| | rightdoor-ready | { version } | | rightdoor-input | { field } | | rightdoor-change | FormValue: status, address, carrier fields, issues, receipt | | rightdoor-lookup | { kind, country }, cancelable | | rightdoor-select | { kind, address }, cancelable | | rightdoor-invalid | { issues } on submit | | rightdoor-error | { code, status } |

The full guide, with every attribute, property, message key and CSS variable: rightdoor.eu/address-form.