Comprehensive comparison for Framework technology in Web Development applications

// React Component for Dwolla Payment Integration with Dwolla UI
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const DwollaPaymentForm = ({ customerId, amount, onPaymentSuccess, onPaymentError }) => {
  const [dwollaToken, setDwollaToken] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [fundingSources, setFundingSources] = useState([]);

  // Initialize Dwolla and fetch client token from backend
  useEffect(() => {
    const initializeDwolla = async () => {
      try {
        // Fetch client token from your backend
        const response = await axios.post('/api/dwolla/client-token', {
          customerId: customerId
        });
        
        setDwollaToken(response.data.token);
        
        // Initialize Dwolla UI with the token
        if (window.dwolla) {
          window.dwolla.configure({
            environment: process.env.REACT_APP_DWOLLA_ENV || 'sandbox',
            token: response.data.token,
            styles: '/dwolla-styles.css'
          });
        }
      } catch (err) {
        setError('Failed to initialize payment system');
        console.error('Dwolla initialization error:', err);
      }
    };

    initializeDwolla();
  }, [customerId]);

  // Load existing funding sources
  useEffect(() => {
    const loadFundingSources = async () => {
      if (!dwollaToken) return;
      
      try {
        const response = await axios.get(`/api/dwolla/customers/${customerId}/funding-sources`);
        setFundingSources(response.data.fundingSources || []);
      } catch (err) {
        console.error('Error loading funding sources:', err);
      }
    };

    loadFundingSources();
  }, [dwollaToken, customerId]);

  // Handle bank account addition using Dwolla UI
  const handleAddBankAccount = () => {
    if (!window.dwolla) {
      setError('Payment system not initialized');
      return;
    }

    window.dwolla.iav.start(dwollaToken, {
      container: 'iav-container',
      stylesheets: [
        'https://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext'
      ],
      microDeposits: false,
      fallbackToMicroDeposits: true,
      backButton: true,
      subscriber: ({ currentPage, error }) => {
        console.log('IAV current page:', currentPage);
        
        if (error) {
          setError(`Bank verification error: ${error.message}`);
          onPaymentError && onPaymentError(error);
        }
      }
    }, (err, res) => {
      if (err) {
        setError('Failed to add bank account');
        console.error('IAV error:', err);
        return;
      }
      
      // Successfully added funding source
      setFundingSources([...fundingSources, res]);
    });
  };

  // Process payment with selected funding source
  const handlePayment = async (fundingSourceId) => {
    setLoading(true);
    setError(null);

    try {
      // Create transfer on backend
      const response = await axios.post('/api/dwolla/transfers', {
        customerId: customerId,
        sourceFundingSourceId: fundingSourceId,
        amount: {
          value: amount.toString(),
          currency: 'USD'
        },
        metadata: {
          orderId: `ORDER-${Date.now()}`,
          timestamp: new Date().toISOString()
        }
      });

      if (response.data.status === 'processed' || response.data.status === 'pending') {
        onPaymentSuccess && onPaymentSuccess(response.data);
      } else {
        throw new Error('Payment processing failed');
      }
    } catch (err) {
      const errorMessage = err.response?.data?.message || 'Payment failed';
      setError(errorMessage);
      onPaymentError && onPaymentError(err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="dwolla-payment-container">
      <h2>Payment Information</h2>
      
      {error && (
        <div className="error-message" role="alert">
          {error}
        </div>
      )}

      <div className="amount-display">
        <strong>Amount to Pay:</strong> ${parseFloat(amount).toFixed(2)}
      </div>

      {fundingSources.length > 0 ? (
        <div className="funding-sources">
          <h3>Select Payment Method</h3>
          {fundingSources.map((source) => (
            <button
              key={source.id}
              onClick={() => handlePayment(source.id)}
              disabled={loading}
              className="funding-source-btn"
            >
              {source.name} - {source.bankName}
            </button>
          ))}
        </div>
      ) : null}

      <button
        onClick={handleAddBankAccount}
        disabled={loading || !dwollaToken}
        className="add-bank-btn"
      >
        Add New Bank Account
      </button>

      <div id="iav-container" style={{ minHeight: '400px' }}></div>

      {loading && <div className="loading-spinner">Processing payment...</div>}
    </div>
  );
};

export default DwollaPaymentForm;