Willkommen in unserem Billwerk+ Optimize Help Center

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:

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.

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.

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:

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.

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.

Um diese Oberfläche zu öffnen

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

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.

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.

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.

Sie haben vier Buttons oben rechts auf Ihrem Bildschirm:

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.