From 3c574ed0c45eeb1db858e3db4858b777c70e4502 Mon Sep 17 00:00:00 2001 From: qcigano Date: Sun, 2 Aug 2026 19:26:12 +0200 Subject: [PATCH] =?UTF-8?q?Zahlungsarten:=20echte=20PayPal-Verbindung,=20K?= =?UTF-8?q?reditkarte=20hinzugef=C3=BCgt,=20echte=20Bankverbindung=20f?= =?UTF-8?q?=C3=BCr=20Vorkasse?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Standard-Set für deutsche Online-Shops recherchiert und umgesetzt: PayPal, Klarna, Kreditkarte (Visa & Mastercard, neu) und Banküberweisung (Vorkasse). - PayPal: echte PayPal Smart Buttons über das offizielle JS-SDK (Sandbox- Client-ID, kostenlos & ohne Konto testbar). Klick öffnet den echten PayPal-Login-Popup und schließt eine (Test-)Zahlung wirklich ab. Für den Live-Betrieb genügt später der Tausch gegen VanVans echte (kostenlose) PayPal-Business-Client-ID. - Banküberweisung (Vorkasse): braucht gar keine externe Anbindung — zeigt jetzt VanVans echte Kontodaten an, die sie im neuen Adminbereich-Feld "🏦 Bankverbindung" selbst einträgt. Damit ist diese Zahlungsart schon zu 100% fertig, ganz ohne Drittanbieter. - Klarna & Kreditkarte: echte Live-Anbindung braucht ein Händlerkonto bzw. einen Zahlungsdienstleister (Phase 2, Cloudflare Worker). Bis dahin ein sauber gestalteter, funktionierender Verbindungs-/Eingabe-Ablauf, der 1:1 austauschbar ist, sobald die echten Zugänge da sind. - Auswahl einer Zahlungsart klappt jetzt direkt das passende Panel auf statt nur eine Radiobox zu markieren. Verifiziert per Puppeteer-Funktionstest gegen den echten Build: PayPal- SDK lädt und rendert einen echten Button (iframe), Kreditkartenfelder, Klarna-Demo-Verbindung und echte Bankdaten-Anzeige funktionieren fehlerfrei, Adminbereich lädt weiterhin ohne Konfigurationsfehler. --- public/admin/config.yml | 18 +++++ src/content/bankverbindung.json | 6 ++ src/data/bankverbindung.ts | 20 ++++++ src/i18n/ui.ts | 32 +++++++++ src/pages/ch/checkout/index.astro | 113 ++++++++++++++++++++++++++++- src/pages/checkout/index.astro | 115 +++++++++++++++++++++++++++++- src/pages/en/checkout/index.astro | 113 ++++++++++++++++++++++++++++- src/pages/fr/checkout/index.astro | 113 ++++++++++++++++++++++++++++- src/styles/global.css | 39 ++++++++++ 9 files changed, 560 insertions(+), 9 deletions(-) create mode 100644 src/content/bankverbindung.json create mode 100644 src/data/bankverbindung.ts diff --git a/public/admin/config.yml b/public/admin/config.yml index 51d916d..d5b9e68 100644 --- a/public/admin/config.yml +++ b/public/admin/config.yml @@ -253,3 +253,21 @@ collections: - { label: "Rabatt in Prozent (z.B. 10 für 10%)", name: prozent, widget: number, value_type: int, required: false } - { label: "ODER: Rabatt als fester Betrag (€)", name: betrag, widget: number, value_type: float, step: 0.01, required: false } - { label: "Gültig bis (leer = unbegrenzt)", name: bis, widget: datetime, format: "YYYY-MM-DD", date_format: "YYYY-MM-DD", time_format: false, required: false } + + - name: bankverbindung + label: "🏦 Bankverbindung" + icon: account_balance + files: + - name: konto + label: "Bankverbindung für Vorkasse" + file: src/content/bankverbindung.json + description: > + Wird Kund:innen direkt im Checkout angezeigt, sobald sie "Banküberweisung (Vorkasse)" + als Zahlungsart wählen — sie überweisen dann selbst auf dieses Konto. Bitte einmal mit + deinen echten Kontodaten ausfüllen, sonst bekommen Kund:innen nur einen Platzhalter + angezeigt. + fields: + - { label: Kontoinhaber:in, name: kontoinhaber, widget: string, required: false } + - { label: IBAN, name: iban, widget: string, required: false, hint: "z.B. DE12 3456 7890 1234 5678 90" } + - { label: BIC, name: bic, widget: string, required: false } + - { label: Bank (Name), name: bank, widget: string, required: false } diff --git a/src/content/bankverbindung.json b/src/content/bankverbindung.json new file mode 100644 index 0000000..9508ca9 --- /dev/null +++ b/src/content/bankverbindung.json @@ -0,0 +1,6 @@ +{ + "kontoinhaber": "", + "iban": "", + "bic": "", + "bank": "" +} diff --git a/src/data/bankverbindung.ts b/src/data/bankverbindung.ts new file mode 100644 index 0000000..22d79fa --- /dev/null +++ b/src/data/bankverbindung.ts @@ -0,0 +1,20 @@ +// Bankverbindung für die Zahlungsart "Vorkasse/Banküberweisung" — von VanVan im +// Adminbereich unter "🏦 Bankverbindung" eingetragen. Wird direkt (ohne Umweg über einen +// Zahlungsanbieter) im Checkout angezeigt, sobald diese Zahlungsart gewählt wird — das ist die +// einzige der vier Zahlungsarten, die ganz ohne externe Anbindung zu 100% "echt" funktioniert. + +// @ts-ignore -- JSON-Import, zur Build-Zeit von Astro/Vite aufgelöst +import raw from "../content/bankverbindung.json"; + +export interface Bankverbindung { + kontoinhaber: string; + iban: string; + bic: string; + bank: string; +} + +export const bankverbindung = raw as Bankverbindung; + +export function bankverbindungVollstaendig(b: Bankverbindung): boolean { + return !!(b.kontoinhaber && b.iban); +} diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts index 7bf4ee5..a7f637c 100644 --- a/src/i18n/ui.ts +++ b/src/i18n/ui.ts @@ -164,6 +164,14 @@ export const ui = { revocationPrefix: "Ich habe die", revocationLink: "Widerrufsbelehrung", revocationAnd: "und", privacyLink: "Datenschutzerklärung", revocationSuffix: "zur Kenntnis genommen.", bankTransfer: "Banküberweisung (Vorkasse)", orderButton: "Jetzt zahlungspflichtig bestellen", emptyCartAlert: "Dein Warenkorb ist leer.", + creditCard: "Kreditkarte", creditCardSub: "Visa & Mastercard", + payPalHint: "Bezahle sicher und schnell direkt mit deinem PayPal-Konto.", + klarnaHint: "Rechnung, Ratenkauf oder Sofortüberweisung – wähle bei Klarna, wie du zahlen möchtest.", + klarnaConnect: "Weiter zu Klarna →", klarnaConnecting: "Verbinde mit Klarna …", klarnaConnected: "Verbindung zu Klarna hergestellt (Demo)", + cardHint: "Deine Kartendaten werden sicher übertragen.", cardNumber: "Kartennummer", cardExpiry: "Gültig bis", cardCvc: "CVC", + bankHintReal: "Bitte überweise den Rechnungsbetrag nach Bestellabschluss an folgendes Konto. Deine Ware wird nach Zahlungseingang verschickt.", + bankPlaceholder: "Die Bankverbindung wird dir nach Bestelleingang per E-Mail zugesendet.", + bankHolder: "Kontoinhaber:in", bankIban: "IBAN", bankBic: "BIC", bankBankName: "Bank", shippingHintTitle: "Versandhinweis", shippingHint: "Versand ausschließlich per DHL nach Deutschland, Österreich, Schweiz und Luxemburg. Lieferzeit 2–7 Werktage. Versandkostenfrei ab 75 €. Versand erst nach Zahlungseingang.", shippingLink: "Mehr zu Versand & Zahlung →", @@ -337,6 +345,14 @@ export const ui = { revocationPrefix: "I have taken note of the", revocationLink: "withdrawal notice", revocationAnd: "and", privacyLink: "privacy policy", revocationSuffix: ".", bankTransfer: "Bank transfer (prepayment)", orderButton: "Order now, subject to payment", emptyCartAlert: "Your cart is empty.", + creditCard: "Credit card", creditCardSub: "Visa & Mastercard", + payPalHint: "Pay securely and instantly with your PayPal account.", + klarnaHint: "Invoice, installments or instant transfer – choose how you'd like to pay with Klarna.", + klarnaConnect: "Continue to Klarna →", klarnaConnecting: "Connecting to Klarna …", klarnaConnected: "Connected to Klarna (demo)", + cardHint: "Your card details are transmitted securely.", cardNumber: "Card number", cardExpiry: "Expiry", cardCvc: "CVC", + bankHintReal: "Please transfer the invoice amount to the following account after completing your order. Your items ship once payment is received.", + bankPlaceholder: "Bank details will be sent to you by email after your order.", + bankHolder: "Account holder", bankIban: "IBAN", bankBic: "BIC", bankBankName: "Bank", shippingHintTitle: "Shipping note", shippingHint: "Shipped exclusively via DHL to Germany, Austria, Switzerland and Luxembourg. Delivery time 2–7 business days. Free shipping from €75. Shipping only starts after payment has been received.", shippingLink: "More on shipping & payment →", @@ -510,6 +526,14 @@ export const ui = { revocationPrefix: "Ich ha d'", revocationLink: "Widerrufsbelehrig", revocationAnd: "und d'", privacyLink: "Datenschutzerklärig", revocationSuffix: "zur Kenntnis gnoh.", bankTransfer: "Banküberwysig (Vorusszahlig)", orderButton: "Jetzt zahligspflichtig bstelle", emptyCartAlert: "Din Warenchorb isch leer.", + creditCard: "Kreditkarte", creditCardSub: "Visa & Mastercard", + payPalHint: "Zahl sicher und schnäll dirräkt mit dim PayPal-Konto.", + klarnaHint: "Rächnig, Ratechauf oder Sofortiübrwysig – wähl bi Klarna, wie du zahle wosch.", + klarnaConnect: "Wyter zu Klarna →", klarnaConnecting: "Verbindet mit Klarna …", klarnaConnected: "Verbindig zu Klarna hergstellt (Demo)", + cardHint: "Dini Kartedate werde sicher übertreit.", cardNumber: "Kartenummere", cardExpiry: "Gültig bis", cardCvc: "CVC", + bankHintReal: "Bitte überwys dr Rächnigsbetrag nach Bstellabschluss uf das Konto. Dini Ware wird nach Zahligsigang verschickt.", + bankPlaceholder: "D'Bankverbindig wird dir nach Bstelligang per E-Mail zuegschickt.", + bankHolder: "Kontoinhaber:in", bankIban: "IBAN", bankBic: "BIC", bankBankName: "Bank", shippingHintTitle: "Versandhinwys", shippingHint: "Versand nume per DHL nach Dütschland, Öschterrych, d'Schwiz und Luxemburg. Lieferzyt 2–7 Werktäg. Gratisversand ab 75 €. Dr Versand geit erscht los, wenn d'Zahlig igange isch.", shippingLink: "Meh zu Versand & Zahlig →", @@ -683,6 +707,14 @@ export const ui = { revocationPrefix: "J'ai pris connaissance de la", revocationLink: "notice de rétractation", revocationAnd: "et de la", privacyLink: "politique de confidentialité", revocationSuffix: ".", bankTransfer: "Virement bancaire (paiement anticipé)", orderButton: "Commander avec obligation de paiement", emptyCartAlert: "Votre panier est vide.", + creditCard: "Carte bancaire", creditCardSub: "Visa & Mastercard", + payPalHint: "Payez en toute sécurité et instantanément avec votre compte PayPal.", + klarnaHint: "Facture, paiement en plusieurs fois ou virement instantané – choisissez comment payer avec Klarna.", + klarnaConnect: "Continuer vers Klarna →", klarnaConnecting: "Connexion à Klarna …", klarnaConnected: "Connecté à Klarna (démo)", + cardHint: "Vos données de carte sont transmises en toute sécurité.", cardNumber: "Numéro de carte", cardExpiry: "Date d'expiration", cardCvc: "CVC", + bankHintReal: "Veuillez virer le montant de la facture sur le compte suivant après avoir finalisé votre commande. Vos articles sont expédiés dès réception du paiement.", + bankPlaceholder: "Les coordonnées bancaires vous seront envoyées par e-mail après votre commande.", + bankHolder: "Titulaire du compte", bankIban: "IBAN", bankBic: "BIC", bankBankName: "Banque", shippingHintTitle: "Remarque sur la livraison", shippingHint: "Livraison exclusivement par DHL en Allemagne, Autriche, Suisse et au Luxembourg. Délai de livraison 2 à 7 jours ouvrés. Livraison gratuite dès 75 €. L'expédition n'a lieu qu'après réception du paiement.", shippingLink: "En savoir plus sur la livraison & le paiement →", diff --git a/src/pages/ch/checkout/index.astro b/src/pages/ch/checkout/index.astro index 2a8a54b..3a10fa8 100644 --- a/src/pages/ch/checkout/index.astro +++ b/src/pages/ch/checkout/index.astro @@ -32,6 +32,13 @@ const t = useTranslations(lang); Klarna + +
+
+

{t.checkout.payPalHint}

+
+
+ + + +
+
@@ -103,7 +139,7 @@ const t = useTranslations(lang);