Widerrufsbutton Widget

Widerrufsformular einbettbares JavaScript-Widget (React + TypeScript, IIFE-Build).

Rechtliche Grundlage

Pflichtfelder:

• Name des Verbrauchers
• E-Mail-Adresse (für die gesetzlich vorgeschriebene Eingangsbestätigung)
• Bestell- / Auftrags- / Vertragsnummer (Vertragsidentifikation)
• Datum der Widerrufserklärung (automatisch gesetzt)
• reason — optional, darf nicht als Pflichtfeld abgefragt werden

Button-Beschriftung: Vertrag widerrufen
Bestätigungs-Button: Widerruf bestätigen

Installation

npm install @netlib/widerrufsbutton

Build

Benötigt Node.js ≥ 20 (.nvmrc auf 22 gesetzt).

nvm use
npm install

# Dev-Server (Demo unter http://localhost:5173)
npm run dev

# Produktions-Build (IIFE → dist/widerrufsbutton.iife.js)
npm run build:lib

API-Integration

Das Widget schickt beim Absenden einen PATCH-Request:

PATCH /your-endpoint
Content-Type: application/json

{
  "action": "widerruf_submit",
  "payload": {
    "name": "Max Mustermann",
    "email": "[email protected]",
    "orderNumber": "ORD-2026-001",
    "reason": "",
    "datum": "2026-06-07T10:00:00.000Z"
  }
}

Konfigurationsparameter

| Parameter | Typ | Pflicht | Beschreibung | |---------------|---|---|---| | apiUrl | string | ja | PATCH-Endpunkt | | action | string | ja | Action-Name, Default: widerruf_submit | | introText | string | – | Einleitungstext im Modal | | companyName | string | – | Firmenname im Modal-Titel | | buttonLabel | string | – | Button-Beschriftung, Default: Vertrag widerrufen | | cancelLabel | string | – | Abbrechen-Button, Default: Abbrechen | | submitLabel | string | – | Absenden-Button, Default: Widerruf bestätigen | | buttonClass | string | – | Zusätzliche CSS-Klassen am Button | | cl | string | – | Bearer-Token für Authorization-Header |

Einbindung

Option A – React / Astro

import { WiderrufsWidget } from '@netlib/widerrufsbutton'

<WiderrufsWidget config={{
  apiUrl: 'https://example.com/api',
  action: 'widerruf_submit',
  companyName: 'Muster GmbH',
  introText: 'Hiermit erkläre ich den Widerruf...',
}} />

Option B – IIFE / Data-Attribute (kein Framework nötig) but

<script src="widerrufsbutton.iife.js" defer></script>

<button
  data-widerrufs
  data-api-url="https://example.com/api"
  data-action="widerruf_submit"
  data-company-name="Muster GmbH"
  data-intro-text="Hiermit erkläre ich den Widerruf..."
>Vertrag widerrufen</button>

Das Script erkennt alle [data-widerrufs]-Elemente beim DOMContentLoaded automatisch.

Option C – IIFE / JavaScript-API

<script src="widerrufsbutton.iife.js" defer></script>
<div id="wrb-container"></div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    WiderrufsButton.render('#wrb-container', {
      apiUrl: 'https://example.com/api',
      action: 'widerruf_submit',
      companyName: 'Muster GmbH',
    })
  })
</script>

Projektstruktur

src/
├── components/
│   ├── WiderrufsModal.tsx   # Modal + Formular + Validierung
│   └── WiderrufsWidget.tsx  # Button + Portal-Mount
├── api.ts                   # PATCH-Request
├── embed.tsx                # IIFE-Einstiegspunkt, window.WiderrufsButton
├── styles.ts                # Scoped CSS (Prefix: wrb-)
└── types.ts                 # WiderrufsConfig, WiderrufsFormData
dist/
├── index.es.js              # ES-Modul für React/Astro
├── index.cjs.js             # CommonJS
└── widerrufsbutton.iife.js  # Standalone-Bundle (~152 KB, gzip ~49 KB)