feat: implement Cash on Delivery (COD) payment method

This commit adds comprehensive COD support using Saleor's native Transaction system:

**Architecture:**
- Uses Saleor's native Transaction objects (not metadata)
- Modular payment method configuration
- Extensible design for future payment types (cards, bank transfer, etc.)

**New Components:**
- PaymentMethodSelector: Reusable payment method selection UI
- PaymentMethodCard: Individual payment method card
- CODInstructions: COD-specific instructions and guidance
- PaymentSection: Checkout integration wrapper

**Core Features:**
- COD selected by default for Serbia (default-channel)
- Transaction created automatically on order completion
- Transaction visible in Saleor Dashboard
- Multi-language support (EN, SR, DE, FR)
- No additional fees
- Instructions shown to customer (prepare cash, inspect order, no fee)

**Files Added:**
- docs/COD-IMPLEMENTATION-PLAN.md
- src/lib/config/paymentMethods.ts
- src/lib/saleor/payments/types.ts
- src/lib/saleor/payments/cod.ts
- src/components/payment/PaymentMethodSelector.tsx
- src/components/payment/PaymentMethodCard.tsx
- src/components/payment/CODInstructions.tsx
- src/components/payment/index.ts
- src/app/[locale]/checkout/components/PaymentSection.tsx

**Files Modified:**
- src/app/[locale]/checkout/page.tsx (added payment section, transaction creation)
- src/i18n/messages/{en,sr,de,fr}.json (payment translations)

**Technical Details:**
- Transaction status: NOT_CHARGED
- Available actions: [CHARGE]
- PSP Reference format: COD-{orderNumber}-{timestamp}
- Staff collects cash and fulfills order via Dashboard

Closes: Cash on Delivery payment implementation

src/app/[locale]/checkout/components/PaymentSection.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { PaymentMethodSelector, CODInstructions } from "@/components/payment";
+import { getPaymentMethodsForChannel } from "@/lib/config/paymentMethods";
+import type { PaymentMethod } from "@/lib/saleor/payments/types";
+import { useTranslations } from "next-intl";
+
+interface PaymentSectionProps {
+  selectedMethodId: string;
+  onSelectMethod: (methodId: string) => void;
+  locale: string;
+  channel?: string;
+  disabled?: boolean;
+}
+
+export function PaymentSection({
+  selectedMethodId,
+  onSelectMethod,
+  locale,
+  channel = "default-channel",
+  disabled = false,
+}: PaymentSectionProps) {
+  const t = useTranslations("Payment");
+
+  // Get available payment methods for this channel
+  const paymentMethods: PaymentMethod[] = getPaymentMethodsForChannel(channel);
+
+  // Get the selected method details
+  const selectedMethod = paymentMethods.find((m) => m.id === selectedMethodId);
+
+  return (
+    <section className="border-t border-gray-200 pt-6">
+      <PaymentMethodSelector
+        methods={paymentMethods}
+        selectedMethodId={selectedMethodId}
+        onSelectMethod={onSelectMethod}
+        locale={locale}
+        disabled={disabled}
+      />
+
+      {/* Show COD instructions when COD is selected */}
+      {selectedMethod?.id === "cod" && (
+        <CODInstructions locale={locale} />
+      )}
+    </section>
+  );
+}