298 lines
10 KiB
TypeScript
298 lines
10 KiB
TypeScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Card, Input, Button } from '../../ui';
|
|
import { PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';
|
|
import { AlertCircle, CheckCircle, CreditCard, Lock } from 'lucide-react';
|
|
|
|
interface PaymentFormProps {
|
|
onPaymentSuccess: (paymentMethodId?: string) => void;
|
|
onPaymentError: (error: string) => void;
|
|
className?: string;
|
|
bypassPayment?: boolean;
|
|
onBypassToggle?: () => void;
|
|
userName?: string;
|
|
userEmail?: string;
|
|
}
|
|
|
|
const PaymentForm: React.FC<PaymentFormProps> = ({
|
|
onPaymentSuccess,
|
|
onPaymentError,
|
|
className = '',
|
|
bypassPayment = false,
|
|
onBypassToggle,
|
|
userName = '',
|
|
userEmail = ''
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const stripe = useStripe();
|
|
const elements = useElements();
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [cardComplete, setCardComplete] = useState(false);
|
|
const [billingDetails, setBillingDetails] = useState({
|
|
name: userName,
|
|
email: userEmail,
|
|
address: {
|
|
line1: '',
|
|
city: '',
|
|
state: '',
|
|
postal_code: '',
|
|
country: 'ES',
|
|
},
|
|
});
|
|
|
|
// For development mode - bypass payment option
|
|
const handleBypassPayment = () => {
|
|
if (onBypassToggle) {
|
|
onBypassToggle();
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!stripe || !elements) {
|
|
// Stripe.js has not loaded yet
|
|
onPaymentError('Stripe.js no ha cargado correctamente');
|
|
return;
|
|
}
|
|
|
|
if (bypassPayment) {
|
|
// In development mode, bypass payment processing
|
|
onPaymentSuccess();
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
// Submit the payment element to validate all inputs
|
|
const { error: submitError } = await elements.submit();
|
|
|
|
if (submitError) {
|
|
setError(submitError.message || 'Error al validar el formulario');
|
|
onPaymentError(submitError.message || 'Error al validar el formulario');
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
// Create payment method using the PaymentElement
|
|
// This is the correct way to create a payment method with PaymentElement
|
|
const { error: paymentError, paymentMethod } = await stripe.createPaymentMethod({
|
|
elements,
|
|
params: {
|
|
billing_details: {
|
|
name: billingDetails.name,
|
|
email: billingDetails.email,
|
|
address: billingDetails.address,
|
|
},
|
|
},
|
|
});
|
|
|
|
if (paymentError) {
|
|
setError(paymentError.message || 'Error al procesar el pago');
|
|
onPaymentError(paymentError.message || 'Error al procesar el pago');
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
// Send the paymentMethod.id to your server to create a subscription
|
|
console.log('Payment method created:', paymentMethod);
|
|
|
|
// Pass the payment method ID to the parent component for server-side processing
|
|
onPaymentSuccess(paymentMethod?.id);
|
|
} catch (err) {
|
|
const errorMessage = err instanceof Error ? err.message : 'Error desconocido al procesar el pago';
|
|
setError(errorMessage);
|
|
onPaymentError(errorMessage);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handlePaymentElementChange = (event: any) => {
|
|
setError(event.error?.message || null);
|
|
setCardComplete(event.complete);
|
|
};
|
|
|
|
return (
|
|
<Card className={`p-6 ${className}`}>
|
|
<div className="text-center mb-6">
|
|
<h3 className="text-xl font-bold text-text-primary mb-2 flex items-center justify-center gap-2">
|
|
<CreditCard className="w-5 h-5" />
|
|
{t('auth:payment.payment_info', 'Información de Pago')}
|
|
</h3>
|
|
<p className="text-text-secondary text-sm">
|
|
{t('auth:payment.secure_payment', 'Tu información de pago está protegida con encriptación de extremo a extremo')}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Development mode toggle */}
|
|
<div className="mb-6 p-3 bg-yellow-50 border border-yellow-200 rounded-lg flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Lock className="w-4 h-4 text-yellow-600" />
|
|
<span className="text-sm text-yellow-800">
|
|
{t('auth:payment.dev_mode', 'Modo Desarrollo')}
|
|
</span>
|
|
</div>
|
|
<Button
|
|
variant={bypassPayment ? "primary" : "outline"}
|
|
size="sm"
|
|
onClick={handleBypassPayment}
|
|
>
|
|
{bypassPayment
|
|
? t('auth:payment.payment_bypassed', 'Pago Bypassed')
|
|
: t('auth:payment.bypass_payment', 'Bypass Pago')}
|
|
</Button>
|
|
</div>
|
|
|
|
{!bypassPayment && (
|
|
<form onSubmit={handleSubmit}>
|
|
{/* Billing Details */}
|
|
<div className="space-y-4 mb-6">
|
|
<Input
|
|
label={t('auth:payment.cardholder_name', 'Nombre del titular')}
|
|
placeholder="Nombre completo"
|
|
value={billingDetails.name}
|
|
onChange={(e) => setBillingDetails({...billingDetails, name: e.target.value})}
|
|
required
|
|
disabled={loading}
|
|
/>
|
|
|
|
<Input
|
|
type="email"
|
|
label={t('auth:payment.email', 'Correo electrónico')}
|
|
placeholder="tu.email@ejemplo.com"
|
|
value={billingDetails.email}
|
|
onChange={(e) => setBillingDetails({...billingDetails, email: e.target.value})}
|
|
required
|
|
disabled={loading}
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Input
|
|
label={t('auth:payment.address_line1', 'Dirección')}
|
|
placeholder="Calle y número"
|
|
value={billingDetails.address.line1}
|
|
onChange={(e) => setBillingDetails({...billingDetails, address: {...billingDetails.address, line1: e.target.value}})}
|
|
required
|
|
disabled={loading}
|
|
/>
|
|
|
|
<Input
|
|
label={t('auth:payment.city', 'Ciudad')}
|
|
placeholder="Ciudad"
|
|
value={billingDetails.address.city}
|
|
onChange={(e) => setBillingDetails({...billingDetails, address: {...billingDetails.address, city: e.target.value}})}
|
|
required
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<Input
|
|
label={t('auth:payment.state', 'Estado/Provincia')}
|
|
placeholder="Estado"
|
|
value={billingDetails.address.state}
|
|
onChange={(e) => setBillingDetails({...billingDetails, address: {...billingDetails.address, state: e.target.value}})}
|
|
required
|
|
disabled={loading}
|
|
/>
|
|
|
|
<Input
|
|
label={t('auth:payment.postal_code', 'Código Postal')}
|
|
placeholder="Código postal"
|
|
value={billingDetails.address.postal_code}
|
|
onChange={(e) => setBillingDetails({...billingDetails, address: {...billingDetails.address, postal_code: e.target.value}})}
|
|
required
|
|
disabled={loading}
|
|
/>
|
|
|
|
<Input
|
|
label={t('auth:payment.country', 'País')}
|
|
placeholder="País"
|
|
value={billingDetails.address.country}
|
|
onChange={(e) => setBillingDetails({...billingDetails, address: {...billingDetails.address, country: e.target.value}})}
|
|
required
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Payment Element */}
|
|
<div className="mb-6">
|
|
<label className="block text-sm font-medium text-text-primary mb-2">
|
|
{t('auth:payment.payment_details', 'Detalles de Pago')}
|
|
</label>
|
|
<div className="border border-border-primary rounded-lg p-3 bg-bg-primary">
|
|
<PaymentElement
|
|
options={{
|
|
layout: 'tabs',
|
|
fields: {
|
|
billingDetails: 'auto',
|
|
},
|
|
wallets: {
|
|
applePay: 'auto',
|
|
googlePay: 'auto',
|
|
},
|
|
}}
|
|
onChange={handlePaymentElementChange}
|
|
/>
|
|
</div>
|
|
<p className="text-xs text-text-tertiary mt-2 flex items-center gap-1">
|
|
<Lock className="w-3 h-3" />
|
|
{t('auth:payment.payment_info_secure', 'Tu información de pago está segura')}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Error Message */}
|
|
{error && (
|
|
<div className="mb-4 bg-color-error/10 border border-color-error/20 text-color-error px-4 py-3 rounded-lg text-sm flex items-start space-x-3" role="alert">
|
|
<AlertCircle className="w-5 h-5 mt-0.5 flex-shrink-0" />
|
|
<span>{error}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Submit Button */}
|
|
<Button
|
|
type="submit"
|
|
variant="primary"
|
|
size="lg"
|
|
isLoading={loading}
|
|
loadingText="Procesando pago..."
|
|
disabled={!stripe || loading || (!cardComplete && !bypassPayment)}
|
|
className="w-full"
|
|
>
|
|
{t('auth:payment.process_payment', 'Procesar Pago')}
|
|
</Button>
|
|
</form>
|
|
)}
|
|
|
|
{bypassPayment && (
|
|
<div className="text-center py-8">
|
|
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4">
|
|
<CheckCircle className="w-8 h-8 text-green-600" />
|
|
</div>
|
|
<h4 className="text-lg font-semibold text-text-primary mb-2">
|
|
{t('auth:payment.payment_bypassed_title', 'Pago Bypassed')}
|
|
</h4>
|
|
<p className="text-text-secondary mb-6">
|
|
{t('auth:payment.payment_bypassed_description', 'El proceso de pago ha sido omitido en modo desarrollo. El registro continuará normalmente.')}
|
|
</p>
|
|
<Button
|
|
variant="primary"
|
|
size="lg"
|
|
onClick={() => onPaymentSuccess()}
|
|
className="w-full"
|
|
>
|
|
{t('auth:payment.continue_registration', 'Continuar con el Registro')}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default PaymentForm;
|