Adresse, Zahlung und Einwilligung

Adressfelder, die dem Land folgen, Zahlarten und die Wahl zu E-Mails und Daten.

3 Components · 12 Variants

Kategorie wechseln

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

Adressformular4
Einstellungen und Einwilligungen4
Zahlungsformular4

address-form

Adressformular

Adressen, die zum Land passen. Felder, Reihenfolge, Bezeichnungen und die Prüfung der Postleitzahl folgen dem Land, Liefer- und Rechnungsadresse trennen sich bei Bedarf, gespeicherte Adressen sind Karten, und eine Suche füllt alles aus.

International
Lieferung und Rechnung
Adressbuch
Adresssuche

Props und Details

International

Das Land bestimmt die Felder. Deutschland fragt nach Straße und Hausnummer mit Postleitzahl vor dem Ort, die USA nach Adresszeilen, Stadt, Bundesstaat und ZIP. Die Postleitzahl wird mit Beispiel gegen das Land geprüft.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/address-form

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, input, select, checkbox

Usage

<AddressForm variant="international" countries={["DE", "AT", "CH", "US", "GB"]} defaultCountry="DE" />

Source

Lieferung und Rechnung

Zuerst die Lieferadresse, die Rechnung geht standardmäßig dorthin. Abwählen öffnet eine Rechnungsadresse in eigener Fläche, als Firma bestellen ergänzt Firma und USt-IdNr., der Fuß wiederholt die Adresse in einer Zeile.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/address-form

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, input, select, checkbox

Usage

<AddressForm variant="shipping-billing" defaultCountry="DE" onSubmit={({ address, billing, business }) => …} />

Source

Adressbuch

Gespeicherte Adressen als Karten mit Standard-Kennzeichen, die gewählte trägt einen Akzentring. Die Karte zum Hinzufügen dreht ihr Plus beim Darüberfahren und öffnet ein volles Formular an Ort und Stelle, eine neue Adresse ist sofort gewählt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/address-form

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, input, select, checkbox

Usage

<AddressForm variant="address-book" saved={[{ id, label, name, line1, postcode, city, country, isDefault }]} />

Source

Adresssuche

Ein paar Worte tippen und einen Vorschlag wählen, die getippten Worte sind darin markiert. Pfeiltasten bewegen durch die Liste, Enter wählt, und die Felder klappen gefüllt auf. Von Hand eingeben ist einen Klick entfernt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/address-form

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, input, select, checkbox

Usage

<AddressForm variant="lookup" suggestions={addressesFromYourService} />

Source

consent-preferences

Die Seite, auf die Menschen aus jeder E-Mail oder ihrem Konto zurückkommen. Themen und Häufigkeit mit Speicherleiste, die bei Änderungen erscheint, Abmelden mit sanfterer Option zuerst, Themen gegen Kanäle und Anfragen zu den eigenen Daten.

E-Mail-Themen
Abmelden
Kanäle
Datenschutz-Anfragen

Props und Details

E-Mail-Themen

Themen als Schalter, Pflichtnachrichten sichtbar, aber fest, eine Häufigkeit als Segmentauswahl und eine Pause für 30 Tage. Eine Speicherleiste steigt nur bei Änderungen auf und bleibt unten am Bildschirm.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/consent-preferences

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, input, textarea, switch

Usage

<ConsentPreferences variant="email-topics" email="…" topics={[{ id, title, text, icon, on, locked }]} frequencies={[…]} onSave={(data) => …} />

Source

Abmelden

Zuerst weniger E-Mails, dann nur Wichtiges, zuletzt alles und als letzter Schritt markiert. Der freiwillige Grund öffnet sich nur beim vollständigen Abmelden, die Bestätigung bietet einen Weg zurück.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/consent-preferences

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, input, textarea, switch

Usage

<ConsentPreferences variant="unsubscribe" email="…" onSave={({ choice, reason }) => …} />

Source

Kanäle

Themen gegen Kanäle in einer Tabelle, jede Spalte lässt sich auf einmal ein- oder ausschalten, Haken federn hinein. Auf dem Telefon ist jedes Thema eine Karte mit Kanälen als Chips.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/consent-preferences

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, input, textarea, switch

Usage

<ConsentPreferences variant="channel-matrix" topics={[{ id, title, channels: ["email"] }]} channels={[{ id, label, icon }]} />

Source

Datenschutz-Anfragen

Kopie, Berichtigung, Widerspruch oder Löschung, jede eine Karte mit klarem Ergebnis. Berichtigen öffnet ein Textfeld, Löschen verlangt ein getipptes Wort, damit nichts aus Versehen verschwindet, jede Anfrage bestätigt in ihrer Karte.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/consent-preferences

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, input, textarea, switch

Usage

<ConsentPreferences variant="privacy-requests" email="…" answerTime="within 30 days" onSave={({ request }) => …} />

Source

payment-form

Zahlungsformular

Zahlungsart wählen und bezahlen, ohne Logos von Kartenmarken. Zahlungsarten, die eigene Felder öffnen, die Bestellung neben der Zahlung mit Gutscheincode, eine Lastschrift mit echter IBAN-Prüfung und Ratenzahlung mit jedem Termin.

Zahlungsarten
Mit Bestellübersicht
Lastschrift
In Raten zahlen

Props und Details

Zahlungsarten

Karte, Lastschrift, Rechnung und Überweisung als Karten. Die gewählte öffnet ihre eigenen Felder mit weicher Höhe, der Knopf sagt, was passiert, bei der Karte mit Betrag.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/payment-form

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, input, checkbox, card-input

Usage

<PaymentForm variant="methods" total={89} currency="EUR" methods={["card", "debit", "invoice", "transfer"]} creditor="…" />

Source

Mit Bestellübersicht

Die Karte neben der Bestellung. Ein Gutscheincode wird zum Chip mit der Ersparnis, die Summe steigt neu ein. Auf Telefon und Tablet faltet sich die Bestellung in eine Leiste mit Summe über der Zahlung.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/payment-form

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, input, checkbox, card-input

Usage

<PaymentForm variant="split-summary" lines={[{ title, detail, amount, quantity }]} shipping={0} promoCodes={{ AUTUMN10: 10 }} total={…} />

Source

Lastschrift

Eine IBAN, die sich in Vierergruppen ordnet, das Land der Bank nennt und einen dünnen Balken bis zur erwarteten Länge füllt. Geprüft mit der echten Prüfsumme, gültig zeichnet sie einen Haken, das Mandat steht in klaren Worten.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/payment-form

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, input, checkbox, card-input

Usage

<PaymentForm variant="direct-debit" total={24} creditor="Lumen Rowing Club" />

Source

In Raten zahlen

Auf einmal oder in drei oder sechs Raten ohne Aufpreis. Der Plan neben der Wahl zeichnet sich mit jedem Termin und Betrag neu, der Knopf nennt, was heute belastet wird.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/payment-form

Bringt mit utils, kit, button, icon, reveal, section, motion, form-flow, input, checkbox, card-input

Usage

<PaymentForm variant="installments" total={1290} plans={[1, 3, 6]} startDate="2026-10-21" />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Adresse, Zahlung und Einwilligung stehen.

Auf dieser Seite

International

Lieferung und Rechnung

Adressbuch

Adresssuche

E-Mail-Themen

Abmelden

Kanäle

Datenschutz-Anfragen

Zahlungsarten

Mit Bestellübersicht

Lastschrift

In Raten zahlen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit