Payment Info

Inspired by Square Wallet

Download .zip Download .tar.gz View on GitHub

Notes

  • Right now, the two-digit year only allows for 12-29. Which is fine, but there's no support for automatically updating this when the year changes. We would have to update the mask manually. Might be better to leave it alone and allow server/client validation to handle this case in production.
  • Auto-focus only works on the Desktop and stand-alone webapps. iOS won't allow auto-focus within Safari. However, auto-focus in an iOS stand-alone webapp will feel jumpy due to iOS trying to hide the keyboard only to have it reappear. No way to just leave the keyboard up while auto-focusing.

Refinements

  • Maybe: Support Canadian postal code formats like "T2X1V4".
  • Pending: If a number is not allowed via the mask, then shake the field a bit to indicate something is wrong. Will need to submit a request to the inputmask project for an event hook.
  • See how graceful the degradation will go.
  • Make all the images into a sprite to reduce HTTP requests.