Square enhancements
This commit is contained in:
James Pattinson
@@ -17,6 +17,14 @@ const SquarePayment: React.FC<SquarePaymentProps> = ({
|
||||
const [card, setCard] = useState<any>(null);
|
||||
const [payments, setPayments] = useState<any>(null);
|
||||
const [squareConfig, setSquareConfig] = useState<any>(null);
|
||||
|
||||
// Billing details state
|
||||
const [cardholderName, setCardholderName] = useState('');
|
||||
const [addressLine1, setAddressLine1] = useState('');
|
||||
const [addressLine2, setAddressLine2] = useState('');
|
||||
const [city, setCity] = useState('');
|
||||
const [postalCode, setPostalCode] = useState('');
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadSquareConfig();
|
||||
@@ -28,6 +36,31 @@ const SquarePayment: React.FC<SquarePaymentProps> = ({
|
||||
}
|
||||
}, [squareConfig]);
|
||||
|
||||
const loadSquareSDK = (environment: string): Promise<void> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
// Check if Square SDK is already loaded
|
||||
if (window.Square) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
|
||||
const script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
|
||||
// Load the correct SDK based on environment
|
||||
if (environment?.toLowerCase() === 'sandbox') {
|
||||
script.src = 'https://sandbox.web.squarecdn.com/v1/square.js';
|
||||
} else {
|
||||
script.src = 'https://web.squarecdn.com/v1/square.js';
|
||||
}
|
||||
|
||||
script.onload = () => resolve();
|
||||
script.onerror = () => reject(new Error('Failed to load Square SDK'));
|
||||
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
};
|
||||
|
||||
const loadSquareConfig = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/v1/payments/config/square', {
|
||||
@@ -36,6 +69,12 @@ const SquarePayment: React.FC<SquarePaymentProps> = ({
|
||||
}
|
||||
});
|
||||
const config = await response.json();
|
||||
console.log('Square config received:', config);
|
||||
|
||||
// Load the appropriate Square SDK based on environment
|
||||
await loadSquareSDK(config.environment);
|
||||
console.log('Square SDK loaded for environment:', config.environment);
|
||||
|
||||
setSquareConfig(config);
|
||||
} catch (error) {
|
||||
console.error('Failed to load Square config:', error);
|
||||
@@ -53,13 +92,42 @@ const SquarePayment: React.FC<SquarePaymentProps> = ({
|
||||
}
|
||||
|
||||
try {
|
||||
// Determine environment - default to production if not explicitly set to sandbox
|
||||
const environment = squareConfig.environment?.toLowerCase() === 'sandbox' ? 'sandbox' : 'production';
|
||||
console.log('Initializing Square with environment:', environment);
|
||||
console.log('Application ID:', squareConfig.application_id);
|
||||
console.log('Location ID:', squareConfig.location_id);
|
||||
|
||||
const paymentsInstance = window.Square.payments(
|
||||
squareConfig.application_id,
|
||||
squareConfig.location_id
|
||||
squareConfig.location_id,
|
||||
{
|
||||
environment: environment
|
||||
}
|
||||
);
|
||||
setPayments(paymentsInstance);
|
||||
|
||||
const cardInstance = await paymentsInstance.card();
|
||||
// Initialize card without postal code (we collect it separately in billing form)
|
||||
const cardInstance = await paymentsInstance.card({
|
||||
style: {
|
||||
'.input-container': {
|
||||
borderColor: '#E0E0E0',
|
||||
borderRadius: '4px'
|
||||
},
|
||||
'.input-container.is-focus': {
|
||||
borderColor: '#4CAF50'
|
||||
},
|
||||
'.message-text': {
|
||||
color: '#999'
|
||||
},
|
||||
'.message-icon': {
|
||||
color: '#999'
|
||||
},
|
||||
'input': {
|
||||
fontSize: '14px'
|
||||
}
|
||||
}
|
||||
});
|
||||
await cardInstance.attach('#card-container');
|
||||
setCard(cardInstance);
|
||||
setIsLoading(false);
|
||||
@@ -76,14 +144,33 @@ const SquarePayment: React.FC<SquarePaymentProps> = ({
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate billing details
|
||||
if (!cardholderName.trim()) {
|
||||
onPaymentError('Please enter cardholder name');
|
||||
return;
|
||||
}
|
||||
if (!addressLine1.trim()) {
|
||||
onPaymentError('Please enter address line 1');
|
||||
return;
|
||||
}
|
||||
if (!city.trim()) {
|
||||
onPaymentError('Please enter city');
|
||||
return;
|
||||
}
|
||||
if (!postalCode.trim()) {
|
||||
onPaymentError('Please enter postal code');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setIsProcessing(true);
|
||||
|
||||
try {
|
||||
// Tokenize the payment method
|
||||
// Tokenize the payment method with billing details
|
||||
const result = await card.tokenize();
|
||||
|
||||
if (result.status === 'OK') {
|
||||
// Send the token to your backend
|
||||
// Send the token to your backend with billing details
|
||||
const response = await fetch('/api/v1/payments/square/process', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@@ -94,7 +181,15 @@ const SquarePayment: React.FC<SquarePaymentProps> = ({
|
||||
source_id: result.token,
|
||||
amount: amount,
|
||||
tier_id: tierId,
|
||||
note: `Membership payment - £${amount.toFixed(2)}`
|
||||
note: `Membership payment - £${amount.toFixed(2)}`,
|
||||
billing_details: {
|
||||
cardholder_name: cardholderName,
|
||||
address_line_1: addressLine1,
|
||||
address_line_2: addressLine2 || undefined,
|
||||
city: city,
|
||||
postal_code: postalCode,
|
||||
country: 'GB'
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
@@ -124,33 +219,149 @@ const SquarePayment: React.FC<SquarePaymentProps> = ({
|
||||
onPaymentError(error.message || 'Payment processing failed');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setIsProcessing(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: '400px', margin: '0 auto' }}>
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<div style={{ maxWidth: '500px', margin: '0 auto' }}>
|
||||
<div style={{ marginBottom: '24px' }}>
|
||||
<h4 style={{ marginBottom: '10px' }}>Card Payment</h4>
|
||||
<p style={{ fontSize: '14px', color: '#666' }}>
|
||||
Amount: <strong>£{amount.toFixed(2)}</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="card-container"
|
||||
style={{
|
||||
minHeight: '200px',
|
||||
marginBottom: '20px'
|
||||
}}
|
||||
/>
|
||||
{/* Cardholder Name */}
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: '500' }}>
|
||||
Cardholder Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={cardholderName}
|
||||
onChange={(e) => setCardholderName(e.target.value)}
|
||||
placeholder="Name as it appears on card"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '10px 12px',
|
||||
fontSize: '14px',
|
||||
border: '1px solid #E0E0E0',
|
||||
borderRadius: '4px',
|
||||
boxSizing: 'border-box'
|
||||
}}
|
||||
disabled={isLoading || !card}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Address Line 1 */}
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: '500' }}>
|
||||
Address Line 1 *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={addressLine1}
|
||||
onChange={(e) => setAddressLine1(e.target.value)}
|
||||
placeholder="Street address"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '10px 12px',
|
||||
fontSize: '14px',
|
||||
border: '1px solid #E0E0E0',
|
||||
borderRadius: '4px',
|
||||
boxSizing: 'border-box'
|
||||
}}
|
||||
disabled={isLoading || !card}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Address Line 2 */}
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: '500' }}>
|
||||
Address Line 2
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={addressLine2}
|
||||
onChange={(e) => setAddressLine2(e.target.value)}
|
||||
placeholder="Apartment, suite, etc. (optional)"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '10px 12px',
|
||||
fontSize: '14px',
|
||||
border: '1px solid #E0E0E0',
|
||||
borderRadius: '4px',
|
||||
boxSizing: 'border-box'
|
||||
}}
|
||||
disabled={isLoading || !card}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* City and Postal Code */}
|
||||
<div style={{ display: 'flex', gap: '12px', marginBottom: '16px' }}>
|
||||
<div style={{ flex: '1' }}>
|
||||
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: '500' }}>
|
||||
Town/City *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={city}
|
||||
onChange={(e) => setCity(e.target.value)}
|
||||
placeholder="City"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '10px 12px',
|
||||
fontSize: '14px',
|
||||
border: '1px solid #E0E0E0',
|
||||
borderRadius: '4px',
|
||||
boxSizing: 'border-box'
|
||||
}}
|
||||
disabled={isLoading || !card}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ flex: '1' }}>
|
||||
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: '500' }}>
|
||||
Postcode *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={postalCode}
|
||||
onChange={(e) => setPostalCode(e.target.value.toUpperCase())}
|
||||
placeholder="SW1A 1AA"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '10px 12px',
|
||||
fontSize: '14px',
|
||||
border: '1px solid #E0E0E0',
|
||||
borderRadius: '4px',
|
||||
boxSizing: 'border-box'
|
||||
}}
|
||||
disabled={isLoading || !card}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card Details */}
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: '500' }}>
|
||||
Card Details *
|
||||
</label>
|
||||
<div
|
||||
id="card-container"
|
||||
style={{
|
||||
minHeight: '120px'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={handlePayment}
|
||||
disabled={isLoading || !card}
|
||||
style={{ width: '100%' }}
|
||||
disabled={isLoading || !card || isProcessing}
|
||||
style={{ width: '100%', padding: '12px' }}
|
||||
>
|
||||
{isLoading ? 'Processing...' : `Pay £${amount.toFixed(2)}`}
|
||||
{isProcessing ? 'Processing...' : `Pay £${amount.toFixed(2)}`}
|
||||
</button>
|
||||
|
||||
<div style={{ marginTop: '16px', fontSize: '12px', color: '#666', textAlign: 'center' }}>
|
||||
|
||||
Reference in New Issue
Block a user