Permitir pagar los servicios con PD, Stripe o SumUp (elección)

Los 9 servicios con precio en euros (rename, customize, change-race,
change-faction, level-up, gold, transfer, restore-item, send-gift) ahora
ofrecen un selector de forma de pago con las 3 opciones: saldo PD, tarjeta
(Stripe) o tarjeta (SumUp).

- lib/dpoints: spendDPoints() descuenta PD de forma atómica (FOR UPDATE).
- lib/pay-with-dpoints: paga con saldo PD, ejecuta la acción al momento y
  reembolsa si la ejecución falla; 100 PD = 1 €.
- rutas checkout (character/[service] y gift): rama provider='pd' que valida
  saldo, descuenta, ejecuta fulfill y devuelve la URL de éxito (sin pasarela).
- service-success: rama provider='pd' (la entrega ya se hizo en el checkout).
- PaymentMethodSelect: componente compartido con coste por método y saldo;
  desactiva PD si no hay saldo suficiente.
- Formularios (PaidServiceForm, Gold, Transfer, RestoreItems, SendGift) y sus
  páginas pasan el saldo PD y envían el método elegido + locale.
- i18n: namespace Pay (es/en); añadidas claves Paid.restore-item que faltaban.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web-next/components/GoldForm.tsx

@@ -1,24 +1,29 @@
 'use client'
 
 import { useState } from 'react'
-import { useTranslations } from 'next-intl'
+import { useTranslations, useLocale } from 'next-intl'
 import type { GoldOption } from '@/lib/prices'
 import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
+import { PaymentMethodSelect, pdCostOf, type PayMethod } from '@/components/PaymentMethodSelect'
 
-export function GoldForm({ characters, options }: { characters: CharOption[]; options: GoldOption[] }) {
+export function GoldForm({ characters, options, pdBalance }: { characters: CharOption[]; options: GoldOption[]; pdBalance: number }) {
   const t = useTranslations('Services')
   const tp = useTranslations('Paid')
+  const tpay = useTranslations('Pay')
+  const locale = useLocale()
   const [character, setCharacter] = useState('')
   const [amount, setAmount] = useState('')
+  const [method, setMethod] = useState<PayMethod>('pd')
   const [busy, setBusy] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
+  const price = options.find((o) => String(o.gold_amount) === amount)?.price ?? 0
+
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault()
     if (busy || !character || !amount) return
-    const opt = options.find((o) => String(o.gold_amount) === amount)
-    const price = opt?.price ?? 0
-    if (!window.confirm(`¿Estás seguro de enviar ${amount} de oro a ${character} por ${price} € (SumUp)?`)) return
+    const payAmount = method === 'pd' ? tpay('pdCost', { cost: pdCostOf(price) }) : tpay('eur', { price })
+    if (!window.confirm(tpay('confirm', { amount: payAmount }))) return
     setBusy(true)
     setError(null)
     try {
@@ -26,12 +31,12 @@ export function GoldForm({ characters, options }: { characters: CharOption[]; op
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         credentials: 'same-origin',
-        body: JSON.stringify({ character, gold_amount: amount, provider: 'sumup' }),
+        body: JSON.stringify({ character, gold_amount: amount, provider: method, locale }),
       })
-      const data: { success?: boolean; url?: string; message?: string } = await res.json()
+      const data: { success?: boolean; url?: string; message?: string; error?: string } = await res.json()
       if (data.success && data.url) window.location.href = data.url
       else {
-        setError(data.message || t('genericError'))
+        setError(data.message || (data.error && tpay.has(`errors.${data.error}`) ? tpay(`errors.${data.error}`) : t('genericError')))
         setBusy(false)
       }
     } catch {
@@ -55,6 +60,7 @@ export function GoldForm({ characters, options }: { characters: CharOption[]; op
             </option>
           ))}
         </select>
+        {amount && <PaymentMethodSelect value={method} onChange={setMethod} priceEur={price} pdBalance={pdBalance} />}
         <br />
         <button type="submit" className="gold-button" disabled={busy || !character || !amount}>
           {busy ? t('processing') : tp('gold.send')}