fix: translate payment method names based on locale

- Update PaymentMethodCard to use next-intl translations
- Remove hardcoded English names from config
- Add comingSoon translation key for unavailable methods
- Payment names now match checkout language (SR/EN/DE/FR)

src/components/payment/PaymentMethodCard.tsx

@@ -3,6 +3,7 @@
 import { cn } from "@/lib/utils";
 import type { PaymentMethod } from "@/lib/saleor/payments/types";
 import { Banknote, CreditCard, Building2, LucideIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 // Icon mapping for payment methods
 const iconMap: Record<string, LucideIcon> = {
@@ -26,8 +27,13 @@ export function PaymentMethodCard({
   disabled = false,
   locale,
 }: PaymentMethodCardProps) {
+  const t = useTranslations("Payment");
   const Icon = method.icon ? iconMap[method.icon] : Banknote;
 
+  // Get translated name and description based on method ID
+  const translatedName = t(`${method.id}.name`);
+  const translatedDescription = t(`${method.id}.description`);
+
   return (
     <label
       className={cn(
@@ -54,7 +60,7 @@ export function PaymentMethodCard({
 
       <div className="flex-1">
         <div className="flex items-center justify-between">
-          <span className="font-medium text-gray-900">{method.name}</span>
+          <span className="font-medium text-gray-900">{translatedName}</span>
           {method.fee > 0 && (
             <span className="text-sm text-amber-600">
               +{new Intl.NumberFormat(locale === 'sr' ? 'sr-RS' : 'en-US', {
@@ -65,11 +71,11 @@ export function PaymentMethodCard({
           )}
         </div>
 
-        <p className="mt-1 text-sm text-gray-600">{method.description}</p>
+        <p className="mt-1 text-sm text-gray-600">{translatedDescription}</p>
 
         {!method.available && (
           <span className="mt-2 inline-block text-xs text-gray-500">
-            {locale === 'sr' ? 'Uskoro dostupno' : 'Coming soon'}
+            {t(`${method.id}.comingSoon`)}
           </span>
         )}