Get Cards by User

import { useState, useEffect } from 'react';

function PaymentMethods({ customerId }) {
  const [cards, setCards] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchCards() {
      try {
        const response = await fetch(`https://your-api.com/api/cards/${customerId}`);
        const data = await response.json();
        
        if (data.status) {
          setCards(data.data);
        }
      } catch (error) {
        console.error('Error fetching cards:', error);
      } finally {
        setLoading(false);
      }
    }

    fetchCards();
  }, [customerId]);

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      <h2>Saved Payment Methods</h2>
      {cards.length === 0 ? (
        <p>No cards on file</p>
      ) : (
        <ul>
          {cards.map(card => (
            <li key={card.id}>
              {card.brand} ending in {card.last4}
              <br />
              Expires {card.exp_month}/{card.exp_year}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}