@djangocfg/ext-payments 1.0.21 → 1.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ext-payments",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "description": "Payments system extension for DjangoCFG",
   "keywords": [
     "django",
@@ -51,6 +51,11 @@
       "types": "./dist/api/hooks.d.ts",
       "import": "./dist/api/hooks.js",
       "require": "./dist/api/hooks.cjs"
+    },
+    "./i18n": {
+      "types": "./dist/i18n.d.ts",
+      "import": "./dist/i18n.js",
+      "require": "./dist/i18n.cjs"
     }
   },
   "files": [
@@ -64,29 +69,33 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.109",
-    "@djangocfg/ext-base": "^1.0.16",
-    "@djangocfg/ui-core": "^2.1.109",
-    "@djangocfg/ui-nextjs": "^2.1.109",
+    "@djangocfg/api": "^2.1.124",
+    "@djangocfg/ext-base": "^1.0.18",
+    "@djangocfg/i18n": "^2.1.124",
+    "@djangocfg/ui-core": "^2.1.124",
+    "@djangocfg/ui-nextjs": "^2.1.124",
+    "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
+    "moment": "^2.30.1",
     "next": "^16",
+    "next-intl": "^4",
     "p-retry": "^7.0.0",
     "react": "^19",
-    "swr": "^2.3.7",
-    "zod": "^4.3.4",
-    "moment": "^2.30.1",
     "react-hook-form": "^7.69.0",
-    "@hookform/resolvers": "^5.2.2"
+    "swr": "^2.3.7",
+    "zod": "^4.3.4"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.109",
-    "@djangocfg/ext-base": "^1.0.16",
-    "@djangocfg/typescript-config": "^2.1.109",
-    "@djangocfg/ui-nextjs": "^2.1.109",
+    "@djangocfg/api": "^2.1.124",
+    "@djangocfg/ext-base": "^1.0.18",
+    "@djangocfg/i18n": "^2.1.124",
+    "@djangocfg/typescript-config": "^2.1.124",
+    "@djangocfg/ui-nextjs": "^2.1.124",
     "@types/node": "^24.7.2",
     "@types/react": "^19.0.0",
     "consola": "^3.4.2",
+    "next-intl": "^4.1.0",
     "p-retry": "^7.0.0",
     "swr": "^2.3.7",
     "tsup": "^8.5.0",

package/src/components/ActivityList.tsx

@@ -6,8 +6,10 @@
 
 'use client';
 
+import { useMemo } from 'react';
 import { History, ChevronRight } from 'lucide-react';
 
+import { usePaymentsT } from '../i18n';
 import { Button, Skeleton } from '@djangocfg/ui-core';
 import { cn } from '@djangocfg/ui-core/lib';
 
@@ -27,8 +29,17 @@ export function ActivityList({
   limit = 10,
   className,
 }: ActivityListProps) {
+  const pt = usePaymentsT();
   const { activity, isLoadingActivity, hasMoreActivity } = useWallet();
 
+  // Prepare labels before render
+  const labels = useMemo(() => ({
+    title: pt('activity.title'),
+    noActivity: pt('activity.noActivity'),
+    transactionsWillAppear: pt('activity.transactionsWillAppear'),
+    viewAll: pt('actions.viewAll'),
+  }), [pt]);
+
   const displayedActivity = limit ? activity.slice(0, limit) : activity;
 
   if (isLoadingActivity) {
@@ -57,9 +68,9 @@ export function ActivityList({
         <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-muted mb-4">
           <History className="h-8 w-8 text-muted-foreground" />
         </div>
-        <h3 className="font-semibold mb-1">No Activity Yet</h3>
+        <h3 className="font-semibold mb-1">{labels.noActivity}</h3>
         <p className="text-sm text-muted-foreground">
-          Your transactions will appear here
+          {labels.transactionsWillAppear}
         </p>
       </div>
     );
@@ -69,10 +80,10 @@ export function ActivityList({
     <div className={cn('pt-6', className)}>
       {/* Header */}
       <div className="flex items-center justify-between px-4 py-2">
-        <h2 className="font-semibold text-lg">Recent Activity</h2>
+        <h2 className="font-semibold text-lg">{labels.title}</h2>
         {hasMoreActivity && onViewAll && (
           <Button variant="ghost" size="sm" onClick={onViewAll} className="text-primary">
-            View All
+            {labels.viewAll}
             <ChevronRight className="h-4 w-4 ml-1" />
           </Button>
         )}

package/src/components/AddFundsSheet.tsx

@@ -13,6 +13,7 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 
+import { usePaymentsT } from '../i18n';
 import {
   Alert,
   AlertDescription,
@@ -73,10 +74,29 @@ interface AddFundsSaved {
 }
 
 export function AddFundsSheet({ open, onOpenChange, onSuccess }: AddFundsSheetProps) {
+  const pt = usePaymentsT();
   const { currencies, isLoadingCurrencies, addFunds } = useWallet();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // Prepare labels before render
+  const labels = useMemo(() => ({
+    title: pt('sheets.addFundsTitle'),
+    description: pt('sheets.addFundsDescription'),
+    amountUsd: pt('form.amountUsd'),
+    payWith: pt('form.payWith'),
+    amount: pt('form.amount'),
+    serviceFee: pt('estimate.serviceFee'),
+    rate: pt('estimate.rate'),
+    youWillSend: pt('estimate.youWillSend'),
+    youWillReceive: pt('estimate.youWillReceive'),
+    gettingRate: pt('estimate.gettingRate'),
+    enterAmountToSee: pt('estimate.enterAmountToSee'),
+    minimumAmount: pt('estimate.minimumAmount'),
+    continue: pt('actions.continue'),
+    creating: pt('withdraw.creating'),
+  }), [pt]);
+
   // Remember last used currency and amount
   const [saved, setSaved] = useLocalStorage<AddFundsSaved>(STORAGE_KEY, {
     currency: '',
@@ -183,9 +203,9 @@ export function AddFundsSheet({ open, onOpenChange, onSuccess }: AddFundsSheetPr
     <ResponsiveSheet open={open} onOpenChange={handleOpenChange}>
       <ResponsiveSheetContent className="sm:max-w-md">
         <ResponsiveSheetHeader>
-          <ResponsiveSheetTitle>Add Funds</ResponsiveSheetTitle>
+          <ResponsiveSheetTitle>{labels.title}</ResponsiveSheetTitle>
           <ResponsiveSheetDescription>
-            Add funds to your wallet using cryptocurrency
+            {labels.description}
           </ResponsiveSheetDescription>
         </ResponsiveSheetHeader>
 
@@ -197,7 +217,7 @@ export function AddFundsSheet({ open, onOpenChange, onSuccess }: AddFundsSheetPr
               name="amount"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Amount (USD)</FormLabel>
+                  <FormLabel>{labels.amountUsd}</FormLabel>
                   <FormControl>
                     <div className="relative">
                       <span className="absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground text-lg">
@@ -225,7 +245,7 @@ export function AddFundsSheet({ open, onOpenChange, onSuccess }: AddFundsSheetPr
               name="currency"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Pay with</FormLabel>
+                  <FormLabel>{labels.payWith}</FormLabel>
                   <FormControl>
                     <CurrencyCombobox
                       options={currencyOptions}
@@ -245,24 +265,24 @@ export function AddFundsSheet({ open, onOpenChange, onSuccess }: AddFundsSheetPr
                 {isLoadingEstimate ? (
                   <div className="flex items-center justify-center py-2">
                     <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
-                    <span className="ml-2 text-sm text-muted-foreground">Getting rate...</span>
+                    <span className="ml-2 text-sm text-muted-foreground">{labels.gettingRate}</span>
                   </div>
                 ) : displayData ? (
                   <>
                     {/* Amount breakdown */}
                     <div className="flex items-center justify-between text-sm">
-                      <span className="text-muted-foreground">Amount</span>
+                      <span className="text-muted-foreground">{labels.amount}</span>
                       <span>${formatUsdAmount(displayData.amountToReceive)}</span>
                     </div>
                     <div className="flex items-center justify-between text-sm">
-                      <span className="text-muted-foreground">Service fee ({displayData.serviceFeePercent}%)</span>
+                      <span className="text-muted-foreground">{labels.serviceFee} ({displayData.serviceFeePercent}%)</span>
                       <span>+${formatUsdAmount(displayData.serviceFeeUsd)}</span>
                     </div>
 
                     {/* Rate (for non-stablecoins) */}
                     {displayData.showRate && (
                       <div className="flex items-center justify-between text-sm text-muted-foreground">
-                        <span>Rate</span>
+                        <span>{labels.rate}</span>
                         <span>1 {displayData.token} = ${displayData.rate}</span>
                       </div>
                     )}
@@ -270,7 +290,7 @@ export function AddFundsSheet({ open, onOpenChange, onSuccess }: AddFundsSheetPr
                     {/* You will send */}
                     <div className="border-t pt-2 mt-2">
                       <div className="flex items-center justify-between">
-                        <span className="font-medium">You will send</span>
+                        <span className="font-medium">{labels.youWillSend}</span>
                         <div className="text-right">
                           <div className="flex items-center gap-2 justify-end">
                             <TokenIcon symbol={displayData.token} size={20} />
@@ -287,20 +307,20 @@ export function AddFundsSheet({ open, onOpenChange, onSuccess }: AddFundsSheetPr
 
                     {/* You will receive */}
                     <div className="flex items-center justify-between text-sm pt-2">
-                      <span className="text-muted-foreground">You will receive</span>
+                      <span className="text-muted-foreground">{labels.youWillReceive}</span>
                       <span className="font-medium">${formatUsdAmount(displayData.amountToReceive)}</span>
                     </div>
 
                     {/* Minimum warning */}
                     {displayData.belowMinimum && displayData.minAmount && (
                       <div className="text-sm text-destructive mt-2 pt-2 border-t border-destructive/20">
-                        Minimum amount: ${displayData.minAmount}
+                        {labels.minimumAmount}: ${displayData.minAmount}
                       </div>
                     )}
                   </>
                 ) : (
                   <div className="text-center text-sm text-muted-foreground py-2">
-                    Enter amount to see conversion
+                    {labels.enterAmountToSee}
                   </div>
                 )}
               </div>
@@ -328,10 +348,10 @@ export function AddFundsSheet({ open, onOpenChange, onSuccess }: AddFundsSheetPr
               {isSubmitting ? (
                 <>
                   <RefreshCw className="h-5 w-5 mr-2 animate-spin" />
-                  Creating...
+                  {labels.creating}
                 </>
               ) : (
-                'Continue'
+                labels.continue
               )}
             </Button>
           </form>

package/src/components/BalanceHero.tsx

@@ -6,8 +6,10 @@
 
 'use client';
 
+import { useMemo } from 'react';
 import { Plus, ArrowUpRight, RefreshCw } from 'lucide-react';
 
+import { usePaymentsT } from '../i18n';
 import { Button, Skeleton } from '@djangocfg/ui-core';
 import { cn } from '@djangocfg/ui-core/lib';
 
@@ -20,8 +22,18 @@ interface BalanceHeroProps {
 }
 
 export function BalanceHero({ onAddFunds, onWithdraw, className }: BalanceHeroProps) {
+  const pt = usePaymentsT();
   const { balance, balanceAmount, isLoadingBalance, refreshWallet } = useWallet();
 
+  // Prepare labels before render
+  const labels = useMemo(() => ({
+    available: pt('balance.available'),
+    totalDeposited: pt('balance.totalDeposited'),
+    totalWithdrawn: pt('balance.totalWithdrawn'),
+    addFunds: pt('actions.addFunds'),
+    withdraw: pt('actions.withdraw'),
+  }), [pt]);
+
   const formattedBalance = new Intl.NumberFormat('en-US', {
     style: 'currency',
     currency: 'USD',
@@ -43,7 +55,7 @@ export function BalanceHero({ onAddFunds, onWithdraw, className }: BalanceHeroPr
             <h1 className="text-5xl font-bold tracking-tight tabular-nums">
               {formattedBalance}
             </h1>
-            <p className="text-muted-foreground mt-1">Available Balance</p>
+            <p className="text-muted-foreground mt-1">{labels.available}</p>
           </>
         )}
       </div>
@@ -56,7 +68,7 @@ export function BalanceHero({ onAddFunds, onWithdraw, className }: BalanceHeroPr
           className="rounded-full px-6"
         >
           <Plus className="h-5 w-5 mr-2" />
-          Add Funds
+          {labels.addFunds}
         </Button>
 
         <Button
@@ -66,7 +78,7 @@ export function BalanceHero({ onAddFunds, onWithdraw, className }: BalanceHeroPr
           className="rounded-full px-6"
         >
           <ArrowUpRight className="h-5 w-5 mr-2" />
-          Withdraw
+          {labels.withdraw}
         </Button>
 
         <Button
@@ -86,14 +98,14 @@ export function BalanceHero({ onAddFunds, onWithdraw, className }: BalanceHeroPr
             <span className="block font-medium text-foreground">
               ${parseFloat(balance.total_deposited || '0').toFixed(2)}
             </span>
-            <span>Total Deposited</span>
+            <span>{labels.totalDeposited}</span>
           </div>
           <div className="h-8 w-px bg-border" />
           <div className="text-center">
             <span className="block font-medium text-foreground">
               ${parseFloat(balance.total_withdrawn || '0').toFixed(2)}
             </span>
-            <span>Total Withdrawn</span>
+            <span>{labels.totalWithdrawn}</span>
           </div>
         </div>
       )}

package/src/components/CurrencyCombobox.tsx

@@ -4,6 +4,9 @@
  * Currency Combobox with TokenIcon
  */
 
+import { useMemo } from 'react';
+
+import { usePaymentsT } from '../i18n';
 import { Combobox, TokenIcon } from '@djangocfg/ui-core';
 import type { CurrencyOption } from '../types';
 
@@ -21,15 +24,22 @@ export function CurrencyCombobox({
   value,
   onChange,
   disabled,
-  placeholder = 'Select currency...',
+  placeholder,
 }: CurrencyComboboxProps) {
+  const pt = usePaymentsT();
+
+  const labels = useMemo(() => ({
+    selectCurrency: pt('form.selectCurrency'),
+    search: pt('form.search'),
+  }), [pt]);
+
   return (
     <Combobox
       options={options}
       value={value}
       onValueChange={onChange}
-      placeholder={placeholder}
-      searchPlaceholder="Search..."
+      placeholder={placeholder || labels.selectCurrency}
+      searchPlaceholder={labels.search}
       disabled={disabled}
       className="h-14"
       renderOption={(option) => (

package/src/components/PaymentSheet.tsx

@@ -19,6 +19,7 @@ import {
 import moment from 'moment';
 import useSWR from 'swr';
 
+import { usePaymentsT } from '../i18n';
 import {
   Button,
   CopyButton,
@@ -50,37 +51,32 @@ interface PaymentSheetProps {
 // Status Config
 // ─────────────────────────────────────────────────────────────────────────────
 
-const statusConfig: Record<string, { icon: any; color: string; bg: string; label: string; animate?: boolean }> = {
+const statusConfig: Record<string, { icon: any; color: string; bg: string; animate?: boolean }> = {
   pending: {
     icon: Clock,
     color: 'text-yellow-500',
     bg: 'bg-yellow-500/10',
-    label: 'Waiting for payment',
   },
   confirming: {
     icon: RefreshCw,
     color: 'text-blue-500',
     bg: 'bg-blue-500/10',
-    label: 'Confirming',
     animate: true,
   },
   completed: {
     icon: CheckCircle2,
     color: 'text-green-500',
     bg: 'bg-green-500/10',
-    label: 'Completed',
   },
   failed: {
     icon: XCircle,
     color: 'text-red-500',
     bg: 'bg-red-500/10',
-    label: 'Failed',
   },
   expired: {
     icon: AlertCircle,
     color: 'text-muted-foreground',
     bg: 'bg-muted',
-    label: 'Expired',
   },
 };
 
@@ -89,9 +85,47 @@ const statusConfig: Record<string, { icon: any; color: string; bg: string; label
 // ─────────────────────────────────────────────────────────────────────────────
 
 export function PaymentSheet({ paymentId, open, onOpenChange, onCreateNew }: PaymentSheetProps) {
+  const pt = usePaymentsT();
   const { getPaymentDetails } = useWallet();
   const [timeLeft, setTimeLeft] = useState<string>('');
 
+  // Prepare labels before render
+  const labels = useMemo(() => ({
+    title: pt('sheets.paymentTitle'),
+    // Status labels
+    waiting: pt('paymentStatus.waiting'),
+    confirming: pt('paymentStatus.confirming'),
+    completed: pt('paymentStatus.completed'),
+    failed: pt('paymentStatus.failed'),
+    expired: pt('paymentStatus.expired'),
+    paymentExpired: pt('paymentStatus.paymentExpired'),
+    // Descriptions
+    sendCrypto: pt('paymentDescriptions.sendCrypto'),
+    expiredDesc: pt('paymentDescriptions.expired'),
+    completedDesc: pt('paymentDescriptions.completed'),
+    failedDesc: pt('paymentDescriptions.failed'),
+    confirmingDesc: pt('paymentDescriptions.confirming'),
+    createNew: pt('paymentDescriptions.createNew'),
+    // Form
+    amountToSend: pt('form.amountToSend'),
+    equivalent: pt('form.equivalent'),
+    network: pt('form.network'),
+    paymentAddress: pt('form.paymentAddress'),
+    transactionHash: pt('form.transactionHash'),
+    paymentId: pt('form.paymentId'),
+    orderId: pt('form.orderId'),
+    created: pt('form.created'),
+    // Actions
+    tryAgain: pt('actions.tryAgain'),
+    refreshStatus: pt('actions.refreshStatus'),
+    createNewPayment: pt('actions.createNewPayment'),
+    openInPaymentProvider: pt('actions.openInPaymentProvider'),
+    // Withdraw
+    expiresIn: pt('withdraw.expiresIn'),
+    // Messages
+    failedToLoadPayment: pt('messages.failedToLoadPayment'),
+  }), [pt]);
+
   // Fetch payment details when sheet is open
   const { data: payment, isLoading, error, mutate } = useSWR<PaymentDetail>(
     open && paymentId ? ['payment-details', paymentId] : null,
@@ -145,24 +179,33 @@ export function PaymentSheet({ paymentId, open, onOpenChange, onCreateNew }: Pay
     const isConfirming = status === 'confirming';
     const canPay = isPending && !isExpired;
 
+    // Status label from translations
+    const statusLabels: Record<string, string> = {
+      pending: labels.waiting,
+      confirming: labels.confirming,
+      completed: labels.completed,
+      failed: labels.failed,
+      expired: labels.expired,
+    };
+
     // Description text
     let description = '';
-    if (canPay) description = 'Send cryptocurrency to complete payment';
-    else if (isExpired) description = 'This payment has expired';
-    else if (isCompleted) description = 'Payment completed successfully';
-    else if (isFailed) description = 'Payment failed';
-    else if (isConfirming) description = 'Confirming your payment';
+    if (canPay) description = labels.sendCrypto;
+    else if (isExpired) description = labels.expiredDesc;
+    else if (isCompleted) description = labels.completedDesc;
+    else if (isFailed) description = labels.failedDesc;
+    else if (isConfirming) description = labels.confirmingDesc;
 
     // Status badge
     const statusBadge = {
       bg: isExpired ? 'bg-muted' : config.bg,
       iconColor: isExpired ? 'text-muted-foreground' : config.color,
       iconAnimate: config.animate,
-      label: isExpired ? 'Payment Expired' : config.label,
+      label: isExpired ? labels.paymentExpired : statusLabels[status],
       subtitle: canPay && timeLeft
-        ? `Expires in ${timeLeft}`
+        ? `${labels.expiresIn} ${timeLeft}`
         : isExpired
-          ? 'Please create a new payment to continue'
+          ? labels.createNew
           : null,
     };
 
@@ -192,7 +235,7 @@ export function PaymentSheet({ paymentId, open, onOpenChange, onCreateNew }: Pay
       amountUsd,
       createdAt,
     };
-  }, [payment, timeLeft]);
+  }, [payment, timeLeft, labels]);
 
   const { config, canPay, isExpired, description, statusBadge, qrCodeUrl, amountUsd, createdAt } = displayData;
   const StatusIcon = config.icon;
@@ -201,7 +244,7 @@ export function PaymentSheet({ paymentId, open, onOpenChange, onCreateNew }: Pay
     <ResponsiveSheet open={open} onOpenChange={onOpenChange}>
       <ResponsiveSheetContent className="sm:max-w-lg">
         <ResponsiveSheetHeader>
-          <ResponsiveSheetTitle>Payment Details</ResponsiveSheetTitle>
+          <ResponsiveSheetTitle>{labels.title}</ResponsiveSheetTitle>
           <ResponsiveSheetDescription>{description}</ResponsiveSheetDescription>
         </ResponsiveSheetHeader>
 
@@ -219,8 +262,8 @@ export function PaymentSheet({ paymentId, open, onOpenChange, onCreateNew }: Pay
           {error && (
             <div className="flex flex-col items-center justify-center py-12">
               <XCircle className="h-12 w-12 text-destructive mb-4" />
-              <p className="text-sm text-muted-foreground mb-4">Failed to load payment</p>
-              <Button onClick={() => mutate()}>Try Again</Button>
+              <p className="text-sm text-muted-foreground mb-4">{labels.failedToLoadPayment}</p>
+              <Button onClick={() => mutate()}>{labels.tryAgain}</Button>
             </div>
           )}
 
@@ -240,7 +283,7 @@ export function PaymentSheet({ paymentId, open, onOpenChange, onCreateNew }: Pay
               {/* Amount */}
               <div className="bg-muted rounded-xl p-4 space-y-3">
                 <div className="flex items-center justify-between">
-                  <span className="text-muted-foreground">Amount to send</span>
+                  <span className="text-muted-foreground">{labels.amountToSend}</span>
                   <div className="flex items-center gap-2">
                     <TokenIcon symbol={payment.currency_code} size={24} />
                     <span className="font-mono font-bold text-lg">
@@ -249,12 +292,12 @@ export function PaymentSheet({ paymentId, open, onOpenChange, onCreateNew }: Pay
                   </div>
                 </div>
                 <div className="flex items-center justify-between text-sm">
-                  <span className="text-muted-foreground">Equivalent</span>
+                  <span className="text-muted-foreground">{labels.equivalent}</span>
                   <span className="font-semibold">{amountUsd}</span>
                 </div>
                 {payment.currency_network && (
                   <div className="flex items-center justify-between text-sm pt-2 border-t">
-                    <span className="text-muted-foreground">Network</span>
+                    <span className="text-muted-foreground">{labels.network}</span>
                     <span className="font-medium">{payment.currency_network}</span>
                   </div>
                 )}
@@ -270,7 +313,7 @@ export function PaymentSheet({ paymentId, open, onOpenChange, onCreateNew }: Pay
               {/* Payment Address */}
               {payment.pay_address && canPay && (
                 <div className="space-y-2">
-                  <label className="text-sm font-medium">Payment Address</label>
+                  <label className="text-sm font-medium">{labels.paymentAddress}</label>
                   <div className="flex items-center gap-2">
                     <div className="flex-1 p-3 bg-muted rounded-xl font-mono text-sm break-all">
                       {payment.pay_address}
@@ -290,14 +333,14 @@ export function PaymentSheet({ paymentId, open, onOpenChange, onCreateNew }: Pay
                     onCreateNew();
                   }}
                 >
-                  Create New Payment
+                  {labels.createNewPayment}
                 </Button>
               )}
 
               {/* Transaction Hash (if completed) */}
               {payment.transaction_hash && (
                 <div className="space-y-2">
-                  <label className="text-sm font-medium">Transaction Hash</label>
+                  <label className="text-sm font-medium">{labels.transactionHash}</label>
                   <div className="p-3 bg-muted rounded-xl font-mono text-sm break-all">
                     {payment.transaction_hash}
                   </div>
@@ -312,24 +355,24 @@ export function PaymentSheet({ paymentId, open, onOpenChange, onCreateNew }: Pay
                   onClick={() => window.open(payment.payment_url!, '_blank')}
                 >
                   <ExternalLink className="h-4 w-4 mr-2" />
-                  Open in Payment Provider
+                  {labels.openInPaymentProvider}
                 </Button>
               )}
 
               {/* Metadata */}
               <div className="space-y-2 text-xs text-muted-foreground pt-4 border-t">
                 <div className="flex justify-between">
-                  <span>Payment ID</span>
+                  <span>{labels.paymentId}</span>
                   <span className="font-mono">{payment.id}</span>
                 </div>
                 {payment.internal_payment_id && (
                   <div className="flex justify-between">
-                    <span>Order #</span>
+                    <span>{labels.orderId}</span>
                     <span className="font-mono">{payment.internal_payment_id}</span>
                   </div>
                 )}
                 <div className="flex justify-between">
-                  <span>Created</span>
+                  <span>{labels.created}</span>
                   <span>{createdAt}</span>
                 </div>
               </div>
@@ -341,7 +384,7 @@ export function PaymentSheet({ paymentId, open, onOpenChange, onCreateNew }: Pay
                 onClick={() => mutate()}
               >
                 <RefreshCw className="h-4 w-4 mr-2" />
-                Refresh Status
+                {labels.refreshStatus}
               </Button>
             </div>
           )}