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.

Mann zahlt

Checkout Branding

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

Mit dem Checkout Style Editor für den Frisbii Pay Checkout kannst Du das Bezahlfenster gestalten, indem Du Farben, Text und vieles mehr änderst. Wenn Sie dies mit dem Hochladen Ihres Logos im Zahlungsfenster kombinieren, können Sie ein Zahlungsfenster erreichen, das besser zu Ihrer Marke passt.

Zahlungsfenster ohne extra Styling

Das Branding Ihres Zahlungsfensters ist optional. Wenn Sie nicht die Zeit oder die Kapazitäten haben, jetzt daran zu arbeiten, können Sie es so lassen, wie es standardmäßig ist, und später über die Gestaltung nachdenken.

In diesem Fall sieht Ihr Zahlungsfenster so aus:

Checkout-Oberfläche

Frisbii Pay stellt Dir zwei Benutzeroberflächen zur Verfügung, die wir unterscheiden müssen:

Die Schnittstelle, um die es in diesem Artikel geht, finden Sie unter Konfigurationen > Checkout-Verwaltung > Checkout.
Der Checkout Helper befindet sich unter Integration und Tools > Checkout Helper. Dieser wird in einem anderen Artikel beschrieben.

Sobald Sie auf die Standardkonfiguration geklickt haben, können Sie die verschiedenen Abschnitte der Seite "Kasse bearbeiten" bearbeiten. Schauen wir uns diese Abschnitte im Detail an.

Identität

In diesem Abschnitt können Sie den Namen Ihrer Prüfkonfiguration und einen Handle festlegen.

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

Gebietsschema

Hier können Sie die Sprache Ihrer Kasse einstellen, indem Sie die von uns bereitgestellte Dropdown-Liste verwenden.

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

Zahlungsmethoden-Einstellungen

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

Nach dieser Wahl der Zahlungsmethode können Sie entscheiden, ob Sie die DankOrt Card mit einem Co-Branding versehen möchten. Sie haben die Wahl zwischen:

Keine Präferenz
Dankort
Visa

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

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

Im Feld Payment Method Order unten können Sie entscheiden, ob Sie die ausgewählten Zahlungsmethoden in einer bestimmten Reihenfolge anordnen möchten.

Design

Nun kommen wir zum Styling Teil Ihres Checkouts.

Sobald Sie Ihr Logo hochgeladen haben, können Sie die Vorschau direkt neben dem Upload sehen.

Benutzerdefinierten Style bearbeiten anklicken, um den Checkout-Style-Editor zu öffnen. Eine detaillierte Beschreibung befindet sich im Kapitel Checkout Style Editor.

Konfiguration des Abonnements

Wenn diese Konfiguration aktiviert ist, sind die Abonnementdetails im Checkout standardmäßig ausgeklappt.

Konfiguration der Zustimmung

Als Händler haben Sie nun die Möglichkeit, die verschiedenen Bedingungen und Richtlinien, die mit dem Kauf Ihrer Produkte verbunden sind, zum Zeitpunkt der Kaufabwicklung separat auszuweisen.

Sie können Ihre Kunden zum Zeitpunkt der Kaufabwicklung über verschiedene Richtlinien wie Stornierungs-, Rückgabe- und Versandrichtlinien usw. informieren.

"Definition der Zustimmung hinzufügen" anklicken, um die Richtlinie aufzunehmen.

screenshot-staging-admin_Frisbii_plus-2025_01_20-17_46_15.png

Sie können den genauen Text konfigurieren, wie er auf der gehosteten Seite erscheinen soll. Der Anzeigenamen der Richtlinie kann geändert werden, damit er anders sichtbar ist, als die Richtlinie in der App gespeichert wurde. Wenn die Richtlinie z. B. "Demo Policy" heißt und den Handle "demo-policy" hat und sie "New Policy" heißen soll, die Richtlinie einfach wie folgt {{demo-policy: New Policy}} im Textfeld "consent" konfigurieren.

screenshot-staging-admin_Frisbii_plus-2025_01_20-17_49_02.png

Sie können zusätzlich konfigurieren, wie der Zustimmungstext und der Name der Richtlinie in verschiedenen Sprachen angezeigt wird, indem Sie auf die Schaltfläche Übersetzen oben rechts klicken.

screenshot-staging-admin_Frisbii_plus-2025_01_20-17_47_23.png

screenshot-staging-admin_Frisbii_plus-2025_01_20-17_51_56.png

Hier erfahren Sie mehr darüber, wie Sie verschiedene Richtlinien erstellen und bearbeiten können. Bitte beachten Sie diesen Link.

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 > Kassenverwaltung > Kasse.
Klicken Sie auf der Seite "Kasse" auf eine Ihrer Konfigurationen in der Liste. Wenn Sie beginnen, können Sie auf Standardkonfiguration klicken.
Blättern Sie auf der Seite "Kasse bearbeiten" zum Feld "Design".
Benutzerdefinierten Style bearbeiten anklicken.
Die Seite Checkout Style wird geöffnet.

Großartig! Da Sie bereits hier sind, lassen Sie uns einen kleinen Rundgang durch die Schnittstelle machen.

Allgemeines Styling

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

Bitte beachten Sie, dass Sie entweder die Kasse für Charge/ Recurring Session oder eine Subscription Session gestalten können.
Im Bereich Previews der Benutzeroberfläche können Sie zwischen den beiden Registerkarten wechseln.
Sie können auch die beiden Geräte Mobile und Desktop testen.

Das allgemeine Stylinggilt für diesen Teil des Checkouts für die Abrechnungssitzung/wiederkehrende Sitzung:

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

Wir haben alle Möglichkeiten, die Sie haben, im Abschnitt Allgemeines Styling aufgeführt:

Allgemein	Wählen Sie die Farbe: > der Hintergrund. > die Schaltfläche Deaktiviert. > die Schaltfläche Aktiviert. Hinweis Sie werden die Schaltflächen nur sehen, wenn Sie die Farbe ändern. Entweder den Hex-Code der Farbe direkt eingeben Oder in das Feld klicken und den RGB-Code eingeben oder auf die Farben klicken und die Eingabetaste drücken.
Grenze	> Fokussiert: Klicken Sie in die Felder in der Vorschau (z.B. Kartennummer), um die Auswirkungen zu sehen. > Ungültig: Dieser Effekt wird angezeigt, wenn der Kunde ungültige Daten in die Felder eingibt. > Standard: Dies ist das normale Aussehen der Ränder, ohne dass sie angeklickt werden oder ungültige oder gültige Informationen markiert werden. > Gültig: Wählen Sie die Farbe, die anzeigt, dass der Kunde die Felder korrekt ausgefüllt hat. Hinweis 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 farbenblinde Kunden. > Schriftfamilie: Sie können zwischen 12 gängigen Schriftarten wählen. > Schriftgröße: Schriftgröße auf dem Desktop (in Pixel). > Mobile Schriftgröße: Schriftgröße auf Mobiltelefonen (in Pixel). Wir empfehlen Ihnen, das Ergebnis auf Ihrem Gerät zu testen. > (Mobil)Schriftstärke: Der Effekt hängt von der gewählten Schriftart ab.
Eingabegrenze	Erläuterung siehe border.
Platzhaltertext eingeben	Sie können mit dem Ablaufdatum Platzhalter MM/JJ testen. Erläuterung siehe Schriftart.
Eingabe von Standardtext	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.
Schaltfläche "Bezahlen	Gestalten Sie den Text "Bezahlen Sie EUR XXX" des Haupt-Buttons des Zahlungsfensters. Um die Hintergrundfarbe der Schaltfläche zu ändern, verwenden Sie bitte den Abschnitt Allgemein, den wir oben in dieser Tabelle besprochen haben. Erläuterung siehe Schriftart.

Erweitertes Checkout-Styling

Im Gegensatz zum allgemeinen Styling, das wir gerade gesehen haben, ändert sich die erweiterte Styling-Option zwischen Checkout und Abonnement. Um zwischen den beiden Optionen zu wechseln, klicken Sie entweder auf die Registerkarte Gebühr/ Wiederkehrende Sitzung oder auf die Registerkarte Abonnement-Sitzung im Vorschaubereich des Bildschirms.

Eine Erklärung des Menüs finden Sie unter Fonts im Kapitel General Styling.

Allgemeiner Checkout	Ändern Sie die Farbe der Schaltfläche Weiter, die Sie finden, wenn Sie auf MobilePay oder ViaBillon im Vorschaubildschirm klicken.
Name der Auftragszeile	Scrollen Sie nach oben und klicken Sie auf View Details, um die Änderungen dieser drei Konfigurationspunkte zu sehen.
Menge der Bestellzeile
Betrag der Auftragszeile
Titel der Zahlungsmethode	Ändern Sie den Stil der Wörter Card, MobilePay und ViaBill an der Kasse.
Beschreibung der Zahlung	Um die Änderung zu sehen, scrollen Sie im Abschnitt Vorschau oben, um die Wörter Gesamt und Details anzeigen im gleichen Banner wie Ihr Logo zu sehen.
Zahlungsbetrag	Um die Änderung zu sehen, scrollen Sie im Bereich Vorschau oben, um den Zahlungsbetrag im gleichen Banner wie Ihr Logo zu sehen.

Erweitertes Subscription Styling

Im Gegensatz zum allgemeinen Styling, das wir gerade gesehen haben, ändert sich die erweiterte Styling-Option zwischen Checkout und Abonnement. Um zwischen den beiden Optionen zu wechseln, klicken Sie entweder auf die Registerkarte Gebühr/ Wiederkehrende Sitzung oder auf die Registerkarte Abonnement-Sitzung im Vorschaubereich des Bildschirms.

Eine Erklärung des Menüs finden Sie unter Fonts im Kapitel General Styling.

Allgemeines Abonnement	Boxenschatten: Legen Sie einen Schatteneffekt hinter die Preisauszeichnung Box.
Unternehmensname	Ändern Sie den Stil des Unternehmensnamens, der auf dem gleichen Banner angezeigt wird wie Ihr Logo.
Adresse des Unternehmens	Ändern Sie das Format der Adresse, die sich unter dem Unternehmensnamen befindet.
Titel der Kalkulationsposition	Ändern Sie den Stil des Titels "Abonnement pro Monat" im Feld Pricing.
Preisartikelzeile	Ändern Sie den Stil der Zeile des Aufzählungszeichens unter dem Titel im Feld Preisgestaltung. z.B. EUR10.00 (inkl. MwSt.) - Monatlicher Plan Demo
Titel	Ändern Sie den Stil des Titels "Geben Sie Ihre Zahlungsinformationen an".
Untertitel	Ändert den Stil des Untertitels "Karteninformationen".
Bedingungen	Ändern Sie den Stil der Zeile "Ich habe die Abonnementbedingungen gelesen und akzeptiert".

Aktionen

Sie haben vier Buttons oben rechts auf Ihrem Bildschirm:

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

JSON Editor

Diese Schnittstelle ermöglicht es Ihnen, Plain JSON einzufügen, um eine 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"
			}

			,
			"ungültig": {
				"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"
			}

			,
			"ungültig": {
				"width": "2px"
			}
		}
	}
}

Sie können die Tasten auch manuell mit dem Editor eingeben.

Anyday