How to tell which payment option is currently selected with Stripe PaymentElement React

Question

I would like to be able to tell which payment option is currently selected in the Stripe PaymentElement in React so I can dynamically update the displayed processing fees. The PaymentElement is fed a pre-made paymentIntent (which calculates the fees assuming a credit card). The PaymentElement is inside Elements (also provided by stripe) which takes a stripe promise and the clientSecret which is the payment intent. Inside Elements I also put my element for displaying price & fees. I'd like to dynamically update the shown price on the frontend, and then after submission recreate the payment intent if the payment method is not Card.

<Elements stripe={stripePromise} options={stripePaymentOptions}>
   <PaymentElement />
   <CustomElementConfirmOrder
     pricingData={pricingData}
   />
</Elements>

To be clear, below is a screenshot the PaymentElement I am talking about. It comes from the @stripe/react-stripe-js npm package. I current have Card and US bank account payment options available.

Answer 1

I figured it out. The PaymentElement has an onChange attribute which, among other things, will tell you the currently selected payment method.

Here's an example:

<Elements stripe={stripePromise} options={stripePaymentOptions}>
   <PaymentElement onChange={(e) => console.log("change event", e)} />
   <CustomElementConfirmOrder
     pricingData={pricingData}
   />
</Elements>

The console.log would produce something like this:

change event {elementType: 'payment', collapsed: false, empty: false, complete: false, value: {type: "card"}}