MAISON CODE .
/ Currency · Caching · Edge · Global · Architecture

Mehrwährung: Architektur für grenzenlosen Handel

So bedienen Sie 150 Währungen, ohne Ihren CDN-Cache zu beschädigen. Ein ausführlicher Leitfaden zur Internationalisierung (i18n), zur Gleitkomma-Mathematik und zum Kantenrouting.

AB
Alex B.
Mehrwährung: Architektur für grenzenlosen Handel

Globaler Verkauf ist keine „Enterprise“-Funktion mehr. Ein Kind in einer Garage in Brooklyn kann T-Shirts an Benutzer in Tokio verkaufen. Aber einem japanischen Benutzer „Preis: 25,00 €“ anzuzeigen, ist ein Reibungspunkt. Sie müssen Kopfrechnen (25 € * 150 = ¥ 3750?). Sobald Sie Multi-Währung einführen, führen Sie eines der schwierigsten Probleme im Web-Engineering ein: Kontextsensitives Caching.

Bei Maison Code Paris bauen wir Global-First-Architekturen. Wir betrachten die Währung nicht als einen UI-Schalter; Wir betrachten es als eine grundlegende Dimension des Anwendungsstatus, die wohl genauso wichtig ist wie die URL selbst.

Warum Maison Code darüber spricht

Bei Maison Code Paris fungieren wir als das architektonische Gewissen unserer Kunden. Wir übernehmen oft „moderne“ Stacks, die ohne grundlegendes Verständnis für Skalierung gebaut wurden.

Wir diskutieren dieses Thema, weil es einen kritischen Wendepunkt in der technischen Reife darstellt. Die korrekte Implementierung unterscheidet ein fragiles MVP von einer widerstandsfähigen Plattform auf Unternehmensniveau.

Das Caching-Paradoxon

In einer Standard-Webanwendung speichert Ihr CDN (Cloudflare/Fastly) den HTML-Code der Homepage zwischen.

  1. Benutzer A (USA) besucht „example.com“.
  2. Der Server rendert HTML: „Preis: 100 €“.
  3. CDN speichert diesen HTML-Code zwischen.
  4. Benutzer B (Frankreich) besucht 1 Minute später „example.com“.
  5. CDN stellt zwischengespeicherten HTML-Code bereit: „Preis: 100 €“.

Das ist eine Katastrophe. Benutzer B sieht Dollar. Sie legen den Betrag in den Warenkorb, und vielleicht wird die Kasse später auf Euro umgestellt, oder vielleicht gehen sie einfach weg, weil sie keine Umrechnungsgebühren zahlen wollen. Um dies zu beheben, muss der Server wissen, wer fragt. Aber wenn der Server es weiß, kann das CDN nicht einfach eine statische Datei bereitstellen.

Strategie 1: Der Unterordner (Der Goldstandard)

Die robusteste technische Lösung besteht darin, die Währung explizit in der URL anzugeben.

  • example.com/en-us -> Bedient USD.
  • example.com/fr-fr -> Liefert EUR.
  • example.com/jp-jp -> Liefert JPY.

Warum das gewinnt:

  1. Cache-Effizienz: „/fr-fr“ ist eine eindeutige URL. Wir können es aggressiv am Rand zwischenspeichern. Jeder französische Benutzer erhält einen Cache-Treffer.
  2. SEO: Der Googlebot weiß genau, welche Währung zu welcher Region passt. Sie können ganz einfach „hreflang“-Tags festlegen.
  3. Klarheit: Der Benutzer weiß, wo er sich befindet.

Umsetzung in Remix/Hydrogen:

„tsx // app/routes/(€locale)._index.jsx Asynchronen Funktionslader exportieren ({ request, context, params }) { const { locale } = params; // „fr-fr“ const Währung = getCurrencyFromLocale(locale); // „EUR“

// An Shopify API übergeben const products = waiting context.storefront.query(PRODUCTS_QUERY, { Variablen: { Land: getCountryCode(Währung) } });

return json({ products }); } „

Strategie 2: Der Vary-Header (die dynamische Lösung)

Wenn Sie die URL sauber halten müssen (example.com für alle), müssen Sie das CDN anweisen, mehrere Versionen derselben URL zwischenzuspeichern. Wir verwenden den Header „Vary“.

„Variieren: CF-IPCountry“.

Darin heißt es zu Cloudflare: „Bitte speichern Sie für jeden eindeutigen Ländercode eine separate Kopie dieser Seite.“

  • Benutzer (US) -> CDN sucht nach „Homepage + US“. Fräulein. Ruft vom Server ab. Caches.
  • Benutzer (FR) -> CDN sucht nach „Homepage + FR“. Fräulein. Ruft vom Server ab. Caches.
  • Benutzer (US) -> CDN sucht nach „Homepage + US“. Schlag.

Der Nachteil: Cache-Fragmentierung. Wenn Sie 200 Länder unterstützen, teilen Sie Ihre Cache-Trefferquote effektiv durch 200. Ihr Ursprungsserver benötigt mehr Last.

Strategie 3: Client-seitiges Malen (Der Hybrid)

Für leistungsstarke, streng zwischengespeicherte Seiten speichern wir manchmal das Generic Skeleton. Der zurückgegebene HTML-Code enthält keinen Preis oder einen Platzhalter. Dann ruft „useEffect“ auf dem Client den lokalen Preis ab.

„tsx Funktion Price({ baseAmount }) { const { Währung, Kurs } = useCurrencyContext();

if (!rate) return ;

return {formatMoney(baseAmount * rate, payment)}; } „

Warnung: Dies führt zu einer Layoutverschiebung (CLS) und einem „Flash von unbepreistem Inhalt“. Es fühlt sich billig an. Nur als letzten Ausweg verwenden.

Die Shopify Markets-Architektur

Im Shopify-Ökosystem nutzen wir die Contextual Storefront API. Sie berechnen die Wechselkurse nicht selbst. Sie überlassen dies dem Backend von Shopify. Warum? Denn Shopify ermöglicht es Händlern, pro Markt feste Wechselkurse oder Preisanpassungen festzulegen. Vielleicht kostet das T-Shirt in den USA 20 €, in Europa aber 25 € (zur Deckung der Mehrwertsteuer und des Versands), nicht nur eine direkte Umrechnung von 20 € * 0,92.

„graphql

Die magische Direktive: @inContext

query GetProduct(€handle: String!, €country: CountryCode!) @inContext(country: €country) { Produkt(Handle: €Handle) { Preisbereich { minVariantPrice { Menge Währungscode # Gibt automatisch die lokale Währung zurück } } } } „

Durch die Übergabe des Ländercodes verlagern wir die Komplexität der Preislogik auf die Plattform-Engine.

Geldmathematik: Gleitkomma-Albträume

Verwenden Sie niemals Standard-JavaScript-Nummern für Geld. 0,1 + 0,2 === 0,30000000000000004

Wenn Sie einen individuellen Warenkorb erstellen, verlieren Sie bei jeder 10. Bestellung einen Cent. Bei über einer Million Bestellungen sind das 10.000 US-Dollar Verlust durch Gleitkommafehler. Regel: Speichern Sie Geld in Cents (Ganzzahlen).

  • 10,00 € -> „1000“.
  • 19,99 € -> „1999“.

Verwenden Sie Bibliotheken wie „Dinero.js“ oder „Currency.js“ für alle clientseitigen Berechnungen.

„Javascript Dinero aus „dinero.js“ importieren;

const Price = Dinero({ Betrag: 5000, Währung: ‘EUR’ }); // 50,00 € const tax = price.percentage(20); // MwSt const total = price.add(tax); „

Psychologische Preisgestaltung und Rundung

Die algorithmische Konvertierung ist hässlich.

  • 100,00 € * 0,92 = 92,00 €.
  • Aber 92,00 € fühlen sich „zufällig“ an.
  • Der psychologische Preis dürfte bei 95,00 € oder 89,00 € liegen.

Wir implementieren Rundungsstrategien auf der Anwendungsebene (sofern sie nicht vom Backend verarbeitet werden).

„Typoskript Funktion RoundToCharmPrice(Betrag: Zahl): Zahl { // 92,34 -> 95,00 // 98,10 -> 99,00 const HeavyPart = Math.floor(amount); const lastDigit = HeavyPart % 10;

if (lastDigit < 5) return HeavyPart - lastDigit + 5; // Auf 5 runden
return HeavyPart - lastDigit + 9; // Auf 9 runden

} „ Hinweis: Normalerweise empfehlen wir Kunden, diese explizit in Shopify Markets festzulegen, aber eine Fallback-Logik ist für die dynamische Bündelung nützlich.

SEO: Die Metadaten des Geldes

Google kann Ihre Preise nicht indizieren, wenn sie dynamisch (JS-injiziert) sind. Wenn Sie Strategie 1 (Unterordner) verwenden, funktionieren standardmäßige JSON-LD-strukturierte Daten perfekt.

<script type="application/ld+json">
{
  „@context“: „https://schema.org/“,
  „@type“: „Produkt“,
  „name“: „Luxusuhr“,
  „Angebote“: {
    „@type“: „Angebot“,
    „priceCurrency“: „EUR“,
    „Preis“: „5000,00“
  }
}
</script>


Stellen Sie sicher, dass dieser Block mit dem sichtbaren Inhalt übereinstimmt. Wenn im JSON-LD EUR und im sichtbaren Text USD steht (aufgrund einer clientseitigen Umstellung), sperrt Google Merchant Center Ihr Konto wegen „Preisinkongruenz“.

## 13. Das Währungsrisiko der Rückerstattung

Der Benutzer kauft für 100 € (110 $).
Nächste Woche stürzt der Dollar ab. 100 € sind jetzt 120 $.
Der Benutzer beantragt eine Rückerstattung.
Erstatten Sie 100 € zurück (der Kunde ist zufrieden, Sie verlieren 10 $)?
Oder erstatten Sie 110 $ umgerechnet in Euro (92 €) (Kunde ist wütend)?
**Rechtliche Antwort**: Erstatten Sie den ursprünglichen Währungsbetrag (100 €).
**Finanzielle Antwort**: Sie übernehmen das FX-Risiko.
Wir bauen im Hauptbuch eine „Rückerstattungsreserven“-Logik ein, um diese Schwankung als „COGS – FX-Verlust“ zu berücksichtigen.

## 14. Absicherung und Treasury-Management

Wenn Sie 10 Millionen US-Dollar in Euro verkaufen, halten Sie viele Euro.
Wenn der Euro abstürzt, verlieren Sie Geld, bevor Sie Ihre US-Fabrik bezahlen können.
Hier kommt **Automatisierte Absicherung** ins Spiel.
Wir integrieren mit **Wise Business API** oder **Airwallex**.
Wenn der Kontostand > 10.000 € ist, erfolgt die automatische Umrechnung in USD.
Diese „Micro-Hedging“-Strategie reduziert das Risiko makroökonomischer Ereignisse.

## 15. Ablehnungen des Zahlungsgateways (Währungsinkongruenz)
    
Mit Stripe können Sie in jeder Währung bezahlen.
Einige lokale Banken (z. B. in Brasilien oder Indien) lehnen Transaktionen in „Fremdwährung“ jedoch ab, selbst wenn die Karte dies unterstützt.
**Die Lösung**: Intelligente Wiederholungsversuche.
Wenn eine Belastung mit „do_not_honor“ fehlschlägt, versuchen Sie es sofort erneut in der Ausgabewährung der Karte (sofern über BIN erkennbar).
„Sie haben versucht, 100 $ abzurechnen. Fehlgeschlagen. Versuchen Sie erneut, 92 € abzubuchen. Erfolgreich.“
Dies verbessert die Autorisierungsraten um 4 %.

## 16. Nachnahme (COD) und Währung

Im Nahen Osten (GCC) erfolgen 60 % der Bestellungen per Nachnahme.
Der Kurier holt Bargeld ab.
Der Kurier akzeptiert keine USD. Sie akzeptieren nur AED/SAR.
Wenn Sie an der Kasse USD angeben, kommt der Kurier und verlangt einen anderen Betrag (Tageskurs).
**Regel**: Wenn Nachnahme ausgewählt ist, **MÜSSEN** Sie den Preis an der Kasse in der Landeswährung sperren und auf dem physischen Manifest ausdrucken.
Eine Diskrepanz führt hier zu „Zustellung verweigert“.

## 17. Fazit

Multi-Währung ist kein „Plug-in“. Es handelt sich um eine grundlegende Architekturentscheidung, die Routing, Caching, Datenbankdesign und SEO betrifft.
Wir bei Maison Code glauben, dass echter **grenzenloser Handel** unsichtbar ist. Der Benutzer landet, sieht seine Währung, bezahlt mit seiner lokalen Methode und erhält die Ware.
Die Komplexität ist unsere Last, nicht ihre.


<hr style="margin: 1rem 0" />

### Global werden?
Wenn Sie Probleme mit „Vary“-Headern oder defekten Caches haben.


**[Stellen Sie unsere globalen Architekten ein](/Kontakt)**, um Ihre internationale Expansion zu strukturieren.
**[Beauftragen Sie unsere Architekten](/contact)**.