Insert dashes between every fourth credit card number digit

Hello! I am customizing the Pro Sites Stripe credit card form and would like to know how I can create my Credit Card Number input so that it inserts a dash or space automatically between every fourth digit when entered. How is this done? Thank you :slight_smile:

  • Kasia Swiderska
    • Support nomad

    Hello Rachel,

    You would need to change plugin code and add for input field pattern:

    <input type=text pattern="[0-9]{13,16}">

    See here https://css-tricks.com/forums/topic/html5-input-types-for-credit-card-numbers/ and here for specific patterns for credit card http://www.regular-expressions.info/creditcard.html
    Input for that is in file /wp-content/plugins/pro-sites/pro-sites-files/gateways/gateway-stripe.php in line 1854

    <td><input id="cc_number" type="text" class="cctext card-number" value="" size="23" /><br />

    Please remember to have a backup of that file before you start making any changes.

    Let me know if you have more questions.

    kind regards,
    Kasia

  • Rachel
    • Design Lord, Child of Thor

    Hi Kasia, So I found a way to do this but for some reason when the user submits their credit card info the Account Details page doesn't show up anymore, it just loads a blank page. I think what is going on is that when the dashes are put into the input using the script below, Stripe doesn't take into account that they are dashes so I think it processes an error but the account is still setup. For that reason, I believe that I need to find out a way in which Stripe won't take those dashes into account.

    document.querySelector('#cc_number').addEventListener('input', function (e) {
                        var cc_number = this.value.split("-").join("");
                        if (cc_number.length > 0) {
                            cc_number = cc_number.match(new RegExp('.{1,4}', 'g')).join("-");
                        }
                        this.value = cc_number;
                    });

    Let me know if I am wrong but do I need to remove literals from input mask after form submit? I found this article http://stackoverflow.com/questions/7854651/remove-literals-from-input-mask-after-form-submit on it but still am trying to figure out how this is implemented so that once the credit card info is submitted it will load the Account Details page and not a blank one. Thank you :slight_smile:

  • Kasia Swiderska
    • Support nomad

    Hello Rachel,

    For that reason, I believe that I need to find out a way in which Stripe won't take those dashes into account.

    No, dashes are not the problem - I just tested on my site and I inserted dashes typing them between digits and there was no problem with them. Payment was processed and site was upgraded.
    Could you show me what exact code you used?

    kind regards,
    Kasia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.