TL;DR: Die von einem Benutzer erwartete Zahlungsmethode hängt von seinem Standort ab – und das Anbieten der falschen Methoden verringert die Konversion drastisch. US-Nutzer erwarten Kreditkarten und PayPal. Deutsche Nutzer möchten das SEPA-Lastschriftverfahren (SEPA Direct Debit) und PayPal. Chinesische Nutzer erwarten QR-Codes für Alipay und WeChat Pay. Dieser Leitfaden behandelt die Muster für die Global Payment Integration zur Unterstützung mehrerer Zahlungsmethoden in verschiedenen geografischen Märkten und stützt sich dabei auf interkulturelle UX-Designprinzipien.
Zahlungsmethoden nach Markt
Eine gut geplante Globalisierungsstrategie ist unerlässlich, um zu bestimmen, welche Zahlungsmethoden in der jeweiligen Region unterstützt werden sollen.
| Markt | Primäre Methoden | % der Transaktionen | Durchschnittsbetrag |
|---|---|---|---|
| USA/Kanada | Kreditkarte, PayPal | Kreditkarte: 79%, PayPal: 14% | $49/mo |
| Europa | Kreditkarte, PayPal, SEPA | Kreditkarte: 45%, PayPal: 25%, SEPA: 20% | €39/mo |
| Deutschland | SEPA, PayPal, Kreditkarte | SEPA: 35%, PayPal: 30%, Kreditkarte: 25% | €35/mo |
| China | Alipay, WeChat Pay | Alipay: 55%, WeChat: 40% | ¥149/mo |
| Großbritannien | Kreditkarte, PayPal | Kreditkarte: 65%, PayPal: 25% | £39/mo |
| Japan | Kreditkarte, Konbini | Kreditkarte: 70%, Konbini: 15% | ¥980/mo |
Stripe-Integration mit mehreren Zahlungsmethoden
Stripe Checkout mit Zahlungsmethodentypen einrichten
// server/billing/stripe.ts
import Stripe from "stripe"
const stripe = new Stripe(env.STRIPE_SECRET_KEY, {
apiVersion: "2025-02-24.acacia",
})
export const createCheckoutSession = createServerFn({ method: "POST" }).handler(
async ({ data, context }: {
data: { priceId: string; locale: string }
}) => {
// Zahlungsmethoden basierend auf dem Locale bestimmen
const paymentMethods = getPaymentMethodsForLocale(data.locale)
const session = await stripe.checkout.sessions.create({
line_items: [{ price: data.priceId, quantity: 1 }],
mode: "subscription",
success_url: `https://tanstackship.com/${data.locale}/billing/success`,
cancel_url: `https://tanstackship.com/${data.locale}/billing/cancel`,
payment_method_types: paymentMethods,
customer_creation: "always",
locale: mapStripeLocale(data.locale),
metadata: {
locale: data.locale,
userId: context.user.id,
},
...(paymentMethods.includes("sepa_debit") && {
payment_intent_data: {
// SEPA erfordert die Anzeige des Mandats
mandate_data: {
type: "online",
},
},
}),
})
return { sessionId: session.id, url: session.url }
}
)
function getPaymentMethodsForLocale(locale: string): string[] {
const methods: Record<string, string[]> = {
en: ["card", "paypal"],
de: ["card", "paypal", "sepa_debit"],
zh: ["card", "alipay", "wechat_pay"],
}
return methods[locale] ?? ["card"]
}
function mapStripeLocale(locale: string): Stripe.Checkout.SessionCreateParams.Locale {
const locales: Record<string, Stripe.Checkout.SessionCreateParams.Locale> = {
en: "auto",
de: "de",
zh: "zh",
}
return locales[locale] ?? "auto"
}
Wiederkehrende Abrechnungen weltweit verwalten
Die Preisfestlegung für jeden Markt erfordert eine sorgfältige Abwägung der lokalen Kaufkraft, der Wettbewerbspositionierung und des wahrgenommenen Werts. Die SaaS-Preispsychologie – Konzepte wie Verankerung (Anchoring) und Lokalisierung – spielt eine entscheidende Rolle dabei, wie Nutzer Ihre Preispunkte in verschiedenen Regionen wahrnehmen. Die untenstehende Konfiguration demonstriert Preisdefinitionen pro Währung und zeigt, wie man entsprechende Stripe-Preise programmatisch erstellt.
Preiskonfiguration
// Preise pro Markt mit entsprechender Währung definieren
export const prices = {
starter: {
en: { price: 2900, currency: "usd" }, // $29
de: { price: 2900, currency: "eur" }, // €29
zh: { price: 12900, currency: "cny" }, // ¥129
},
pro: {
en: { price: 7900, currency: "usd" }, // $79
de: { price: 7900, currency: "eur" }, // €79
zh: { price: 34900, currency: "cny" }, // ¥349
},
}
// Stripe-Preise pro Währung erstellen
async function createPricesForLocale(locale: string) {
const stripePrices = []
for (const [plan, currencies] of Object.entries(prices)) {
const { price, currency } = currencies[locale as keyof typeof currencies]
const stripePrice = await stripe.prices.create({
unit_amount: price,
currency,
recurring: { interval: "month" },
product_data: {
name: plan.charAt(0).toUpperCase() + plan.slice(1),
metadata: { locale },
},
})
stripePrices.push({ plan, stripePriceId: stripePrice.id })
}
return stripePrices
}
Dieser Ansatz stellt sicher, dass jeder Nutzer die Preise in seiner lokalen Währung sieht, was Reibungsverluste beim Checkout reduziert. Die Funktion createPricesForLocale automatisiert die Erstellung von Stripe-Preisen mit den entsprechenden Währungseinstellungen. Dadurch wird es einfach, neue Märkte hinzuzufügen oder Preise anzupassen, ohne manuelle Arbeit im Stripe-Dashboard verrichten zu müssen.
SEPA-Lastschrift (Deutscher Markt)
Ablauf der Mandatseinholung
export const createSepaSubscription = createServerFn({ method: "POST" }).handler(
async ({ data, context }: { data: { priceId: string; iban: string } }) => {
// 1. Stripe-Kunden erstellen
const customer = await stripe.customers.create({
email: context.user.email,
metadata: { userId: context.user.id },
})
// 2. SEPA-Zahlungsmethode erstellen
const paymentMethod = await stripe.paymentMethods.create({
type: "sepa_debit",
sepa_debit: { iban: data.iban },
billing_details: { email: context.user.email },
})
// 3. Zahlungsmethode anfügen
await stripe.paymentMethods.attach(paymentMethod.id, { customer: customer.id })
// 4. Als Standard festlegen
await stripe.customers.update(customer.id, {
invoice_settings: { default_payment_method: paymentMethod.id },
})
// 5. Abonnement erstellen
const subscription = await stripe.subscriptions.create({
customer: customer.id,
items: [{ price: data.priceId }],
default_payment_method: paymentMethod.id,
payment_settings: {
payment_method_types: ["sepa_debit"],
},
})
return { subscriptionId: subscription.id }
}
)
Alipay und WeChat Pay (Chinesischer Markt)
QR-Code-Integration
export const createAlipaySession = createServerFn({ method: "POST" }).handler(
async ({ data, context }: { data: { priceId: string } }) => {
// Stripe Checkout verarbeitet die Generierung von QR-Codes für Alipay/WeChat Pay
const session = await stripe.checkout.sessions.create({
line_items: [{ price: data.priceId, quantity: 1 }],
mode: "payment",
payment_method_types: ["alipay", "wechat_pay"],
success_url: `https://tanstackship.com/zh/billing/success`,
cancel_url: `https://tanstackship.com/zh/billing/cancel`,
})
return {
url: session.url,
// Stripe Checkout zeigt den QR-Code auf mobilen Geräten automatisch an
}
}
)
Steuerabwicklung
Automatische Steuerberechnung
export const createTaxAwareSession = createServerFn({ method: "POST" }).handler(
async ({ data, context }: { data: { priceId: string; locale: string } }) => {
// Stripe Tax berechnet automatisch MwSt., GST, Sales Tax
const session = await stripe.checkout.sessions.create({
line_items: [{ price: data.priceId, quantity: 1 }],
mode: "subscription",
automatic_tax: { enabled: true },
customer_update: { address: "auto" },
// Rechnungsadresse für die Steuerberechnung erfasst
billing_address_collection: "required",
})
return { url: session.url }
}
)
Steuersätze nach Markt
| Land | Steuerart | Satz | SaaS-spezifisch | Hinweise |
|---|---|---|---|---|
| USA | Sales Tax | 0-10% (variiert nach Bundesstaat) | In den meisten Bundesstaaten besteuert | Ursprungsbasiert für digitale Produkte |
| Deutschland | VAT (Umsatzsteuer) | 19% | Steuerpflichtig | Reverse-Charge-Verfahren für B2B |
| China | VAT | 6% (digitale Dienste) | Steuerpflichtig | Quellensteueranforderungen |
| Großbritannien | VAT | 20% | Steuerpflichtig | VAT MOSS-Verfahren |
| Japan | Verbrauchssteuer | 10% | Steuerpflichtig | Rechnungssystem 2023+ |
Abonnementverwaltung
// Abonnementänderungen über Märkte hinweg handhaben
export const updateSubscriptionLocale = createServerFn({ method: "POST" }).handler(
async ({ data, context }: {
data: { subscriptionId: string; newLocale: string }
}) => {
const subscription = await stripe.subscriptions.retrieve(data.subscriptionId)
// Locale-Metadaten aktualisieren
await stripe.subscriptions.update(data.subscriptionId, {
metadata: { locale: data.newLocale },
})
// Wenn sich das Locale der Rechnung geändert hat, Standardzahlungsmethode aktualisieren
if (data.newLocale === "de") {
// Sicherstellen, dass das SEPA-Mandat aktiv ist
} else if (data.newLocale === "zh") {
// Sicherstellen, dass Alipay/WeChat verfügbar ist
}
return { updated: true }
}
)
Wiederherstellung fehlgeschlagener Zahlungen nach Markt
// Lokalisierte Mahnungs-E-Mails basierend auf dem Nutzer-Locale
async function handleFailedPayment(invoice: Stripe.Invoice) {
const subscription = await stripe.subscriptions.retrieve(
invoice.subscription as string
)
const locale = subscription.metadata.locale ?? "en"
// Intelligenter Neuversuch basierend auf der Zahlungsmethode
if (subscription.metadata.payment_method === "sepa_debit") {
// SEPA-Neuversuche werden von Stripe abgewickelt – 3-5 Tage warten
await scheduleEmail(invoice.customer, "sepa_pending", locale)
} else {
// Kreditkarte: Sofortiger Neuversuch mit intelligentem Timing
await stripe.invoices.pay(invoice.id, {
payment_method: invoice.payment_method as string,
})
}
// E-Mail-Vorlage lokalisieren
const emailTemplates = {
en: "Your payment failed. Update your billing info here: {link}",
de: "Ihre Zahlung ist fehlgeschlagen. Aktualisieren Sie hier: {link}",
zh: "支付失败。点击此处更新账单信息:{link}",
}
await sendEmail({
to: invoice.customer_email,
subject: subjectTranslations[locale],
body: emailTemplates[locale as keyof typeof emailTemplates].replace(
"{link}",
`https://tanstackship.com/${locale}/billing`
),
})
}
Währungsanzeige
function PriceDisplay({
amount,
locale,
currency,
}: {
amount: number
locale: string
currency: string
}) {
return new Intl.NumberFormat(locale, {
style: "currency",
currency,
}).format(amount)
// Beispielergebnisse:
// en, USD → "$29.99"
// de, EUR → "29,99 €"
// zh, CNY → "¥129.99"
}
Checkliste für die Global Payment Integration
- Zahlungsmethoden pro Markt konfiguriert (Kreditkarte + lokale Methoden)
- Preise in lokalen Währungen definiert
- Steuerberechnung mit Stripe Tax automatisiert
- Lokalisierung von Rechnungen und Belegen (Sprache, Format, USt-IdNr.)
- E-Mails zur Wiederherstellung fehlgeschlagener Zahlungen lokalisiert
- Rückerstattungsrichtlinien entsprechen lokalen Gesetzen (z. B. 14-tägiges Widerrufsrecht in der EU)
- Prozess zur Bearbeitung von Rückbuchungen (Chargebacks) pro Markt dokumentiert
- Währungsumrechnung wird klar angezeigt
- Zahlungsbestätigungsseiten lokalisiert
- Mahnungs-E-Mail-Sequenzen übersetzt
- Abläufe zur Kündigung von Abonnements entsprechen lokalen Vorschriften
Fazit
Die Global Payment Integration ist eine der wirkungsvollsten Investitionen in die Lokalisierung, die ein SaaS-Unternehmen tätigen kann. Das Prinzip ist simpel: Lassen Sie Ihre Nutzer so bezahlen, wie sie es gewohnt sind. Ein deutscher Nutzer, dem das SEPA-Lastschriftverfahren als Zahlungsoption angeboten wird, konvertiert deutlich wahrscheinlicher als einer, der nur die Möglichkeit der Kreditkartenzahlung sieht.
Die Plattform von Stripe macht die Unterstützung für mehrere Zahlungsmethoden, Währungen und Steuersysteme über eine einzige API handhabbar. In Kombination mit lokalspezifischer Preiskonfiguration und lokalisierten Zahlungsabläufen können Sie globale Nutzer unterstützen, ohne für jeden Markt separate Zahlungsanbieter verwalten zu müssen.
Ein reibungsloses Zahlungs- und Checkout-Erlebnis sollte mit einem effektiven Kunden-Onboarding-Prozess kombiniert werden, um sicherzustellen, dass neue Nutzer vom ersten Tag an erfolgreich sind.