Checkout

Der Checkout ist der Punkt im Einkaufsprozess, an dem die Verbraucher ihre Einkäufe abschließen und ein Unternehmen für bestimmte Produkte oder Dienstleistungen bezahlen.

Checkout Branding

Dieser Artikel zeigt Ihnen, wie Sie Ihr Zahlungsfenster gestalten können.

Mit dem Checkout Style Editor für Billwerk+ Payments Checkout, können Sie das Zahlungsfenster durch Ändern von Farben, Text und vieles mehr gestalten. Laden Sie dazu noch ihr Logo hoch, um Ihr Zahlungsfenster optimal an das Look & Feel Ihrer Marke anzupassen.

Zahlungsfenster ohne extra Styling

Das Branding Ihres Zahlungsfensters ist optional. Wenn Sie nicht über die Zeit oder die Kapazitäten verfügen, um jetzt daran zu arbeiten, können Sie vorerst die Standardansicht benutzen, und denken später an das Styling.

In diesem Fall sieht Ihr Zahlungsfenster so aus:

Checkout-Oberfläche

Billwerk+ Payments stellt Ihnen zwei Benutzeroberflächen zur Verfügung, die wir uns jetzt genauer anschauen:

Die Oberfläche, die wir in diesem Artikel betrachten, finden Sie unter Konfiguration > Checkout.
Der Checkout Helper kann unter Entwickler > Checkout Helpergefunden werden. Diese ist Gegenstand eines anderen Artikels.

Wenn Sie auf Standardkonfiguration - Default Configuration geklickt haben, können Sie die verschiedenen Bereiche der Checkout bearbeiten Seite einsehen. Schauen wir uns diese Bereiche im Detail an.

Identität

In diesem Abschnitt können Sie den Namen Ihrer Checkout Konfiguration festlegen und einen Handle setzen.

Dies hilft Ihnen, Ihre Konfiguration zu identifizieren, falls Sie verschiedene Konfigurationen für Checkouts verwenden.

Regionale Einstellungen

Hier können Sie die Sprache des Zahlungsfensters einstellen, indem Sie eine Sprache aus der bereitgestellten Liste auswählen.

Im Feld Betragsformatierung können Sie festlegen, wie die Währungen angezeigt werden.

Zahlungsmethoden

In diesem Abschnitt Sie können auswählen, ob Sie dem Kunden alle Zahlungsmethoden anbieten möchten oder nur eine Auswahl präsentieren möchten.

EN_Payment_methods_Select_all_Billwerk__Admin_-_Checkout_Edit.png

Nach der Auswahl der Zahlungsmethode können Sie entscheiden, ob Sie die DankOrt Card mit einem Co-Branding versehen möchten oder nicht. Sie können wählen zwischen:

Keine Präferenz
Dankort
Visa

Lesen Sie mehr über Dankort und ob Sie die Wahl Ihrem Kunden überlassen.

Am unteren Ende des Feldes können Sie entscheiden, ob Sie Testkarteninformationen anzeigen möchten oder nicht.

Im Abschnitt Reihenfolge der Zahlungsmethode, können Sie entscheiden, ob Sie die gewählten Zahlungsmethoden in einer bestimmten Reihenfolge arrangieren möchten.

Design

Nun kommen wir zum Styling Teil Ihres Checkouts.

Sobald Sie Ihr Logohochgeladen haben, sehen Sie die Vorschau direkt neben dem Upload.

Klicken Sie auf Benutzerdefinierten Style einrichten um den Checkout Style Editor zu öffnen.

Wir werden diese Oberfläche im nächsten Artikel besprechen.

Checkout-Style-Editor

Mit diesem Editor können Sie den Stil des Zahlungsfensters (auch für den Subscription-teil) an Ihr Corporate Design anpassen.

Sie finden folgende Kapitel:

Zugang zum Editor

Um diese Oberfläche zu öffnen

Klicken Sie auf Konfiguration > Checkout.
Klicken Sie auf der Checkout Seite auf eine Ihrer Konfigurationen in der Liste. Wenn Sie starten, können Sie auf Standardkonfiguration - default configuration klicken.
Auf der Checkout bearbeiten Seite scrollen Sie zur Design Box.
Klicken Sie auf Benutzerdefinierten Style einrichten.
Die Checkout Style Seite wird geöffnet.

Großartig! Da Sie bereits hier sind, lassen Sie uns eine kleine Tour durch die Oberfläche machen.

Allgemeines Styling

In dieser Oberfläche können Sie festlegen, wie Ihre Gebühren, wiederkehrende und Subscription-sitzungen in Ihrem Zahlungsfenster erscheinen.

Achtung

Bitte beachten Sie, dass Sie entweder den Checkout für Charge/ Recurring Session oder eine Subscription Session gestalten können.

In dem Vorschau -Bereich der Oberfläche können Sie zwischen den beiden Registerkarten wechseln.

Denken Sie auch daran, verschiedene Endgeräte zu simulieren, nämlich Mobile und Desktop:

Das Allgemeine Styling gilt für diesen Teil des Checkouts für die Charge/ Recurring Session:

und gilt auch für diesen Teil der Subscription Session:

Wir haben alle Optionen des Allgemeinen Stylings aufgelistet:

Allgemein	Wählen Sie die Farbe: > des Hintergrunds. > des Deaktivierten Buttons. > des Aktivierten Buttons. Anmerkung Sie sehen die Buttons nur, wenn Sie die Farbe ändern. Entweder geben Sie den Hex-Code der Farbe direkt ein Oder Sie klicken auf das Feld und geben den RGB-Code ein oder klicken auf die Farben und drücken dann Enter.
Rand	> Fokussiert: Klicken Sie in die Felder der Vorschau (z.B. Kartennummer), um den Effekt zu sehen. > Ungültig: Dieser Effekt wird angezeigt, wenn die Kunden ungültige Daten in die Felder eingeben. > Standard: Dies ist das normale Aussehen der Ränder, wenn nicht auf das jeweilige Feld geklickt wurde, oder ungültige oder gültige Informationen eingegeben wurden. > Gültig: Wählen Sie die Farbe, die anzeigt, dass der Kunde die Felder korrekt ausgefüllt hat. Anmerkung Sie müssen keine Breite angeben, wenn Sie mit der Standardbreite zufrieden sind.
Schriftart	> Farbe: Achten Sie auf die Lesbarkeit des Textes und berücksichtigen Sie eine eventuelle Farbenblindheit Ihrer Kunden. > Schriftarten: Sie können zwischen 12 beliebten Schriftarten wählen. > Schriftgröße: Schriftgröße auf dem Desktop (in Pixel). > Schriftgröße für Mobilgeräte: Schriftgröße auf Mobiltelefonen (in Pixel). Wir empfehlen das Ergebnis auf Ihrem Gerät zu testen. > Schriftstärke für Mobilgeräte: Der Effekt hängt von der von Ihnen gewählten Schriftart ab.
Rand des Eingabefeldes	Erläuterung siehe Rand.
Platzhaltertext eingeben	Sie können mit dem Ablaufdatum Platzhalter MM/JJ testen. Erläuterung siehe Schriftart.
Standardtext eingeben	Geben Sie zum Testen einen Text in die Felder (z.B. Kartennummer) ein, um den Effekt zu sehen. Erläuterung siehe Schriftart.
Etiketten	Styling der Feldnamen, z.B. Kartennummer. Erläuterung siehe Schriftart.
Bezahlen Button	Gestalten Sie den Text "Bezahlen Sie EUR XXX" des Haupt-Buttons des Zahlungsfensters. Um die Hintergrundfarbe des Buttons zu ändern, benutzen Sie bitte den Allgemein Abschnitt, den wir oben in dieser Tabelle beschrieben haben. Erläuterung siehe Schriftart.

Erweitertes Checkout-Styling

Im Gegensatz zum Allgemeinen Styling, das wir gerade gesehen haben, ändern sich die Optionen im Erweiterten Styling zwischen Abrechnungssitzung / Wiederkehrende Sitzung und Abonnementsitzung . Um zwischen den beiden Optionen zu wechseln, klicken Sie entweder auf die Registerkarte Abrechnungssitzung / Wiederkehrende Sitzung oder auf die Registerkarte Abonnementsitzung im Bereich Vorschauen der Oberfläche.

Für die Erläuterung des Menüs klicken Sie bitte auf Schriftarten im Kapitel Allgemeines Styling.

Allgemeines Checkout	Ändern Sie die Farbe des Fortfahren Buttons, den Sie finden, wenn Sie auf MobilePay oder ViaBillin der Vorschau klicken.
Name der Auftragszeile	Scrollen Sie nach oben und klicken Sie auf Details anzeigen, um die Änderungen dieser drei Konfigurationspunkte zu sehen.
Auftragszeilenmenge
Auftragszeilenbetrag
Titel der Zahlungsmethode	Ändern Sie das Format der Wörter Karte, MobilePay und ViaBill im Checkout.
Zahlungsbeschreibung	Um die Änderung zu sehen, scrollen Sie in der Vorschau nach oben, kontrollieren Sie die Wörter Gesamt und Details anzeigen. Sie finden Sie im selben Banner wie Ihr Logo.
Zahlungsbetrag	Um die Änderung zu sehen, scrollen Sie in der Vorschau nach oben. Dort finden Sie das Wort Zahlungsbetrag im selben Banner wie Ihr Logo.

Erweitertes Subscription Styling

Im Gegensatz zum Allgemeinen Styling, das wir gerade gesehen haben, ändern sich die Optionen im Bereich Erweitertes Subscription Styling wechselt zwischen Abrechnungssitzung / Wiederkehrende Sitzung und Abonnementsitzung . Um zwischen den beiden Optionen zu wechseln, klicken Sie entweder auf die Registerkarte Abrechnungssitzung / Wiederkehrende Sitzung oder auf die Registerkarte Abonnementsitzung im Bereich Vorschauen der Oberfläche.

Für die Erläuterung des Menüs klicken Sie bitte auf Schriftarten im Kapitel Allgemeines Styling.

Allgemeine Subscription	Box-Schatten: Legen Sie einen Schatteneffekt hinter die Pricing Box ein.
Unternehmensname	Ändern Sie den Stil des Unternehmensnamens, der auf dem gleichen Banner angezeigt wird wie Ihr Logo.
Unternehmensadresse	Ändern Sie das Format der Adresse, die sich unter dem Unternehmensnamen befindet.
Titel der Preisposition	Ändern Sie das Format des Titels "Abonnement pro Monat" im Feld Pricing.
Preisposition	Ändern Sie das Format der Zeile unter dem Titel der Pricing Box. z.B. EUR 10.00 (inkl. USt.) - Monatlicher Demo Plan
Titel	Ändern Sie den Stil des Titels "Geben Sie Ihre Zahlungsinformationen an".
Untertitel	Ändert den Stil des Untertitels "Karteninformationen".
Geschäftsbedingungen	Ändern Sie den Stil der Zeile "Ich habe die Bedingungen gelesen und akzeptiert".

Aktionen

Sie haben vier Buttons oben rechts auf Ihrem Bildschirm:

Speichern: Sie können hier klicken, um Ihre Konfiguration zu speichern und für andere Benutzer verfügbar zu machen.
Zurücksetzen: Löscht alle Änderungen, die Sie an der Style-Konfiguration vorgenommen haben, und bringt Sie zurück zur Checkout-Oberfläche.
Aktionen: Öffnet den JSON-Editor.
Hilfe: Führt Sie zu diesem Hilfe-Center oder der Entwickler-Dokumentation.

JSON Editor

Mit dieser Schnittstelle können Sie Plain JSON einfügen, um manuelle Konfiguration zu vermeiden:

Sie können zum Beispiel dieses Code-Snippet eingeben und alle Parameter ändern, die Sie direkt dort haben möchten:

{    "enabledButtonColor": "#F89939",    "disabledButtonColor": "#F89939",    "backgroundColor": "#f8f8f8",    "defaultConfig": {        "border": {            "standard": {                "width": "1px",                "color": "#C1CDC6"            },            "focused": {                "width": "1px",                "color": "#C1CDC6"            },            "valid": {                "width": "1px",                "color": "#C1CDC6"            },            "invalid": {                "width": "2px"            }        }    },    "paymentMethodTitle": {        "color": "#F89939",        "size": "26px",        "weight": 600    },    "paymentDescription": {        "color": "#040707",        "size": "18px",        "weight": 400    },    "paymentAmount": {        "color": "#F89939",        "size": "24px",        "weight": 600    },    "labels": {        "color": "#F89939",        "size": "20px",        "weight": 400    },    "inputs": {        "border": {            "standard": {                "width": "1px",                "color": "#C1CDC6"            },            "focused": {                "width": "1px",                "color": "#C1CDC6"            },            "valid": {                "width": "1px",                "color": "#C1CDC6"            },            "invalid": {                "width": "2px"            }        }    }}

Sie können auch die Schlüssel manuell mit dem Editor eingeben.

In diesem Abschnitt:

Willkommen in unserem Help Center!