Easy-digital-downloads: Auto-format spaces in credit card number field.

[pderksen]

Because it improves checkout usability.

See http://baymard.com/blog/credit-card-field-auto-format-spaces

How about simply using https://github.com/stripe/jquery.payment and adding:

$('.card-number').payment('formatCardNumber');

I'm personally going to move to using the Stripe checkout overlay soon (which already does this), but this might be good for folks to have out of the box enabled for any credit card merchant.

[pderksen]

Related example using a jQuery trigger: #4148

[pippinsplugins]

I really like this idea.

[cferdinandi]

I'm currently using Cleave on my site to do this AND highlight the credit card type being used (example, the Visa card under accepted payment types changes color when a Visa card is entered).

[pippinsplugins]

We already highlight the card type used. Screenshot (ignore spacing):

[DevinWalker]

+1 for adding formatted CC spaces. I was surprised it wasn't already.

[DevinWalker]

For whoever is eager to get this working like myself, I've put together this quick snippet which uses jquery.payment.js from Stripe:

/**
 * Auto format EDD's CC fieldset.
 *
 * Note you must enqueue Stripe's jQuery Payment library
 *
 * Repo: https://github.com/stripe/jquery.payment
 * CDN: https://cdnjs.cloudflare.com/ajax/libs/jquery.payment/3.0.0/jquery.payment.min.js
 */
function edd_checkout_add_cc_formatting() {
?>
    <script>
        (function( $ ) {
          $(function() {
            // Trigger formatting function when gateway changes.
            $(document).on('edd_gateway_loaded', function ( e ) {
                var form            = $('#edd_purchase_form');
                var card_number = form.find('.card-number'),
                    card_cvc    = form.find('.card-cvc'),
                    card_expiry = form.find('.card-expiry');

                //Only validate if there is a card field
                if ( card_number.length && 'function' === typeof card_number.payment) {
                    card_number.payment('formatCardNumber');
                    card_cvc.payment('formatCardCVC');
                    card_expiry.payment('formatCardExpiry');
                }

            });

          });
        })(jQuery);

    </script>
    <?php
}
add_action( 'wp_footer', 'edd_checkout_add_cc_formatting' );

Now, we have pretty CC fields:

UX side note: I don't really like how the field borders turn red while the user is initially entering their CC number. This is distracting and implies there is already a CC error which could stall their input. I believe it would be best UX to only validate when the user focuses out.

[cferdinandi]

@DevinWalker This is great, dude! Thank you SO much for doing this. I can now remove another dependency from my stack. Cheers!

[DevinWalker]

No problem. Note: you still need to enqueue jquery.payment.js for the above to work.

[pippinsplugins]

Love it! We'll get this in really soon.

[sunnyratilal]

PR opened at #5908

[SDavisMedia]

This is working well for me. Very nice. :+1:

[DevinWalker]

Nice guys. Glad to see this making it in.

[cklosowski]

Found an issue with this. If Stripe is your only gateway, the JS never gets loaded to run the formatter.

It appears it's due to edd_gateway_loaded not getting triggered in the edd-ajax.js.

I'll see if I can fix it up.

[cklosowski]

Fixed.

Scenarios to test:
1) Stripe Only active
2) Stripe & another gateway active (w/ Stripe as the default)
3) Stripe & another gateway active (w/ other gateway as the default)