Non user friendly error message

When in test mode on Woopayments and going into My Account > Add Payment method and adding the info of card number ‘0000 0000 0000 0000’, any valid expiry, any security code, and any country – you get the error “Cannot destructure property ‘id’ of ‘undefined’ as it is undefined.”

Can this be made more user friendly?

From researching the error comes from in plugins/woocommerce-payments/dist/checkout.js, submitting the add-payment-method form does this (de-minified):

const result = await stripe.createPaymentMethod({ elements, params });

if (result.error) {
    // Save Stripe's error details as hidden inputs on the form
    appendErrorInputs(form, result.error);
} else {
    appendPaymentMethodInput(form, result.paymentMethod.id);
}

// ...but then carries on regardless of the error
await afterCreate(result.paymentMethod, form, api);   // paymentMethod is undefined

On the add-payment-method page, afterCreate is this function:

const wt = ({ id }, form, api) => api.setupIntent(id, ...)

When Stripe rejects the card, result.paymentMethod is undefined. Destructuring { id } from it throws a TypeError. The catch block then shows that raw JavaScript message (e.message) to the user.

At checkout, the same code works because the step after the error does nothing. The form submits, and the server turns the hidden error fields into a proper message. The add-payment-method page runs the setup intent step in the browser, so it crashes first. Stripe’s real, friendly message is sitting in a hidden #wcpay-payment-method-error-message input that nothing reads.