i18n for the checkout page of Clubs Payments

src/plugins/clubs-payments/Id.astro

@@ -2,6 +2,8 @@
 import type { ComposedItem } from '.'
 import TransactionForm from './TransactionForm.svelte'
 import { Checkout } from '@devprotocol/clubs-core/ui/components'
+import { i18nFactory } from '@devprotocol/clubs-core'
+import { Strings } from './i18n'
 
 const { item, propertyAddress, rpcUrl, chainId, ...other } = Astro.props as {
   item: ComposedItem
@@ -10,6 +12,13 @@ const { item, propertyAddress, rpcUrl, chainId, ...other } = Astro.props as {
   chainId: number
 }
 
+const i18nBase = i18nFactory(Strings)
+const langs = Astro.request.headers
+  .get('accept-language')
+  ?.replace(/;q=[\d\.]+/g, '')
+  .split(',') ?? ['en']
+const i18n = i18nBase(langs)
+
 const { PUBLIC_POP_CLIENT_KEY } = import.meta.env
 ---
 
@@ -22,7 +31,7 @@ const { PUBLIC_POP_CLIENT_KEY } = import.meta.env
 <Checkout
   amount={item.price.yen}
   destination={propertyAddress}
-  fiatCurrency="YEN"
+  fiatCurrency={i18n('JPY')}
   rpcUrl={rpcUrl}
   payload={item.source.payload}
   description={item.source.description}

src/plugins/clubs-payments/i18n.ts

@@ -10,4 +10,8 @@ export const Strings = {
     en: 'Pay with a credit card',
     ja: 'クレジットカードで支払う',
   },
+  JPY: {
+    en: 'JPY',
+    ja: '円',
+  },
 } satisfies ClubsI18nParts