How can I extract billing details from card element during button onClick? - reactjs

Question

We have the following function that runs when our stripe Start Subscription button is clicked:
const handleSubmit = async (ev) => {
setIsProcessing(true);
const cardElement = elements.getElement('card');
try {
// Grab Stripe Elements + Variables needed to post payment subscription
cardElement.update({ disabled: true });
const apiBaseUrl = config.url.API_URL;
const id = userData.user ? userData.user._id : null;
// Grab Billing (zip only) & Create Payment Method
const billingDetails = {
address: {
postal_code: ev.target.zip.value
}
};
const paymentMethodReq = await stripe.createPaymentMethod({
type: 'card',
card: cardElement,
billing_details: billingDetails
});
// Handle Creating Payment Subscription
if (paymentMethodReq.error) { ... return } // handle bad payment
const paymentObject = { id, paymentMethod: paymentMethodReq.paymentMethod.id }; // address
const response = await Axios.post(`${apiBaseUrl}/stripe/payment_subscriptions`, paymentObject);
setIsProcessing(false);
} catch (error) {
... handle error
}
};
and our subscribe button that calls the handleSubmit function
<button
className='stripe-button'
onClick={handleSubmit}
disabled={isProcessing || !stripe}
>
Start Subscription
</button>
From our understanding of the stripe docs - https://stripe.com/docs/api/payment_methods/object?lang=node - we need to pass billing_details into the createPaymentMethod function. However, handleSubmit throws an error because ev.target.zip is undefined. (I believe) since we are submitting via a button onClick (rather than a form onSubmit), that the ev.target does not have what we want. Here is the console.log for ev, ev.target and for our cardElement:
How can the billing details be extracted from the cardElement, from within the handleSubmit function, so that they can be passed to the createPaymentMethod function?