This PR is a first-pass at exposing flexibility in the payment input wrapper. I wrote this primarily to work with Formik better (reset the form, touch fields on submit etc.), however the functionality works with a default form as well.
Included is the functionality to:
specify initial values for the form to populate with
expose a reset function that, when called, resets the form to default errors, and in an un-touched state
provided an optional attribute that, when applied, will show form validation errors onBlur
Fixed:
original code looked for what field the user was navigating to. If the field was an input, it would not display the wrapper's error text. re-wrote this part to look specifically for the input fields associated with the lib. navigating to an input field not associated with the ui wrapper will properly display the errors.
open issues associated with this PR: #1 , #21 , #25
I also changed the position of when a field / form is being set as 'touched' to be after the calculation of that field's errors. This fixed an issue of determining if a field has errored onBlur.
Updated:
updated formik in dev dependencies in order to ensure story works in the latest version
Known Issues:
I noticed this issue while working on the initial values addition: useLayoutEffect won't format a default card value as it's intended. a given card number like: '4610500040003000' is only formatted with useLayoutEffect if the other useLayoutEffects are removed. Since those don't work, the work around is to add spaces to your initial values to avoid any issues.
This PR is a first-pass at exposing flexibility in the payment input wrapper. I wrote this primarily to work with Formik better (reset the form, touch fields on submit etc.), however the functionality works with a default form as well.
Included is the functionality to:
Fixed:
Updated:
Known Issues: