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+ Pay Checkout können Sie das Bezahlfenster gestalten, indem Sie Farben, Text und vieles mehr ändern. 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

Billwerk+ Pay stellt Ihnen zwei Benutzeroberflächen zur Verfügung, die es zu unterscheiden gilt:

1. Die Schnittstelle, um die es in diesem Artikel geht, finden Sie unter Konfigurationen > Checkout-Verwaltung >  Checkout.
   

2. Die Checkout-Hilfe finden Sie unter Developers > Checkout Helper. Dies ist das Thema eines anderen Artikels.

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.

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

Wir werden diese Schnittstelle im nächsten Artikel besprechen.

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.

Klicken Sie auf die Schaltfläche "Add Consent Text", um die Richtlinie aufzunehmen.

Sie können den genauen Text konfigurieren, wie er auf der gehosteten Seite erscheinen soll. Wenn Sie möchten, können Sie auch den Anzeigenamen der Richtlinie ändern, so dass sie anders angezeigt wird, als die Richtlinie in der App gespeichert wurde. Wenn Ihre Richtlinie z. B. "Demo-Police" heißt und den Handle "demo-policy" hat und Sie sie "New Policy" nennen möchten, konfigurieren Sie die Richtlinie einfach wie folgt {{demo-policy: New Policy}} im Textfeld "consent".

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.

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

• Allgemeines Styling

• Erweitertes Checkout-Styling

• Erweitertes Subscription Styling

• Aktionen

• JSON Editor

Zugang zum Editor

Um diese Oberfläche zu öffnen

1. Klicken Sie auf Konfiguration > Kassenverwaltung > Kasse.

2. Klicken Sie auf der Seite "Kasse" auf eine Ihrer Konfigurationen in der Liste. Wenn Sie beginnen, können Sie auf Standardkonfiguration klicken.

3. Blättern Sie auf der Seite "Kasse bearbeiten" zum Feld "Design".
   

4. Klicken Sie auf Benutzerdefinierten Stil einrichten.

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

Vorsicht

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:

Für diesen Teil der Kaufabwicklung für die gebührenpflichtige/wiederkehrende Sitzung gilt das allgemeine Styling :

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

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

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.

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.

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.