PayInvoiceModal.jsx

Go to the documentation of this file.

import { useState, useEffect, useMemo } from 'react';
import { loadStripe } from '@stripe/stripe-js';
import { Elements, PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';
import { apiFetch } from '../lib/api';
import './PayInvoiceModal.css';
 
// Payment form component
function PaymentForm({ invoice, onSuccess, onCancel }) {
  const stripe = useStripe();
  const elements = useElements();
  const [processing, setProcessing] = useState(false);
  const [error, setError] = useState(null);
 
  const handleSubmit = async (e) => {
    e.preventDefault();
 
    if (!stripe || !elements) {
      setError('Payment form not ready. Please wait...');
      return;
    }
 
    setProcessing(true);
    setError(null);
 
    try {
      // Confirm payment
      const { error: stripeError, paymentIntent } = await stripe.confirmPayment({
        elements,
        confirmParams: {
          return_url: `${window.location.origin}/invoices`,
        },
        redirect: 'if_required',
      });
 
      if (stripeError) {
        setError(stripeError.message);
        setProcessing(false);
        return;
      }
 
      if (paymentIntent && paymentIntent.status === 'succeeded') {
        // Confirm payment on backend
        const token = localStorage.getItem('token');
        const response = await apiFetch(`/invoices/${invoice.invoice_id}/confirm-payment`, {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${token}`,
            '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) {
      setError(err.message || 'Payment failed');
      setProcessing(false);
    }
  };
 
  return (
    <form onSubmit={handleSubmit} className="payment-form">
      <div className="invoice-summary">
        <h3>Invoice #{invoice.invoice_id}</h3>
        <p>{invoice.description || 'Payment for invoice'}</p>
        <div className="amount-display">
          <span className="label">Amount Due:</span>
          <span className="amount">${parseFloat(invoice.total || invoice.amount || 0).toFixed(2)}</span>
        </div>
      </div>
 
      <div className="payment-element-container">
        <PaymentElement />
      </div>
 
      {error && <div className="error-message">{error}</div>}
 
      <div className="modal-actions">
        <button 
          type="button" 
          onClick={onCancel} 
          className="btn btn-secondary"
          disabled={processing}
        >
          Cancel
        </button>
        <button 
          type="submit" 
          className="btn btn-primary"
          disabled={!stripe || !elements || processing}
        >
          {processing ? 'Processing...' : `Pay $${parseFloat(invoice.total || invoice.amount || 0).toFixed(2)}`}
        </button>
      </div>
    </form>
  );
}
 
// Main modal component
export default function PayInvoiceModal({ invoice, onClose, onSuccess }) {
  const [clientSecret, setClientSecret] = useState(null);
  const [publishableKey, setPublishableKey] = useState(null);
  const [stripeAccount, setStripeAccount] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  // Load payment intent when modal opens
  useEffect(() => {
    async function createPaymentIntent() {
      try {
        const token = localStorage.getItem('token');
        const response = await apiFetch(`/invoices/${invoice.invoice_id}/create-payment-intent`, {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${token}`,
          },
        });
 
        if (!response.ok) {
          const data = await response.json();
          throw new Error(data.error || 'Failed to initialize payment');
        }
 
        const data = await response.json();
        setPublishableKey(data.publishableKey);
        setStripeAccount(data.stripeAccount);
        setClientSecret(data.clientSecret);
        setLoading(false);
      } catch (err) {
        setError(err.message);
        setLoading(false);
      }
    }
 
    createPaymentIntent();
  }, [invoice.invoice_id]);
 
  // Only render Elements when we have the necessary data
  if (loading) {
    return (
      <div className="modal-overlay" onClick={onClose}>
        <div className="modal-content pay-invoice-modal" onClick={(e) => e.stopPropagation()}>
          <div className="modal-header">
            <h2>Pay Invoice</h2>
            <button className="close-btn" onClick={onClose}>
              <span className="material-symbols-outlined">close</span>
            </button>
          </div>
          <div className="modal-body">
            <div className="loading-state">
              <div className="spinner"></div>
              <p>Loading payment form...</p>
            </div>
          </div>
        </div>
      </div>
    );
  }
 
  if (error) {
    return (
      <div className="modal-overlay" onClick={onClose}>
        <div className="modal-content pay-invoice-modal" onClick={(e) => e.stopPropagation()}>
          <div className="modal-header">
            <h2>Pay Invoice</h2>
            <button className="close-btn" onClick={onClose}>
              <span className="material-symbols-outlined">close</span>
            </button>
          </div>
          <div className="modal-body">
            <div className="error-state">
              <span className="material-symbols-outlined">error</span>
              <p>{error}</p>
              <button className="btn btn-secondary" onClick={onClose}>Close</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
 
  // Create stripe promise with connected account (this will be cached)
  const stripePromise = loadStripe(publishableKey, {
    stripeAccount: stripeAccount, // Pass connected account ID
  });
 
  const options = {
    clientSecret,
    appearance: {
      theme: 'stripe',
      variables: {
        colorPrimary: '#3b82f6',
      },
    },
  };
 
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content pay-invoice-modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h2>Pay Invoice</h2>
          <button className="close-btn" onClick={onClose}>
            <span className="material-symbols-outlined">close</span>
          </button>
        </div>
 
        <div className="modal-body">
          {clientSecret && publishableKey && stripeAccount && (
            <Elements stripe={stripePromise} options={options}>
              <PaymentForm 
                invoice={invoice}
                onSuccess={() => {
                  onSuccess();
                  onClose();
                }}
                onCancel={onClose}
              />
            </Elements>
          )}
        </div>
      </div>
    </div>
  );
}