diff --git a/README.md b/README.md index 4d4b94a..ad9328a 100644 --- a/README.md +++ b/README.md @@ -327,6 +327,8 @@ Returns the props to apply to the **CVC** input. Returns the props to apply to the **ZIP** input. +Pass `allowCanada` as prop to `getZIPProps` to allow for letters used in Canadian postal codes. + **IMPORTANT:** You must place your event handlers (e.g. `onChange`, `onBlur`, etc) inside the `getZIPProps()` so the default event handlers in React Payment Inputs don't get overridden. ##### Example snippet diff --git a/src/usePaymentInputs.js b/src/usePaymentInputs.js index 8398b93..4ba0888 100644 --- a/src/usePaymentInputs.js +++ b/src/usePaymentInputs.js @@ -418,7 +418,7 @@ export default function usePaymentCard({ props.onKeyPress && props.onKeyPress(e); if (e.key !== utils.ENTER_KEY_CODE) { - if (!utils.validator.isNumeric(e)) { + if (!props.allowCanada && !utils.validator.isNumeric(e)) { e.preventDefault(); } } @@ -432,7 +432,7 @@ export default function usePaymentCard({ maxLength: '6', name: 'zip', placeholder: 'ZIP', - type: 'tel', + type: props.allowCanada ? 'text' : 'tel', [refKey || 'ref']: zipField, ...props, onBlur: handleBlurZIP(props),