Prefill Dutch Business Details in Checkout Forms

If you run a B2B e-commerce store or SaaS that serves Dutch businesses, your checkout or registration form probably asks for a company name, address, VAT number, and other details. Most users type this information manually — and get it wrong surprisingly often. Typos in company names, incorrect postal codes, and outdated addresses lead to failed deliveries, invoice disputes, and wasted support time.

There is a better approach: let the user enter their KVK number and fill in the rest automatically.

The Problem with Manual Data Entry

A typical B2B checkout form in the Netherlands asks for six or more company-related fields: company name, KVK number, VAT number (BTW), street, postal code, and city. That is a lot of typing, and each field is a chance for error.

The consequences show up downstream:

• Shipping failures when the address does not match what the postal service expects
• Invoice rejections when the legal name or VAT number is wrong
• Compliance issues when stored company data does not match the official registry
• Higher support load from customers correcting their own mistakes

The worst part is that all of this data already exists in the KVK registry. There is no reason to ask your customer to type what you can look up in milliseconds.

How KVK Prefill Works

The idea is simple. Your form has a single input field for the KVK number. When the user enters 8 digits, your application calls the KVKBase API, retrieves the company profile, and fills in every other field automatically.

From the user’s perspective, they type one number and the form fills itself out. From your perspective, the data comes directly from the official business registry, so it is accurate by definition.

Implementation with the KVKBase Widget

The fastest way to add this to your checkout is the KVKBase widget. Drop in a script tag and a custom element:

<form id="checkout-form">
  <div class="form-group">
    <label for="kvk">KVK Number</label>
    <kvk-lookup id="kvk-widget" lang="en" placeholder="Enter KVK number"></kvk-lookup>
  </div>

  <div class="form-group">
    <label for="company-name">Company Name</label>
    <input type="text" id="company-name" readonly>
  </div>

  <div class="form-group">
    <label for="address">Address</label>
    <input type="text" id="address" readonly>
  </div>

  <div class="form-group">
    <label for="postal-code">Postal Code</label>
    <input type="text" id="postal-code" readonly>
  </div>

  <div class="form-group">
    <label for="city">City</label>
    <input type="text" id="city" readonly>
  </div>

  <div class="form-group">
    <label for="vat">VAT Number</label>
    <input type="text" id="vat" readonly>
  </div>

  <button type="submit">Complete Order</button>
</form>

<script src="https://widget.kvkbase.nl/kvk-lookup.js" data-api-key="YOUR_API_KEY"></script>
<script>
  const widget = document.getElementById('kvk-widget');

  widget.addEventListener('kvkbase:found', (event) => {
    const company = event.detail;
    document.getElementById('company-name').value = company.tradeName;
    document.getElementById('address').value =
      `${company.address.street} ${company.address.houseNumber}`;
    document.getElementById('postal-code').value = company.address.postalCode;
    document.getElementById('city').value = company.address.city;
    document.getElementById('vat').value = company.vatNumber || '';
  });

  widget.addEventListener('kvkbase:clear', () => {
    document.getElementById('company-name').value = '';
    document.getElementById('address').value = '';
    document.getElementById('postal-code').value = '';
    document.getElementById('city').value = '';
    document.getElementById('vat').value = '';
  });
</script>

That is all the code you need. The widget handles input validation, the API call, and loading states internally. Your code just listens for the result and fills in the fields.

Implementation with the API Directly

If you prefer full control or are working in a framework like React or Vue, you can call the API yourself:

async function lookupKvk(kvkNumber) {
  const response = await fetch(
    `https://api.kvkbase.nl/api/v1/lookup/${kvkNumber}`,
    {
      headers: { 'Authorization': `Bearer ${API_KEY}` }
    }
  );

  if (!response.ok) {
    throw new Error(`Lookup failed: ${response.status}`);
  }

  return response.json();
}

// React example
function KvkInput({ onCompanyFound }) {
  const [kvkNumber, setKvkNumber] = useState('');

  const handleChange = async (e) => {
    const value = e.target.value.replace(/\D/g, '');
    setKvkNumber(value);

    if (value.length === 8) {
      try {
        const company = await lookupKvk(value);
        onCompanyFound(company);
      } catch (err) {
        console.error('KVK lookup failed:', err);
      }
    }
  };

  return (
    <input
      type="text"
      value={kvkNumber}
      onChange={handleChange}
      placeholder="KVK number"
      maxLength={8}
    />
  );
}

What Gets Filled In

A single KVK lookup returns everything you need for a standard B2B checkout:

Field	Source
Company name	tradeName
Street + number	address.street + address.houseNumber
Postal code	address.postalCode
City	address.city
VAT number	vatNumber
Legal form	legalForm

You can also use the isActive field to warn users if they enter a KVK number for a dissolved company.

Results You Can Expect

Teams that add KVK prefill to their checkout typically see:

• Fewer form fields to fill — the user only types 8 digits instead of filling 6+ fields
• Higher accuracy — data comes from the registry, not from memory
• Faster checkout completion — less typing means less friction
• Fewer support tickets about incorrect invoices or failed deliveries

The implementation takes an hour or two for most teams. The ROI shows up in the first week.

Getting Started

Sign up at kvkbase.nl for an API key. The widget documentation at /en/docs/widget covers configuration options, theming, and advanced event handling. If you prefer the raw API, the API reference has everything you need.