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/TransferForm.tsx

@@ -1,8 +1,9 @@
 'use client'
 
 import { useState } from 'react'
-import { useTranslations } from 'next-intl'
+import { useTranslations, useLocale } from 'next-intl'
 import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
+import { PaymentMethodSelect, pdCostOf, type PayMethod } from '@/components/PaymentMethodSelect'
 
 /** Campo con ojo para mostrar/ocultar (contraseña / token). */
 function SecretInput({
@@ -42,12 +43,15 @@ function SecretInput({
   )
 }
 
-export function TransferForm({ characters, price }: { characters: CharOption[]; price: number }) {
+export function TransferForm({ characters, price, pdBalance }: { characters: CharOption[]; price: number; pdBalance: number }) {
   const t = useTranslations('CharService')
+  const tpay = useTranslations('Pay')
+  const locale = useLocale()
   const [character, setCharacter] = useState('')
   const [destination, setDestination] = useState('')
   const [password, setPassword] = useState('')
   const [token, setToken] = useState('')
+  const [method, setMethod] = useState<PayMethod>(pdBalance >= pdCostOf(price) ? 'pd' : 'sumup')
   const [busy, setBusy] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
@@ -67,13 +71,14 @@ export function TransferForm({ characters, price }: { characters: CharOption[];
           destination_account: destination.trim(),
           password,
           security_token: token.trim(),
-          provider: 'sumup',
+          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('transfer.errorGeneric'))
+        setError(data.message || (data.error && tpay.has(`errors.${data.error}`) ? tpay(`errors.${data.error}`) : t('transfer.errorGeneric')))
         setBusy(false)
       }
     } catch {
@@ -94,7 +99,7 @@ export function TransferForm({ characters, price }: { characters: CharOption[];
         <SecretInput id="password" value={password} onChange={setPassword} placeholder={t('transfer.passwordPlaceholder')} maxLength={16} toggleClass="toggle-password" />
         <br />
         <SecretInput id="security-token" value={token} onChange={setToken} placeholder={t('transfer.tokenPlaceholder')} maxLength={6} toggleClass="toggle-token" />
-        <br />
+        <PaymentMethodSelect value={method} onChange={setMethod} priceEur={price} pdBalance={pdBalance} />
         <button type="submit" className="transfer-button" disabled={busy || !character || !destination.trim() || !password || !token.trim()}>
           {busy ? t('transfer.submitting') : t('transfer.submit')}
         </button>