PublicInvoicePayment.jsx

Go to the documentation of this file.

import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { loadStripe } from '@stripe/stripe-js';
import { Elements, PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';
import './PublicInvoicePayment.css';
 
/**
 * Public Invoice Payment Page
 * 
 * Allows customers to pay invoices via secure tokenized links without logging in.
 * Used for email-based invoice payments.
 * 
 * URL: /pay/:token
 * No authentication required - security via cryptographically secure payment tokens.
 */
 
function PaymentForm({ invoice, token, onSuccess, onError }) {
  const stripe = useStripe();
  const elements = useElements();
  const [processing, setProcessing] = useState(false);
 
  const handleSubmit = async (e) => {
    e.preventDefault();
 
    if (!stripe || !elements) {
      return;
    }
 
    setProcessing(true);
 
    try {
      // Confirm payment with Stripe
      const { error: submitError } = await elements.submit();
      if (submitError) {
        throw new Error(submitError.message);
      }
 
      const { error, paymentIntent } = await stripe.confirmPayment({
        elements,
        confirmParams: {
          return_url: `${window.location.origin}/pay/success`,
        },
        redirect: 'if_required',
      });
 
      if (error) {
        throw new Error(error.message);
      }
 
      if (paymentIntent && paymentIntent.status === 'succeeded') {
        // Confirm payment with backend
        const response = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'https://rmm-psa-backend-t9f7k.ondigitalocean.app/api'}/public/pay/${token}/confirm-payment`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ paymentIntentId: paymentIntent.id }),
        });
 
        if (!response.ok) {
          const data = await response.json();
          throw new Error(data.error || 'Failed to confirm payment');
        }
 
        onSuccess();
      }
    } catch (err) {
      console.error('Payment error:', err);
      onError(err.message);
      setProcessing(false);
    }
  };
 
  return (
    <form onSubmit={handleSubmit} className="payment-form">
      <PaymentElement />
      <button 
        type="submit" 
        disabled={!stripe || processing}
        className="submit-payment-btn"
      >
        {processing ? 'Processing...' : `Pay ${invoice.currency} $${parseFloat(invoice.total).toFixed(2)}`}
      </button>
    </form>
  );
}
 
export default function PublicInvoicePayment() {
  const { token } = useParams();
  const [invoice, setInvoice] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [clientSecret, setClientSecret] = useState('');
  const [publishableKey, setPublishableKey] = useState('');
  const [stripeAccount, setStripeAccount] = useState('');
  const [stripePromise, setStripePromise] = useState(null);
  const [paymentSuccess, setPaymentSuccess] = useState(false);
 
  useEffect(() => {
    // Fetch invoice details
    const fetchInvoice = async () => {
      try {
        const response = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'https://rmm-psa-backend-t9f7k.ondigitalocean.app/api'}/public/pay/${token}`);
        
        if (!response.ok) {
          const data = await response.json();
          if (data.alreadyPaid) {
            setError('This invoice has already been paid. Thank you!');
          } else {
            setError(data.error || 'Failed to load invoice');
          }
          setLoading(false);
          return;
        }
 
        const invoiceData = await response.json();
        setInvoice(invoiceData);
 
        if (!invoiceData.canPay) {
          setError('This invoice cannot be paid at this time');
          setLoading(false);
          return;
        }
 
        // Create payment intent
        const paymentResponse = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'https://rmm-psa-backend-t9f7k.ondigitalocean.app/api'}/public/pay/${token}/create-payment`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
        });
 
        if (!paymentResponse.ok) {
          const data = await paymentResponse.json();
          throw new Error(data.error || 'Failed to initialize payment');
        }
 
        const paymentData = await paymentResponse.json();
        setClientSecret(paymentData.clientSecret);
        setPublishableKey(paymentData.publishableKey);
        setStripeAccount(paymentData.stripeAccount);
 
        // Load Stripe
        const stripe = await loadStripe(paymentData.publishableKey, {
          stripeAccount: paymentData.stripeAccount,
        });
        setStripePromise(stripe);
        setLoading(false);
 
      } catch (err) {
        console.error('Error loading invoice:', err);
        setError(err.message || 'Failed to load payment page');
        setLoading(false);
      }
    };
 
    if (token) {
      fetchInvoice();
    }
  }, [token]);
 
  const handlePaymentSuccess = () => {
    setPaymentSuccess(true);
  };
 
  const handlePaymentError = (errorMessage) => {
    setError(errorMessage);
  };
 
  if (loading) {
    return (
      <div className="public-payment-page">
        <div className="payment-container">
          <div className="loading-spinner">
            <div className="spinner"></div>
            <p>Loading invoice...</p>
          </div>
        </div>
      </div>
    );
  }
 
  if (paymentSuccess) {
    return (
      <div className="public-payment-page">
        <div className="payment-container">
          <div className="success-message">
            <div className="success-icon">✓</div>
            <h1>Payment Successful!</h1>
            <p>Thank you for your payment.</p>
            <p className="invoice-ref">Invoice #{invoice.invoice_id}</p>
            <p className="amount-paid">
              Paid: {invoice.currency} ${parseFloat(invoice.total).toFixed(2)}
            </p>
            <p className="receipt-info">
              A receipt will be sent to your email shortly.
            </p>
          </div>
        </div>
      </div>
    );
  }
 
  if (error) {
    return (
      <div className="public-payment-page">
        <div className="payment-container">
          <div className="error-message">
            <h1>Unable to Process Payment</h1>
            <p>{error}</p>
          </div>
        </div>
      </div>
    );
  }
 
  return (
    <div className="public-payment-page">
      <div className="payment-container">
        <div className="invoice-summary">
          <h1>Invoice Payment</h1>
          <div className="invoice-details">
            <div className="detail-row">
              <span className="label">Invoice #:</span>
              <span className="value">{invoice.invoice_id}</span>
            </div>
            <div className="detail-row">
              <span className="label">Customer:</span>
              <span className="value">{invoice.customer_name}</span>
            </div>
            {invoice.description && (
              <div className="detail-row">
                <span className="label">Description:</span>
                <span className="value">{invoice.description}</span>
              </div>
            )}
          </div>
 
          {/* Line Items */}
          {invoice.items && invoice.items.length > 0 && (
            <div className="invoice-items">
              <h3>Items</h3>
              <table>
                <thead>
                  <tr>
                    <th>Description</th>
                    <th>Qty</th>
                    <th>Price</th>
                    <th>Total</th>
                  </tr>
                </thead>
                <tbody>
                  {invoice.items.map((item, idx) => (
                    <tr key={idx}>
                      <td>{item.description}</td>
                      <td>{item.quantity}</td>
                      <td>{invoice.currency} ${parseFloat(item.unit_price).toFixed(2)}</td>
                      <td>{invoice.currency} ${parseFloat(item.total).toFixed(2)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
 
          {/* Totals */}
          <div className="invoice-totals">
            <div className="total-row">
              <span>Subtotal (ex GST):</span>
              <span>{invoice.currency} ${parseFloat(invoice.subtotal || 0).toFixed(2)}</span>
            </div>
            <div className="total-row">
              <span>GST ({parseFloat(invoice.tax_rate || 10).toFixed(0)}%):</span>
              <span>{invoice.currency} ${parseFloat(invoice.tax_amount || 0).toFixed(2)}</span>
            </div>
            <div className="total-row total-amount">
              <span>TOTAL (inc GST):</span>
              <span>{invoice.currency} ${parseFloat(invoice.total).toFixed(2)}</span>
            </div>
          </div>
        </div>
 
        {/* Payment Form */}
        {clientSecret && stripePromise && (
          <div className="payment-section">
            <h2>Payment Details</h2>
            <Elements 
              stripe={stripePromise} 
              options={{ 
                clientSecret,
                appearance: {
                  theme: 'stripe',
                  variables: {
                    colorPrimary: '#2563eb',
                  },
                },
              }}
            >
              <PaymentForm 
                invoice={invoice} 
                token={token}
                onSuccess={handlePaymentSuccess}
                onError={handlePaymentError}
              />
            </Elements>
            <div className="secure-badge">
              🔒 Secure payment powered by Stripe
            </div>
          </div>
        )}
      </div>
    </div>
  );
}