White-Label Checkout: Design anpassen

Überblick

Ihre Kunden sollen im Checkout Ihre Marke sehen, nicht die von Kyvento. Unter Einstellungen → „Hosted Pages" gestalten Sie Farben, Typografie und Feinheiten – und mit einer eigenen Domain verschwindet auch die Kyvento-Adresse aus der Browserzeile (siehe Eigene Domain für Checkout nutzen).

Farbschema und Typografie

Der Abschnitt „Farbschema" setzt die Farben für Buttons, Hintergründe, Text und Linien in Checkout und Hosted Pages – jede als Farbwähler oder Hex-Wert. Achten Sie auf ausreichenden Kontrast zwischen Text und Hintergrund; ein schwer lesbarer Checkout kostet Abschlüsse.

Unter „Typografie & Layout" wählen Sie Schriftart, Eckenradius und Button-Stil. So passt sich der Checkout dem Stil Ihrer Website an, ohne dass Sie CSS schreiben.

Eigenes CSS – mit Grenzen

Reichen die Standard-Optionen nicht, ergänzen Sie eigenes CSS. Es wird allerdings serverseitig gegen eine Erlaubnisliste geprüft: Eigenschaften, mit denen sich Elemente überlagern, verschieben oder unsichtbar klickbar machen lassen – darunter position, z-index, cursor, pointer-events – sowie url() und @import sind nicht zugelassen. Verwenden Sie eine davon, wird das Speichern mit einer Meldung abgewiesen. Der Grund ist der Zweck der Seite: Auf einer Zahlungsfläche darf kein Stylesheet verdecken, worauf der Kunde tatsächlich klickt.

Eigenes JavaScript einbinden

Unter „Custom JavaScript" lässt sich ein externes Skript in Checkout und Hosted Pages einbinden – etwa ein Chat-Widget oder ein Analytics-Baustein. Drei Dinge müssen zusammenkommen, sonst wird nichts geladen:

• eine absolute HTTPS-Adresse. http:, javascript: und data: weist Kyvento ab.
• ein Subresource-Integrity-Hash im Format sha256-…, sha384-… oder sha512-…. Er ist Pflicht; ohne ihn lässt sich die URL gar nicht speichern.
• der Aktivieren-Schalter. Ohne ihn bleibt das Skript aus, auch bei vollständigen Angaben.

Der Hash ist keine Förmlichkeit: Auf einer Zahlungsseite könnte ein nachträglich ausgetauschtes Skript Eingaben mitlesen. Der Browser lädt es nur, wenn die Prüfsumme übereinstimmt – ändert der Anbieter die Datei, bleibt es aus, bis Sie den Hash aktualisieren. Binden Sie deshalb nur Skripte ein, deren Herkunft Sie kennen, und bevorzugen Sie versionierte URLs.

Kyvento kann Custom JavaScript für einzelne Accounts sperren; in diesem Fall erscheint an Ort und Stelle ein Hinweis mit dem Weg über ein Support-Ticket.

Logo und Firmenname

Ihr Firmenlogo pflegen Sie zentral in den Account-Einstellungen – es erscheint unter anderem in Ihren System-E-Mails, die zusätzlich Ihre Primärfarbe übernehmen. Im Checkout tritt Ihr Unternehmen mit dem Firmennamen auf, auch im Seitentitel des Browsers.

Nicht verwechseln: das Kundenportal

Das Kundenportal – der Self-Service für Bestandskunden – hat unter Einstellungen → „Branding" (Gruppe „Kundenportal") ein eigenes Erscheinungsbild, inklusive eigenem CSS und eigenem Custom-JavaScript samt eigenem Schalter. Checkout-Design und Portal-Branding sind voneinander unabhängig; pflegen Sie beide, wenn Sie einen durchgängigen Markenauftritt wollen.

Empfehlungen

1. Primärfarbe = Ihre Markenfarbe, Rest sparsam – ein ruhiger Checkout wirkt vertrauenswürdiger als ein bunter.
2. Nach jeder Änderung den Checkout-Link im Privatfenster öffnen und alle Schritte durchsehen, auch auf dem Smartphone.
3. Mit der eigenen Domain abrunden – siehe Eigene Domain für Checkout nutzen.

Nächste Schritte

• Verkaufsprozess-Einstellungen – siehe Hosted Pages einrichten
• Eigene Domain aufschalten – siehe Eigene Domain für Checkout nutzen