Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 25, 2022 at 1:52 am #1359342
    ivanglaser

    Hi
    The default credit card number field is a bit useless on mobile devices. When you enter the CC number, it overwrites the expiry and CVV fileds
    I found this code on the web which helps a lot but is still not great

    /* fix stripe cc/expiry/cvc field overlap on mobile */

    @media only screen and (max-width: 480px) {
    #add_payment_method #payment ul.payment_methods, .woocommerce-cart #payment ul.payment_methods, .woocommerce-checkout #payment ul.payment_methods {padding: 0 !important} /* remove padding from inner white field */

    #add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box {padding: 0 !important;width:100%} /* remove padding and increase width to 100% of the white field */

    #add_payment_method #payment div.payment_box::before, .woocommerce-cart #payment div.payment_box::before, .woocommerce-checkout #payment div.payment_box::before {display:none} /* this is to hide the top gray triangle arrow that points up */

    #add_payment_method #payment ul.payment_methods li, .woocommerce-cart #payment ul.payment_methods li, .woocommerce-checkout #payment ul.payment_methods li {text-align:center !important} /* align the credit card label */

    .wc-stripe-card-icons-container, .wc-stripe-paymentRequest-icons-container{float:none !important; display:block !important} /* remove float and change layout to block */

    }

    Do you have any code for a better implementation of the CC input fields ?

    Eg having separate fields for CC Number, Expiry Date and CVV code ?

    Makes a lot more sense and it’s how most gateways do it from what I can see

    Tx

    Ivan

    July 25, 2022 at 10:09 am #1359352
    Ismael

    Hey ivanglaser,

    Thank you for the inquiry.

    Are you using the default payment channels from the Woocommerce Payments plugin? Where can we check the issue? Please provide the site URL in the private field.

    Best regards,
    Ismael

    July 27, 2022 at 2:28 pm #1359555
    ivanglaser

    Hi
    Yes, I am using the default Woocommerce Payment plugin…..but I did add the code above as a fix.
    I will temporarily comment it out so you can see the problem.
    It’s mainly a problem on a mobile device and it’s because there is just a one row field for cc number, expiry date and CVV
    If you go to the URL below from a mobile device and add the image to cart then checkout, try enter CC numbers into the CC number field… you will see the problem
    Tx
    Ivan

    July 27, 2022 at 4:30 pm #1359568
    Rikard

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
#top #payment div.payment_box {
    width: 100%;
}

#top #payment ul.payment_methods li {
    padding: 20px 0;
}
}

    Best regards,
    Rikard

    July 28, 2022 at 12:10 am #1359624
    ivanglaser

    Hi

    Thanks, that works in much the same was as the other code I mentioned (see above) I found worked

    However my question is whether or not there is a way to have separate fields for CC number, expiry date and CVV number…. like you see on almost every other payment section you see on the web

    Problem with the way it is now is that it’s hard for a user to see the numbers they have input if there is a mistake

    Tx

    July 28, 2022 at 10:39 am #1359651
    Rikard

    Hi,

    Thanks for the update, I can’t see a way of having separate fields unfortunately. The form is imported via an iframe, so there’s not much we can do about its functionality. Maybe there are other payment plugins which would work better? If not, then I would advise that you ask this question on a WooCommerce help forum instead.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.