Mobile Layout Fix for Stripe Checkout on WordPress (Auto-fill ZIP Code Bug)
Budget: $30 – $250 USD
I have a problem with the shopping cart for my digital products.
I've been using the Accept Stripe Payments (ASP), plugin to connect to my Stripe account. On desktop, everything is OK. But on mobile, if you use, for example, Apple's auto-fill feature to enter the credit card info, the ZIP/Postal code field is offscreen to the right. (If you enter the info manually, then the ZIP field slides into view from the right.) Since some of my customers may use Auto-fill, I need to fix this.
If there were a way to stack the fields (Card#, expiry, CVC, ZIP), then that would solve it; but I don't see any way to do that.
(I'm currently using WordPress 6.9.4, PHP 8.3.30, Elementor Pro 4.1.1)
I've added a couple products directly in my Stripe account, and I think I entered the fulfillment URL as well, but either I did it wrong or it doesn't work. If I could get that to work (and without the auto-fill ZIP issue, above), and if I could learn how to make it work consistently and easily, then that could be a solution. But I'd much rather do it with a plugin like ASP.
If you go to this link on a mobile phone and click Buy Now, you'll get to a payment window where the problem exists:
https://davesguitarplanet.com/isnt-she-lovely/
I'm not interested in a heavyweight plugin like WooCommerce. I'm not stuck on ASP, but I'd like a lightweight plugin that's free, stable and easy to use.
Yes, I've asked the 3 main AIs for a solution, but without success.
Can you fix this? How soon and for how much? Of course I will grant the person I choose access to my site's backend and Stripe account (developer mode).
PS—
This is a guitar lesson site. I'm mainly a guitarist, but was savvy enough to build the site, first in HTML, then convert it to WP. But I'm nowhere near an expert at web design. AIs have mentioned there may be issues with conflicting CSS or needing to transition to Stripes' new payment system; iframe issues, etc. I'm now tired and confused and just want it solved so I can move on.
Thanks,
Dave P. in Seattle
I've been using the Accept Stripe Payments (ASP), plugin to connect to my Stripe account. On desktop, everything is OK. But on mobile, if you use, for example, Apple's auto-fill feature to enter the credit card info, the ZIP/Postal code field is offscreen to the right. (If you enter the info manually, then the ZIP field slides into view from the right.) Since some of my customers may use Auto-fill, I need to fix this.
If there were a way to stack the fields (Card#, expiry, CVC, ZIP), then that would solve it; but I don't see any way to do that.
(I'm currently using WordPress 6.9.4, PHP 8.3.30, Elementor Pro 4.1.1)
I've added a couple products directly in my Stripe account, and I think I entered the fulfillment URL as well, but either I did it wrong or it doesn't work. If I could get that to work (and without the auto-fill ZIP issue, above), and if I could learn how to make it work consistently and easily, then that could be a solution. But I'd much rather do it with a plugin like ASP.
If you go to this link on a mobile phone and click Buy Now, you'll get to a payment window where the problem exists:
https://davesguitarplanet.com/isnt-she-lovely/
I'm not interested in a heavyweight plugin like WooCommerce. I'm not stuck on ASP, but I'd like a lightweight plugin that's free, stable and easy to use.
Yes, I've asked the 3 main AIs for a solution, but without success.
Can you fix this? How soon and for how much? Of course I will grant the person I choose access to my site's backend and Stripe account (developer mode).
PS—
This is a guitar lesson site. I'm mainly a guitarist, but was savvy enough to build the site, first in HTML, then convert it to WP. But I'm nowhere near an expert at web design. AIs have mentioned there may be issues with conflicting CSS or needing to transition to Stripes' new payment system; iframe issues, etc. I'm now tired and confused and just want it solved so I can move on.
Thanks,
Dave P. in Seattle
Related categories:
PHP
JavaScript
WordPress
CSS
HTML
Stripe
Web Development
Payment Gateway Integration
Elementor
Web Design