From 6143e5704d741da70a64053815534e25146182a8 Mon Sep 17 00:00:00 2001 From: Nick Szaunig Date: Sun, 6 Sep 2026 03:16:34 +0200 Subject: [PATCH] fix: Zahlungsmethoden-Text vereinheitlichen, Retry-Button in Zahlungsfehler-Mail - Apple Pay/Google Pay geprueft (Stripe-Doku via `stripe docs`): bei der hier verwendeten vollstaendig gehosteten Checkout-Seite (kein payment_method_types, kein ui_mode: "embedded") bereits automatisch enthalten, sobald Kartenzahlung aktiv ist - keine Codeaenderung noetig, keine Domain-Registrierung noetig (die betrifft laut Stripe nur Elements/eingebettete Checkout-Seite). Klaerenden Kommentar in api/checkout/route.ts und README-Abschnitt "Stripe" ergaenzt. - versand-zahlung-Seite nannte nur 4 von 6 tatsaechlich akzeptierten Zahlungsmethoden (SEPA-Lastschrift und Klarna fehlten, obwohl sie laut README aktiv unterstuetzt werden und auf der Checkout-Seite selbst bereits korrekt gelistet sind) - Text in beiden Sprachen an die vollstaendige Liste angeglichen. - Transaktions-E-Mails durchgesehen: Layout/Branding/Track-Order-Button bei Bestellbestaetigung und Versand-Mail bereits solide, keine Aenderung noetig. Die Zahlungsfehler-Mail forderte im Fliesstext zur erneuten Bestellung auf, hatte dafuer aber keinen anklickbaren Link - jetzt ein echter Button zum Shop. Verifiziert: tsc --noEmit sauber, pnpm test 151/151 gruen, pnpm build erfolgreich. --- README.md | 2 ++ src/app/api/checkout/route.ts | 8 ++++++++ src/i18n/dictionaries/de.ts | 2 +- src/i18n/dictionaries/en.ts | 2 +- src/lib/email-strings.ts | 3 +++ src/lib/email-templates.ts | 7 ++++++- 6 files changed, 21 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 8e52bbf..e0b6508 100644 --- a/README.md +++ b/README.md @@ -150,6 +150,8 @@ Nur `db:push`/`db:migrate`/`db:deploy`/`db:studio` (Befehle, die tatsächlich ge Die Checkout Session gibt bewusst kein `payment_method_types` vor — Stripe zeigt Kundinnen und Kunden dadurch automatisch alle im Dashboard aktivierten, für Betrag/Währung/Land berechtigten Zahlungsmethoden an ("dynamische Zahlungsmethoden"). Um SEPA-Lastschrift und Klarna neben Kartenzahlung anzubieten, reicht es, sie unter [Dashboard → Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) zu aktivieren — dafür ist keine Codeänderung nötig. +**Apple Pay / Google Pay**: Diese Wallets sind bei der von Stripe gehosteten Checkout-Seite (der hier verwendete Modus, `stripe.checkout.sessions.create(...)` ohne `ui_mode: "embedded"`) laut Stripe-Dokumentation "ohne Änderungen an der Integration" automatisch enthalten, solange Kartenzahlung aktiviert ist (Standardeinstellung) — sie erscheinen als zusätzliche Option innerhalb des Kartenformulars auf unterstützten Geräten/Browsern (Safari mit hinterlegter Karte in Apple Wallet, Chrome/Android mit hinterlegter Karte in Google Pay). Die separate Domain-Registrierung unter [Dashboard → Zahlungsmethoden-Domains](https://dashboard.stripe.com/settings/payment_method_domains) ist laut Stripe nur für Elements bzw. die *eingebettete* Checkout-Zahlungsseite nötig, **nicht** für die vollständig gehostete Checkout-Seite (eigene, von Stripe bereits verifizierte Domain `checkout.stripe.com`) — hier also kein weiterer Schritt nötig. Falls die Wallets bei einem Testkauf trotzdem nicht erscheinen, liegt es fast immer am Testgerät/-browser (kein Apple Pay/Google Pay eingerichtet) oder daran, dass Kartenzahlung im Dashboard deaktiviert wurde, nicht am Code. + SEPA-Lastschrift und teils Klarna bestätigen die Zahlung **verzögert** (bei SEPA i. d. R. einige Werktage), nicht sofort wie eine Kartenzahlung. Der Webhook-Handler (`/api/checkout/webhook`) berücksichtigt das: - `checkout.session.completed` markiert die Bestellung nur dann als bezahlt, wenn `payment_status` nicht `unpaid` ist (bei Kartenzahlung sofort der Fall). diff --git a/src/app/api/checkout/route.ts b/src/app/api/checkout/route.ts index 45fb5e6..b14d130 100644 --- a/src/app/api/checkout/route.ts +++ b/src/app/api/checkout/route.ts @@ -298,6 +298,14 @@ export async function POST(request: Request) { discounts = [{ coupon: coupon.id }]; } + // Kein payment_method_types (s. README "Zahlungsmethoden"): Stripe zeigt + // dadurch dynamisch alle im Dashboard aktivierten, berechtigten + // Zahlungsmethoden. Apple Pay/Google Pay sind bei dieser vollstaendig + // gehosteten Checkout-Seite (kein ui_mode: "embedded") laut Stripe-Doku + // automatisch enthalten, sobald Kartenzahlung aktiv ist — keine + // Codeaenderung und (anders als bei Elements/eingebetteter Checkout-Seite) + // keine Domain-Registrierung noetig, da checkout.stripe.com bereits + // Stripes eigene, verifizierte Domain ist. const session = await stripe.checkout.sessions.create({ mode: "payment", customer_email: input.email, diff --git a/src/i18n/dictionaries/de.ts b/src/i18n/dictionaries/de.ts index 938c65b..5bd4762 100644 --- a/src/i18n/dictionaries/de.ts +++ b/src/i18n/dictionaries/de.ts @@ -388,7 +388,7 @@ export const de: Dictionary = { tierFallback: "Die aktuellen Versandkosten werden dir vor Abschluss der Bestellung transparent angezeigt.", pickupNote: "Alternativ kannst du deine Bestellung nach Absprache direkt bei uns in Altenmünster abholen — dabei fallen keine Versandkosten an.", paymentHeading: "Zahlungsmethoden", - paymentText: "Wir bieten PayPal, Kreditkarte, Apple Pay und Google Pay über unseren Zahlungsdienstleister Stripe an. Eine Zahlung per Überweisung ist auf Anfrage möglich.", + paymentText: "Wir bieten Kreditkarte, SEPA-Lastschrift, Klarna, PayPal, Apple Pay und Google Pay über unseren Zahlungsdienstleister Stripe an. Eine Zahlung per Überweisung ist auf Anfrage möglich.", deliveryTimeHeading: "Lieferzeit", deliveryTimeText: "Die übliche Lieferzeit innerhalb Deutschlands beträgt 2–4 Werktage nach Zahlungseingang.", }, diff --git a/src/i18n/dictionaries/en.ts b/src/i18n/dictionaries/en.ts index eac195f..8a9b815 100644 --- a/src/i18n/dictionaries/en.ts +++ b/src/i18n/dictionaries/en.ts @@ -388,7 +388,7 @@ export const en: Dictionary = { tierFallback: "The current shipping costs will be shown to you transparently before you complete your order.", pickupNote: "Alternatively, you can pick up your order directly from us in Altenmünster by arrangement — no shipping costs apply in that case.", paymentHeading: "Payment Methods", - paymentText: "We offer PayPal, credit card, Apple Pay, and Google Pay via our payment provider Stripe. Payment by bank transfer is available on request.", + paymentText: "We offer credit card, SEPA direct debit, Klarna, PayPal, Apple Pay, and Google Pay via our payment provider Stripe. Payment by bank transfer is available on request.", deliveryTimeHeading: "Delivery Time", deliveryTimeText: "Typical delivery time within Germany is 2–4 business days after payment is received.", }, diff --git a/src/lib/email-strings.ts b/src/lib/email-strings.ts index aff70da..c92d3f2 100644 --- a/src/lib/email-strings.ts +++ b/src/lib/email-strings.ts @@ -98,6 +98,7 @@ interface EmailStrings { heading: (firstName: string) => string; intro: (orderNumber: string) => string; retryNote: string; + button: string; subject: (orderNumber: string) => string; }; } @@ -198,6 +199,7 @@ const de: EmailStrings = { intro: (orderNumber) => `Der Zahlungseinzug für deine Bestellung ${orderNumber} konnte nicht abgeschlossen werden. Wir haben die Bestellung daher storniert, es sind dir keine Kosten entstanden.`, retryNote: "Du kannst die Bestellung gerne erneut aufgeben, zum Beispiel mit einer anderen Zahlungsmethode.", + button: "ERNEUT BESTELLEN", subject: (orderNumber) => `Zahlung zu Bestellung ${orderNumber} fehlgeschlagen — Wabenhain`, }, }; @@ -298,6 +300,7 @@ const en: EmailStrings = { intro: (orderNumber) => `The payment for your order ${orderNumber} could not be completed. We've cancelled the order, so no costs were incurred.`, retryNote: "Feel free to place the order again, for example with a different payment method.", + button: "ORDER AGAIN", subject: (orderNumber) => `Payment for order ${orderNumber} failed — Wabenhain`, }, }; diff --git a/src/lib/email-templates.ts b/src/lib/email-templates.ts index cdb5250..2309a47 100644 --- a/src/lib/email-templates.ts +++ b/src/lib/email-templates.ts @@ -354,6 +354,10 @@ export async function returnRefundedEmail(order: OrderStatusUpdateInput): Promis export async function paymentFailedEmail(order: OrderStatusUpdateInput): Promise { const s = getEmailStrings(order.locale).paymentFailed; + // Der Text (retryNote) fordert bereits zur erneuten Bestellung auf — ohne + // einen tatsaechlich anklickbaren Button dazu bliebe das ein reiner + // Lauftext-Hinweis ohne direkten Weg zurueck in den Shop. + const shopUrl = `https://${siteConfig.domain}/shop`; const html = await emailLayout( order.locale, s.preheader(order.orderNumber), @@ -361,11 +365,12 @@ export async function paymentFailedEmail(order: OrderStatusUpdateInput): Promise

${s.heading(order.firstName)}

${s.intro(order.orderNumber)}

${s.retryNote}

+
${button(shopUrl, s.button)}
` ); return { subject: s.subject(order.orderNumber), html, - text: `${s.intro(order.orderNumber).replace(/<\/?strong>/g, "")} ${s.retryNote}`, + text: `${s.intro(order.orderNumber).replace(/<\/?strong>/g, "")} ${s.retryNote}\n\n${s.button}: ${shopUrl}`, }; }