Credit card numbers formatting with javascript

#1

credit card number
“0000 0000 0000 0000”

when creating a credit card form by using text fields:
Is there a way to automatically add spaces every 4 digits the user is typing
by using javascript?

#2

It is, check the file – credit_card_input.rp (46.0 KB)

I just replaced spaces with “_” symbols to make them distinguishable in the actions.

P.S. It works only for typing, not for pasting.

#3

I need a solution where the user can correct his input by using the delete key as well. In your solution, if the user uses the delete key he will get stuck half way.

#4

credit_card_input_2.rp (54.7 KB)

now it works better

#5

Works just perfect! Thanks a lot! :star_struck:

#6

Hi there @adverico, I tried using your file to add spaces to my card input field but for some reason it isn’t working.

I have set up “Input card number” as a phone number field so that mobile can bring the num pad and have set the max length to 19. I thought maybe that is the problem but changing those to match your example didn’t work.

Not sure how to fix it :confused:

I hope you can help.

Thanks!

Payment-method_UK.rp (206.5 KB)