handle full width input modes

stripe-archive/jquery.payment#172

Author: jondavidjohn

src/payform.coffee

@@ -171,6 +171,22 @@
 
   # Private
 
+  # Replace Full-Width Chars
+
+  replaceFullWidthChars = (str = '') ->
+    fullWidth = '\uff10\uff11\uff12\uff13\uff14\uff15\uff16\uff17\uff18\uff19'
+    halfWidth = '0123456789'
+
+    value = ''
+    chars = str.split('')
+
+    for char in chars
+      idx = fullWidth.indexOf(char)
+      char = halfWidth[idx] if idx > -1
+      value += char
+
+    value
+
   # Format Card Number
 
   reFormatCardNumber = (e) ->
@@ -287,7 +303,7 @@
 
   reFormatCVC = (e) ->
     cursor = _getCaretPos(e.target)
-    e.target.value = e.target.value.replace(/\D/g, '')[0...4]
+    e.target.value = replaceFullWidthChars(e.target.value).replace(/\D/g, '')[0...4]
     if cursor? and e.type isnt 'change'
       e.target.setSelectionRange(cursor, cursor)
 
@@ -459,6 +475,7 @@
     cardFromNumber(num)?.type or null
 
   payform.formatCardNumber = (num) ->
+    num = replaceFullWidthChars(num)
     num = num.replace(/\D/g, '')
     card = cardFromNumber(num)
     return num unless card
@@ -476,6 +493,7 @@
       groups.join(' ')
 
   payform.formatCardExpiry = (expiry) ->
+    expiry = replaceFullWidthChars(expiry)
     parts = expiry.match(/^\D*(\d{1,2})(\D+)?(\d{1,4})?/)
     return '' unless parts
 

test/formatCardExpiry_spec.coffee

@@ -8,3 +8,7 @@ describe 'payform', ->
 
     it 'should only allow numbers', ->
       assert payform.formatCardExpiry('1d'), '01 / '
+
+    it 'should format full-width expiry correctly',  ->
+      assert payform.formatCardExpiry('\uff10\uff18'), '08 /'
+      assert payform.formatCardNumber('\uff10\uff18\uff11\uff15'), '08 / 15'

test/formatCardNumber_spec.coffee

@@ -8,5 +8,10 @@ describe 'payform', ->
       assert payform.formatCardNumber('42424242'), '4242 4242'
       assert payform.formatCardNumber('4242424242'), '4242 4242 42'
       assert payform.formatCardNumber('4242424242424242'), '4242 4242 4242 4242'
+
     it 'should format amex cc number correctly', ->
       assert payform.formatCardNumber('37828'), '3782 8'
+
+    it 'should format full-width cc number correctly',  ->
+      assert payform.formatCardNumber('\uff14\uff12\uff14\uff12'), '4242'
+      assert payform.formatCardNumber('\uff14\uff12\uff14\uff12\uff14\uff12'), '4242 42'