--- title: "Checkout" slug: "json-editor" updated: 2025-06-05T15:26:57Z published: 2025-07-22T08:54:06Z canonical: "help.frisbii.com/json-editor" --- > ## Documentation Index > Fetch the complete documentation index at: https://help.frisbii.com/llms.txt > Use this file to discover all available pages before exploring further. # 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. ![Mann zahlt](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/167e6a9c9c126a.jpg?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D) ## Checkout Branding Dieser Artikel zeigt Ihnen, wie Sie Ihr Zahlungsfenster gestalten können. Mit dem [Checkout Style Editor](/frisbii/docs/checkout#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](/frisbii/docs/checkout#checkout-interface) 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: ![Zahlungsfenster_Branding_1.png](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/167e6a9c9c3b71.png?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D)![Zahlungsfenster_Branding_2.jpeg](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/167e6a9c9c5d15.jpeg?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D) ## Checkout-Oberfläche Frisbii Pay stellt Dir zwei Benutzeroberflächen zur Verfügung, die wir unterscheiden müssen: 1. Die Schnittstelle, um die es in diesem Artikel geht, finden Sie unter **Konfigurationen > Checkout-Verwaltung > Checkout**. ![](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/image(152).png?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D) 2. Der Checkout Helper befindet sich unter **Integration und Tools** > **Checkout Helper**. Dieser wird in einem [anderen Artikel](/frisbii/docs/checkout-helper) 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. ![Kasse_Schnittstelle2.png](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/167e6a9c9cb14a.png?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D) 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. ![Kasse_Schnittstelle3.png](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/167e6a9c9ce22a.png?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D) 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 ![](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/image(153).png?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D) [Lesen Sie mehr über Dankort](https://help.frisbii.com/docs/payment-methods#danish-payment-card-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. ![](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/image(154).png?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D) **Benutzerdefinierten Style bearbeiten** anklicken, um den Checkout-Style-Editor zu öffnen. Eine detaillierte Beschreibung befindet sich im Kapitel [Checkout Style Editor](/frisbii/docs/checkout#checkout-style-editor). ### Konfiguration des Abonnements Wenn diese Konfiguration aktiviert ist, sind die Abonnementdetails im Checkout standardmäßig ausgeklappt. ![](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/image(156).png?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D) ### 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](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/167e6a9c9dab11.png?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D) 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](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/167e6a9c9dcc06.png?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D)![screenshot-staging-admin_Frisbii_plus-2025_01_20-17_49_30.png](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/167e6a9c9ded84.png?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D) 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](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/167e6a9c9e0e10.png?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D) ![screenshot-staging-admin_Frisbii_plus-2025_01_20-17_51_56.png](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/167e6a9c9e300c.png?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D) Hier erfahren Sie mehr darüber, wie Sie verschiedene Richtlinien erstellen und bearbeiten können. Bitte beachten Sie diesen [Link](/frisbii/docs/policies-and-documents). ## 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](/frisbii/docs/checkout#Zugang-zum-Editor) - [Allgemeines Styling](/frisbii/docs/checkout#allgemein-styling) - [Erweitertes Checkout-Styling](/frisbii/docs/checkout#erweitertes-checkout-styling) - [Erweitertes Subscription Styling](/frisbii/docs/checkout#erweitertes-abonnement-styling) - [Aktionen](/frisbii/docs/checkout#Aktionen) - [JSON Editor](/frisbii/docs/checkout#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". ![](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/image(158).png?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D) 4. **Benutzerdefinierten Style bearbeiten** anklicken. 5. Die Seite Checkout Style wird geöffnet. ![](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/image(157).png?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D) 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. > [!CAUTION] > 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. ![](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/2025-06-04_11h16_38.gif?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D) Das **allgemeine Styling**gilt für diesen Teil des Checkouts für die **Abrechnungssitzung/wiederkehrende Sitzung**: ![Reepay_Admin_-_Kasse_Style_Kreditkarte.png](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/167e6a9c9ef369.png?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D) und gilt auch für diesen Teil der **Subscription Session**: ![Reepay_Admin_-_Kasse_Style_Abonnement.png](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/167e6a9c9f1992.png?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D) 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**. > [!NOTE] > **Hinweis** > > **Sie werden die Schaltflächen nur sehen, wenn Sie die Farbe ändern.** > > Entweder den [Hex-Code](https://www.color-hex.com/) der Farbe direkt eingeben > > Oder **in das Feld klicken** und den [RGB-Code](https://www.rapidtables.com/web/color/RGB_Color.html) eingeben oder auf die Farben klicken und die **Eingabetaste** drücken. > > ![Reepay_Admin_-_Kassenstil_allgemein_.png](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/167e6a9ca009a4.png?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D) | | --- | --- | | **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. > [!NOTE] > 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](/frisbii/docs/checkout#font) 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](/frisbii/docs/checkout#font) 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](/frisbii/docs/checkout#checkout-interface). - 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: ![JSON_Editor_checkout.png](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/167e6a9ca05cf8.png?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D) Sie können zum Beispiel dieses Code-Snippet eingeben und alle Parameter ändern, die Sie direkt dort haben möchten: ```css { "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. ![JSON3.png](https://cdn.document360.io/b84e1b5d-2ba6-4465-8c62-fb45a2f31314/Images/Documentation/167e6a9ca097d1.png?sv=2026-02-06&spr=https&st=2026-10-26T15%3A17%3A32Z&se=2026-10-26T16%3A17%3A32Z&sr=c&sp=r&sig=eoymB9o%2BXY3KVBSA2zO6J5zNEE%2BEIEw785rUDyB7iGc%3D)