mcpField
M
multi-currency

multi-currency

github.com/finsilabsその他6084 回インストール5 日前に更新
リポジトリ

multi-currency について

Shopify、WooCommerce、BigCommerce、ヘッドレスストアで現地通貨の表示と決済を設定するスキルです。標準機能の設定から、独自実装での為替レート、通貨選択、決済処理まで扱います。

主な機能

  1. 01プラットフォーム別の設定案内
  2. 02為替レート設定
  3. 03通貨セレクターの設定
  4. 04複数通貨の決済処理
  5. 05通貨動作の検証

活用シーン

  1. 01海外市場向けのストア開設
  2. 02ストアへの通貨セレクター追加
  3. 03表示価格と請求額の照合

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/finsilabs/awesome-ecommerce-skills --skill multi-currency

インストール後、Claude Code で/multi-currencyを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

tile.json
evals/currency-config-and-formatting/
criteria.json
task.md
evals/currency-detection-and-stripe-integratio/
criteria.json
task.md
evals/exchange-rate-caching-and-price-rounding/
criteria.json
task.md

詳細

複数通貨

概要

複数通貨に対応すると、海外の買い物客はストアの基準通貨ではなく、現地通貨で商品を閲覧して支払えるようになります。Shopify、WooCommerce、BigCommerceでは、これは設定作業です。各プラットフォームには、為替レート、価格表示、決済処理を自動で行う組み込み機能またはアプリベースのソリューションが用意されています。カスタムコードが必要なのは、ヘッドレスストアフロントのみです。

このスキルを使用する場面

  • 買い物客が現地通貨での価格表示を期待する海外市場へ展開する場合
  • 基準通貨以外の国からのトラフィックが多い一方、コンバージョン率が低いことが分析で判明した場合
  • サイトヘッダーに通貨セレクターを実装する場合
  • Stripe または PayPal の複数通貨決済を統合する場合

主な手順

ステップ 1:プラットフォームと複数通貨への対応方法を決める
プラットフォーム推奨方法決済通貨
Shopify(Shopify Payments)Shopify 管理画面でマーケットと複数通貨を有効にするStripe/Shopify が入金通貨で決済します。通貨換算は自動です
Shopify + Shopify 以外のゲートウェイBEST Currency Converter または MLV Auto Currency Switcher アプリをインストールする表示のみの換算です。支払いは基準通貨で受け取ります
WooCommerceWooCommerce Payments(ネイティブの複数通貨対応)または WPML + WooCommerce Multilingual をインストールするWooCommerce Payments は現地通貨で決済します。他のゲートウェイでは換算される場合があります
BigCommerceストア設定で複数通貨を有効にし、複数通貨での決済には Stripe を使用するBigCommerce が価格を表示し、Stripe が顧客の通貨で決済します
カスタム/ヘッドレスStripe の複数通貨の決済インテントを使用し、OpenExchangeRates から為替レートを取得するStripe はあらゆる通貨で請求を受け付け、設定済みの通貨で決済します
ステップ 2:プラットフォームで複数通貨を設定する

Shopify

Shopify のマーケット機能は、複数通貨を導入する推奨方法です。

  1. Settings → Markets に移動します
  2. 地域ごとに(例:ヨーロッパ、英国、オーストラリア)Add market をクリックします
  3. 各マーケットで Currencies に移動し、現地通貨(EUR、GBP、AUD)を有効にします
  4. Shopify は毎日の為替レートを使用して価格を自動換算します
  5. 特定の通貨で手動の価格上書きを設定する場合(例:$99.00 を換算せず、EUR 価格を固定の €99 にする場合)は、マーケットに移動して Manage をクリックし、商品ごとに通貨別の価格を設定します

為替レートの処理:

  • デフォルトでは、Shopify は毎日更新される自動為替レートを使用します
  • 為替コストをカバーするために為替レートへ上乗せ分を追加するには、Settings → Markets → [Market] → Currencies に移動し、通貨換算レートの調整値(例:+2%)を設定します

ストアフロントの通貨セレクター: OS 2.0 の Shopify テーマ(Dawn、Crave など)には、通貨/国セレクターが標準で含まれています。Online Store → Themes → Customize で、Header → Country/Region selector セクションを追加します。

決済処理: Shopify Payments を使用すると、顧客の通貨で請求が行われます。銀行口座への入金はデフォルトの入金通貨で行われ、換算は Shopify が処理します。Shopify Plus では、通貨ごとに別の銀行口座を指定して、複数通貨での入金を設定できます。

WooCommerce

オプション A:WooCommerce Payments(ネイティブの複数通貨対応)

  1. WooCommerce Payments(Stripe を利用)をインストールして有効化します
  2. WooCommerce → 設定 → WooCommerce Payments → 複数通貨に移動します
  3. 通貨を追加をクリックし、提供する通貨を選択します
  4. 通貨ごとに、為替レートの取得元(WooCommerce の日次フィードから自動取得、または手動)、丸め処理(例:.99 に丸める)、為替レートへの手数料上乗せの有無を設定します
  5. 通貨切り替えウィジェットを有効にします。外観 → ウィジェットに移動し、ヘッダーまたはサイドバーに通貨切り替えウィジェットを追加します

オプション B:WooCommerce Multilingual + WPML

  1. WPMLとWooCommerce Multilingual & Multicurrencyをインストールします
  2. WPML → WooCommerce Multilingual → 通貨に移動し、通貨を追加します
  3. 通貨ごとに、為替レート(手動または自動更新)と丸めルールを設定します
  4. 通貨ごとの商品価格は、商品ごとに手動で設定するか、自動換算できます

オプション C:Currency Switcher for WooCommerce(無料プラグイン)

表示通貨のみを切り替える場合(決済は基本通貨で処理)、Aelia のCurrency Switcher for WooCommerceをインストールします。表示価格は換算されますが、決済は基本通貨で処理されます。より簡単な方法ですが、USD(または設定した基本通貨)で請求されることを顧客に理解してもらう必要があります。

BigCommerce
  1. 設定 → ストアの設定 → 通貨に移動します
  2. 通貨を追加をクリックし、ドロップダウンから選択します
  3. 通貨ごとに、以下を設定します。
    • 為替レート:手動、または BigCommerce のレートフィードによる自動更新
    • 丸め処理:最も近い 0.99、0.95、または整数に丸める
    • 表示設定:通貨セレクターを表示する場所
  4. 1 つの通貨をデフォルトに設定します。これはレポートとフォールバックに使用されます
  5. 通貨セレクターを有効にします。ストアフロント → マイテーマ → カスタマイズに移動し、ヘッダーに通貨セレクターのコンポーネントを追加します

BigCommerce での決済処理: 複数通貨での請求を受け付けるよう、決済ゲートウェイを設定します(設定 → 決済 → Stripeで設定する)Stripe は顧客の通貨で決済を受け付け、自動的に自国通貨で精算できます。


カスタム/ヘッドレス

為替レートの取得:

// Fetch and cache daily exchange rates from OpenExchangeRates (free tier available)
async function getExchangeRates() {
  const cached = await redis.get('exchange_rates');
  if (cached) return JSON.parse(cached);

  const res = await fetch(
    `https://openexchangerates.org/api/latest.json?app_id=${process.env.OER_API_KEY}&base=USD&symbols=EUR,GBP,CAD,AUD,JPY`
  );
  const { rates } = await res.json();

  // Cache for 24 hours — daily rates are sufficient for display prices
  await redis.setex('exchange_rates', 86400, JSON.stringify(rates));
  return rates;
}

async function convertPrice(amountUSD, targetCurrency) {
  if (targetCurrency === 'USD') return amountUSD;
  const rates = await getExchangeRates();
  return amountUSD * rates[targetCurrency];
}

Stripe の複数通貨決済:

// Charge in customer's currency — Stripe handles conversion and settles in your payout currency
const paymentIntent = await stripe.paymentIntents.create({
  amount: Math.round(displayPrice * 100), // Amount in smallest unit (EUR cents, JPY yen)
  currency: customerCurrency.toLowerCase(), // 'eur', 'gbp', 'jpy'
  automatic_payment_methods: { enabled: true },
  metadata: { order_id: orderId, base_currency_amount: String(basePriceUSD) },
});
// Note: for JPY and other zero-decimal currencies, multiply by 1 (not 100)
const jpy_amount = Math.round(jpyPrice); // ¥3,000 → 3000, not 300000

ブラウザーからの通貨検出:

// Detect preferred currency from browser language or IP country header
function detectCurrency(req) {
  // Check explicit user preference first
  if (req.cookies.preferred_currency) return req.cookies.preferred_currency;

  // Cloudflare and similar CDNs provide the visitor's country
  const country = req.headers['cf-ipcountry'];
  const countryToCurrency = { US:'USD', GB:'GBP', DE:'EUR', FR:'EUR', AU:'AUD', JP:'JPY', CA:'CAD' };
  return countryToCurrency[country] ?? 'USD';
}
ステップ 3:正しく動作することを確認する

公開前に、以下のシナリオをテストします。

  1. 価格が正しく表示される:英国の IP アドレスを持つ VPN からアクセスし、価格が GBP で表示されることを確認します
  2. JPY の小数点以下ゼロ:日本の価格が整数(¥3,000 であり、¥30.00 ではない)で表示されることを確認します
  3. 決済額が表示価格と一致する:Stripe の請求額が表示価格と一致する必要があります
  4. 通貨セレクターの選択が保持される:通貨を切り替えた後、ページを移動しても選択が保持されることを確認します
  5. カートの合計が正しい通貨で表示される:カートとチェックアウトで、選択した通貨が使用されることを確認します

ベストプラクティス

  • プラットフォーム標準の複数通貨機能を使用する — Shopify Markets、WooCommerce Payments、BigCommerce の組み込み機能は、為替レート、丸め処理、表示を適切に処理します
  • 為替レートを毎日更新する — 表示価格には日次レートで十分です。ページの読み込みごとにレートを取得しないでください
  • 注文金額は基本通貨で保存する — レポートの一貫性を保つため、データベースには常に基本通貨で価格を記録します。参照用に、表示通貨と使用したレートも保存します
  • 市場ごとに適した丸めルールを適用する — €9.99 は自然に見えますが、€9.847 はそうではありません。プラットフォームの通貨設定で丸め処理を設定します
  • JPY を特にテストする — JPY は小数点以下の桁数がありません。よくあるバグは、¥3,000 ではなく ¥29.99 と表示されることです。テスト通貨を JPY に設定して確認します

よくある落とし穴

問題解決策
ページ読み込み時に価格が基準通貨に切り替わるユーザーの通貨設定をサーバー側で(Cookie から)読み取り、初回読み込み時に正しい通貨で表示します。クライアント側だけで通貨を切り替える方法は避けてください
JPY の金額をセントとして Stripe に渡している小数点以下の単位がない通貨(JPY、KRW)の場合は、金額をそのまま渡します。¥3,000 → amount: 3000 であり、amount: 300000 ではありません
決済金額が表示価格と一致しないチェックアウト時に保存済みの為替レートを使って、決済金額をサーバー側で再計算します。クライアントから送信された金額は決して信用しないでください
通貨の為替レートがない基準通貨を使用するか、エラーを表示します。商品が無料になってしまうゼロのレートを黙って使用しないでください
Shopify で通貨が表示されるが、チェックアウト時に受け付けられない設定 → 決済 → 対応通貨に加えて、設定 → マーケットでも通貨を有効にする必要があります。両方の設定が必要です

関連スキル

  • @checkout-flow-optimization
  • @tax-calculation
  • @stripe-integration
  • @paypal-integration

コメント