Issue with Retrieving the Full Name in Stripe Checkout Modal
I am trying to retrieve the value of the full name field in the Stripe Checkout modal so that I can include it in the email I send after payment. However, the fullName is coming through as undefined in the email. I attempted to retrieve it using elements.getElement(‘payment’).getValue(), but that didn’t work. I also tried removing the field and adjusting the CSS, but the issue persists.

Below is my React component for handling Stripe payments and sending emails:

import React, { useState, useEffect } from 'react';
import { useStripe, useElements, Elements, PaymentElement } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import { useLocation } from 'react-router-dom';

const stripePromise = loadStripe('your-publishable-key-here');

const sendEmail = async (paymentIntentId, email, fullName) => {
  try {
    const response = await fetch('http://localhost:5000/send-email', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ paymentIntentId, email, fullName }),
    });
    const data = await response.json();
    if (data.success) {
      console.log('Email sent successfully');
    } else {
      console.error('Failed to send email');
    }
  } catch (error) {
    console.error('Error sending email:', error);
  }
};

const CheckoutForm = ({ clientSecret, email }) => {
  const stripe = useStripe();
  const elements = useElements();
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (event) => {
    event.preventDefault();

    if (!stripe || !elements) {
      return;
    }

    try {
      setLoading(true);
      const { error, paymentIntent } = await stripe.confirmPayment({
        elements,
        confirmParams: {
          return_url: window.location.href,
        },
      });

      if (error) {
        console.error('Payment Error:', error);
        alert('Payment failed! Please try again.');
      } else if (paymentIntent && paymentIntent.status === 'succeeded') {
        console.log('Payment Intent:', paymentIntent);
        alert('Payment successful!');
        
        // Retrieve full name from the payment element
        const { error: elementsError, value: { name } } = await elements.getElement('payment').getValue();
        
        if (elementsError) {
          console.error('Error retrieving name:', elementsError);
        } else {
          await sendEmail(paymentIntent.id, email, name);
        }
      }
    } catch (error) {
      console.error('Error in handleSubmit:', error);
      alert('An error occurred. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <label className="block text-lg font-medium mb-2">Payment Information</label>
        <PaymentElement options={{
          fields: {
            billingDetails: {
              name: 'auto',
            },
          },
        }} />
      </div>
      <button
        type="submit"
        className="w-full py-3 bg-red-600 text-white font-semibold rounded-lg hover:bg-red-700 transition duration-300"
        disabled={loading || !clientSecret}
      >
        {loading ? 'Processing...' : 'Pay Now with iDEAL'}
      </button>
    </form>
  );
};

const Checkout = () => {
  const [clientSecret, setClientSecret] = useState('');
  const location = useLocation();
  const state = location.state || {};

  const { individualCount = 0, familyCount = 0, totalCost = 0, email = '' } = state;

  useEffect(() => {
    const fetchClientSecret = async () => {
      if (totalCost === 0) {
        console.error("Total cost is zero or undefined.");
        return;
      }

      const response = await fetch('http://localhost:5000/create-payment-intent', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          amount: totalCost * 100, // amount in cents
          individualCount,
          familyCount,
          totalCost,
          email,
        }),
      });

      const data = await response.json();
      setClientSecret(data.clientSecret);
    };

    fetchClientSecret();
  }, [individualCount, familyCount, totalCost, email]);

  return (
    <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <h1 className="text-4xl font-bold text-center mb-8 text-gray-900">Checkout</h1>
      <div className="mb-8 text-center">
        <h2 className="text-3xl font-semibold mb-4">Total Cost</h2>
        <p className="text-4xl font-bold text-red-600">€{(totalCost || 0).toFixed(2)}</p>
      </div>
      {clientSecret && (
        <Elements stripe={stripePromise} options={{ clientSecret }}>
          <CheckoutForm clientSecret={clientSecret} email={email} />
        </Elements>
      )}
    </div>
  );
};

export default Checkout;