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