medipass / react-payment-inputs

A React Hook & Container to help with payment card input fields.
https://medipass.github.io/react-payment-inputs
342 stars 62 forks source link

meta.isTouched should omit zip field when not provided #43

Open ddluc opened 4 years ago

ddluc commented 4 years ago

Expected Behavior:

If no zip input is provided, it should be omitted from meta.touched and meta.isTouched.

Actual Behavior:

I setup react-payment-inputs as follows:

 const {
    getCardNumberProps,
    getExpiryDateProps,
    getCVCProps,
    wrapperProps, 
    getCardImageProps, 
    meta
  } = usePaymentInputs();

return (
  <>
     <PaymentInputsWrapper {...wrapperProps} styles={style}>
        <svg {...getCardImageProps({ images })} />
        <input {...getCardNumberProps()} />
        <input {...getExpiryDateProps()} />
        <input {...getCVCProps()} />
      </PaymentInputsWrapper>
      { meta.isTouched && meta.error && <span>Error: {meta.error}</span> } 
  </>
); 

For the life of me, I couldn't understand why the error was not rendering. However, upon further inspection I found the following:

meta.isTouched
==> {cardNumber: true, expiryDate: true, cvc: true, zip: false}

Since I'm not providing a zip field, it's never touched and meta.touched is always false, making it impossible to render the error message. It seems likely that I could be doing something wrong, but I couldn't find a solution to this in the docs or by searching through closed issues.

chris-maheu commented 3 years ago

If it helps anyone out, a workaround would be to replace meta.isTouched with the following:

(meta.touchedInputs.cardNumber && meta.erroredInputs.cardNumber) ||
(meta.touchedInputs.expiryDate && meta.erroredInputs.expiryDate) ||
(meta.touchedInputs.cvc && meta.erroredInputs.cvc)