Multiple shipping options revalidation issue

  • Damon Cook

    (@colorful-tones)


    5 years, 2 months ago

    If the WooCommerce instance has multiple shipping options (even just enabling Woo’s default Free Shipping and Flat Rate for testing) and user toggles back and forth between Shipping Methods then the Card Number field is updated. However, there is no indications that the Card Number field is updated and user can not submit to check out, but has no idea why.

    I’ve reduced the test case to using TwentyTwenty theme on latest WordPress with just Free Shipping and Flat Rate shipping enabled (disabled our typical WooCommerce UPS Shipping plugin for good measure) and the issue still exists.

    Steps to recreate the issue:

    1. Visit https://bioclearmatrix.com and add product to cart.
    2. Proceed to /checkout/
    3. Fill out Shipping Address in order to AJAX in Shipping options (once detected that valid shipping address is entered)
    4. Fill out Payment fields with valid credit card info.
    5. Toggle to a different shipping option in Shipping Options

    You will see that the credit card icon (right-hand side of Card Number) field goes from Visa, Mastercard or whatever was used, to a gray icon. User can not submit for checkout at this point, unless they’re clever and know that they need to re-enter their credit card number again. (please see screenshots)

    https://www.dropbox.com/s/6yp1vwcf6glwnyr/Screenshot%202020-01-21%2013.45.10.png?dl=0

    https://www.dropbox.com/s/f1prkpzgj1kffwy/Screenshot%202020-01-21%2013.45.23.png?dl=0

    I’ve done some initial debugging and found that if I edit WooCommerce’s checkout.js and remove the class selector for .woocommerce-checkout-payment on Line 346 then everything works fine. Not sure if CardConnect is not handling the update properly, or if there needs to be an additional condition for CardConnect to check?

    https://github.com/woocommerce/woocommerce/blob/master/assets/js/frontend/checkout.js#L346

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Damon Cook

    (@colorful-tones)

    It seems that two additional classes are added to the #card_connect-card-number field when it has valid credit card number, e.g. mastercard identified. However, once the user chooses a different shipping method the payment form revalidates/refreshes and those classes are removed.

    Before:
    <input id="card_connect-card-number" class="input-text wc-credit-card-form-card-number validate-required mastercard identified" type="text" maxlength="20" autocomplete="off" placeholder="???? ???? ???? ????">

    After:
    <input id="card_connect-card-number" class="input-text wc-credit-card-form-card-number validate-required" type="text" maxlength="20" autocomplete="off" placeholder="???? ???? ???? ????">

    Thread Starter Damon Cook

    (@colorful-tones)

    I wish there was a pre-transpiled copy of this plugin’s javascript/dist/cardconnect.js available somewhere. Also, wish there was a Github mirror: https://github.com/CardConnect

    Plugin Author RexAK

    (@rexak)

    Hi @colorful-tones ,

    Thanks for reaching out with this info. We can look into this, and see if we can get it on a roadmap for development and debugging. I can’t promise dates or times, but it has been noted.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Multiple shipping options revalidation issue’ is closed to new replies.