Billing und Usage

Pakete, Plätze, Zahlungsmethoden, Verbrauch und Limits.

2 Components · 10 Variants

Kategorie wechseln

billing

Abrechnung

Abrechnungsscreens für Apps. Paket wechseln mit anteiligem Preis, Plätze kaufen, Zahlungsmethoden verwalten, fair kündigen und Rechnungsdaten pflegen.

Paket wechseln
Plätze
Zahlungsmethoden
Kündigung
Rechnungsdaten

Props und Details

Paket wechseln

Pakete als Auswahl mit Monats- und Jahrespreis, Zusammenfassung mit neuen und wegfallenden Funktionen, Gutschrift für ungenutzte Tage und dem heute fälligen Betrag.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/billing

Bringt mit utils, kit, button, icon, input, select, dialog, sidebar

Usage

<Billing variant="change-plan" title="Plan" plans={[{ id, name, monthly, yearly, features }]} current={{ plan, cycle, periodStart, periodEnd }} />

Source

Plätze

Zähler mit einem Feld je Platz, neuer Betrag, anteilige Belastung oder Gutschrift und ein Hinweis, wenn Plätze noch belegt sind.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/billing

Bringt mit utils, kit, button, icon, input, select, dialog, sidebar

Usage

<Billing variant="seats" title="Seats" seats={{ purchased, used, price, periodEnd }} />

Source

Zahlungsmethoden

Karten und Lastschrift mit Standard, Entfernen mit Rückfrage und ein Formular mit gezeichneter Karte, die sich für die Prüfnummer umdreht.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/billing

Bringt mit utils, kit, button, icon, input, select, dialog, sidebar

Usage

<Billing variant="payment-methods" title="Payment" methods={[{ id, kind, holder, last4, expires, default }]} />

Source

Kündigung

Drei Schritte mit Grund, einem Angebot passend zum Grund und einer klaren Bestätigung, was bleibt und was endet.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/billing

Bringt mit utils, kit, button, icon, input, select, dialog, sidebar

Usage

<Billing variant="cancel-flow" title="Cancel" cancel={{ plan, price, endsOn, reasons, offer, keep, lose }} />

Source

Rechnungsdaten

Adresse, USt-IdNr. mit Länderprüfung und Rechnungsempfänger als Chips, dazu eine Rechnungsvorschau, die beim Tippen mitläuft, und eine Speicherleiste.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/billing

Bringt mit utils, kit, button, icon, input, select, dialog, sidebar

Usage

<Billing variant="billing-details" title="Billing details" details={{ company, street, postalCode, city, country, vatId, emails }} countries={[…]} />

Source

usage

Verbrauch und Limits

Verbrauchs-Screens. Kontingente mit Prognose, Tagesdiagramm mit erwartetem Rest des Zeitraums, Monatsbudget mit Hinweisen, Aufteilung und Prepaid-Guthaben.

Kontingente
Tagesverbrauch
Ausgabenlimit
Aufteilung
Guthaben

Props und Details

Kontingente

Jedes Kontingent mit Verbrauch und Rest, gestrichelter Prognose für den Zeitraum, Zustand nah am Limit und dem Tag, an dem es in diesem Tempo erreicht ist.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/usage

Bringt mit utils, kit, button, icon, select, switch, sidebar

Usage

<Usage variant="quotas" title="Usage" quotas={[{ id, label, used, limit, unit, icon }]} period={{ start, end }} />

Source

Tagesverbrauch

Balken je Tag, der Rest des Zeitraums als Umriss, der tägliche Anteil am Limit als Linie und ein Hinweis auf den Tag, an dem das Limit erreicht ist.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/usage

Bringt mit utils, kit, button, icon, select, switch, sidebar

Usage

<Usage variant="daily-chart" title="Usage" series={[{ id, label, unit, limit, days }]} period={{ start, end }} />

Source

Ausgabenlimit

Ein Halbring mit den Ausgaben gegen das Budget, ein Regler für das Budget, E-Mail-Hinweise bei 50, 80 und 100 % und ein Schalter, um am Budget zu pausieren.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/usage

Bringt mit utils, kit, button, icon, select, switch, sidebar

Usage

<Usage variant="spend-limits" title="Budget" spend={{ current, cap, max, alerts, hardStop }} />

Source

Aufteilung

Ein gestapelter Balken aller Projekte und eine sortierbare Liste mit Anteilen, der Wechsel der Kennzahl sortiert die Zeilen gleitend neu.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/usage

Bringt mit utils, kit, button, icon, select, switch, sidebar

Usage

<Usage variant="breakdown" title="Breakdown" metrics={[{ id, label, unit }]} items={[{ id, label, meta, values }]} />

Source

Guthaben

Das Guthaben mit Reichweite, Pakete zum Kaufen, automatisches Aufladen unter einer Marke und der Verlauf.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/usage

Bringt mit utils, kit, button, icon, select, switch, sidebar

Usage

<Usage variant="credits" title="Credits" credits={{ balance, perDay, packs, history, autoTopUp }} />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Billing und Usage stehen.

Paket wechseln

Plätze

Zahlungsmethoden

Kündigung

Rechnungsdaten

Kontingente

Tagesverbrauch

Ausgabenlimit

Aufteilung

Guthaben

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit