Skip to main content

Willkommen in unserem Help Center!

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.

man paying
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:

Payment_Window_Branding_1.png
Payment_Window_Branding_2.jpeg
Checkout-Oberfläche

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

  1. Die Oberfläche, die wir in diesem Artikel betrachten, finden Sie unter Konfiguration > Checkout.

    Checkout_Interface.png
  2. 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.

Checkout_Interface2.png

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.

Checkout_Interface3.png

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.

Checkout_Interface4.png

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.

Checkout_Interface5.png

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

  1. Klicken Sie auf Konfiguration > Checkout.

  2. Klicken Sie auf der Checkout Seite auf eine Ihrer Konfigurationen in der Liste. Wenn Sie starten, können Sie auf Standardkonfiguration - default configuration klicken.

  3. Auf der Checkout bearbeiten Seite scrollen Sie zur Design Box.

  4. Klicken Sie auf Benutzerdefinierten Style einrichten.

  5. Die Checkout Style Seite wird geöffnet.

    Checkout_Style_Reepay.png

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:

Reepay_Admin_-_Checkout_Style_Device_Switch.png

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

Reepay_Admin_-_Checkout_Style_Credit_Card.png

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

Reepay_Admin_-_Checkout_Style_Subscription.png

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.

Reepay_Admin_-_Checkout_Style_General_.png

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:

JSON_Editor_checkout.png

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.

JSON3.png