Préremplir les données d'entreprise au paiement

Si vous exploitez une boutique e-commerce B2B ou un SaaS destiné à des entreprises néerlandaises, votre formulaire de paiement ou d’inscription demande probablement un nom d’entreprise, une adresse, un numéro de TVA et d’autres informations. La plupart des utilisateurs saisissent ces données à la main, et se trompent étonnamment souvent. Fautes de frappe dans les noms d’entreprise, codes postaux erronés et adresses périmées entraînent des livraisons ratées, des litiges de facturation et du temps de support perdu.

Il existe une meilleure approche : laissez l’utilisateur saisir son numéro KVK et remplissez le reste automatiquement.

Le problème de la saisie manuelle

Un formulaire de paiement B2B typique aux Pays-Bas demande six champs ou plus liés à l’entreprise : nom de l’entreprise, numéro KVK, numéro de TVA (BTW), rue, code postal et ville. C’est beaucoup de saisie, et chaque champ est une occasion de se tromper.

Les conséquences se font sentir en aval :

• Échecs de livraison lorsque l’adresse ne correspond pas à ce qu’attend le service postal
• Rejets de factures lorsque la raison sociale ou le numéro de TVA est erroné
• Problèmes de conformité lorsque les données d’entreprise stockées ne correspondent pas au registre officiel
• Charge de support accrue à cause de clients qui corrigent leurs propres erreurs

Le plus frustrant, c’est que toutes ces données existent déjà dans le registre KVK. Il n’y a aucune raison de demander à votre client de saisir ce que vous pouvez retrouver en quelques millisecondes.

Comment fonctionne le préremplissage KVK

L’idée est simple. Votre formulaire a un seul champ pour le numéro KVK. Quand l’utilisateur saisit 8 chiffres, votre application appelle l’API KVKBase, récupère le profil de l’entreprise et remplit automatiquement tous les autres champs.

Pour l’utilisateur, il tape un numéro et le formulaire se remplit tout seul. Pour vous, les données viennent directement du registre officiel des entreprises : elles sont donc exactes par définition.

Mise en œuvre avec le widget KVKBase

Le moyen le plus rapide d’ajouter cela à votre page de paiement est le widget KVKBase. Ajoutez une balise script et un élément personnalisé :

<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>

C’est tout le code nécessaire. Le widget gère en interne la validation de la saisie, l’appel d’API et les états de chargement. Votre code se contente d’écouter le résultat et de remplir les champs.

Mise en œuvre directement avec l’API

Si vous préférez un contrôle total ou travaillez avec un framework comme React ou Vue, vous pouvez appeler l’API vous-même :

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();
}

// Exemple React
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}
    />
  );
}

Ce qui est rempli

Une seule recherche KVK renvoie tout ce qu’il faut pour un paiement B2B standard :

Champ	Source
Nom de l’entreprise	tradeName
Rue + numéro	address.street + address.houseNumber
Code postal	address.postalCode
Ville	address.city
Numéro de TVA	vatNumber
Forme juridique	legalForm

Vous pouvez aussi utiliser le champ isActive pour avertir les utilisateurs qui saisissent le numéro KVK d’une entreprise dissoute.

Les résultats à attendre

Les équipes qui ajoutent le préremplissage KVK à leur page de paiement constatent généralement :

• Moins de champs à remplir : l’utilisateur ne saisit que 8 chiffres au lieu de remplir plus de 6 champs
• Une meilleure exactitude : les données viennent du registre, pas de la mémoire
• Un paiement finalisé plus vite : moins de saisie, c’est moins de friction
• Moins de tickets de support pour des factures incorrectes ou des livraisons ratées

La mise en œuvre prend une heure ou deux pour la plupart des équipes. Le retour sur investissement se voit dès la première semaine.

Pour commencer

Inscrivez-vous sur kvkbase.nl pour obtenir une clé d’API. La documentation du widget sur /en/docs/widget détaille les options de configuration, la personnalisation du thème et la gestion avancée des événements. Si vous préférez l’API brute, la référence de l’API contient tout le nécessaire.