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

@@ -1,9 +1,10 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import { useTranslations } from 'next-intl'
+import { useTranslations, useLocale } from 'next-intl'
 import type { GiftCategory, GiftItem } from '@/lib/gift'
 import { CharacterSelect, type CharOption } from '@/components/CharacterSelect'
+import { PaymentMethodSelect, type PayMethod } from '@/components/PaymentMethodSelect'
 
 // Tope de cantidad en la interfaz. El servidor lo revalida en priceCart (fuente de verdad).
 const MAX_QTY = 100
@@ -49,16 +50,21 @@ export function SendGiftForm({
   characters,
   catalog,
   currency = '€',
+  pdBalance = 0,
 }: {
   characters: CharOption[]
   catalog: GiftCategory[]
   currency?: string
+  pdBalance?: number
 }) {
   const t = useTranslations('CharService')
+  const tpay = useTranslations('Pay')
+  const locale = useLocale()
   const [source, setSource] = useState('')
   const [destination, setDestination] = useState('')
   const [token, setToken] = useState('')
   const [cart, setCart] = useState<Map<number, CartEntry>>(new Map())
+  const [method, setMethod] = useState<PayMethod>('pd')
   const [busy, setBusy] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
@@ -133,13 +139,15 @@ export function SendGiftForm({
           destination: destination.trim(),
           security_token: token.trim(),
           cart: [...cart.values()].map((e) => ({ id: e.item.id, qty: e.qty })),
-          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('sendGift.errPayment'))
+        const payErr = data.error && tpay.has(`errors.${data.error}`) ? tpay(`errors.${data.error}`) : undefined
+        setError(data.message || payErr || t('sendGift.errPayment'))
         setBusy(false)
       }
     } catch {
@@ -252,6 +260,7 @@ export function SendGiftForm({
           <p>
             {t.rich('sendGift.total', { total, currency, s: (c) => <span className="yellow-info">{c}</span> })}
           </p>
+          {total > 0 && <PaymentMethodSelect value={method} onChange={setMethod} priceEur={total} pdBalance={pdBalance} />}
           <br />
           <button
             type="submit"