Author Topic: Stripe not showing credit card form on mobile platform  (Read 2238 times)

Offline barry819

  • Newbie
  • *
  • Posts: 23
  • Karma: +2/-0
    • View Profile
Stripe not showing credit card form on mobile platform
« on: November 17, 2017, 11:41:17 PM »
Site: theresamatherfantasyshop.com

Everything is working OK on my desktop. But when I browse on my phone, when I get to the area on the payment page where I should be able to enter credit card information, the box is collapsed and you cannot enter any numbers into it. I've tried this on my LG phone using both the Chrome and Firefox browsers for Android. I am running Android 7.0

This is a significant problem as one of the attractive features of Abantecart is its adaptability to mobile use. I really need those browsing via phone to be able to pay!

Offline abantecart

  • Administrator
  • Hero Member
  • *****
  • Posts: 4139
  • Karma: +250/-9
    • View Profile
    • Ideal Open Source Ecommerce Solution
Re: Stripe not showing credit card form on mobile platform
« Reply #1 on: November 18, 2017, 10:02:52 AM »
Can you please share a screenshot of what you see and experience?
The part with "the box is collapsed " gets me confused.
We need your help to build better free open source eCommerce platform for everyone.
See how you can help

Offline barry819

  • Newbie
  • *
  • Posts: 23
  • Karma: +2/-0
    • View Profile
Re: Stripe not showing credit card form on mobile platform
« Reply #2 on: November 18, 2017, 10:58:09 AM »
Here is a screenshot. You should be able to see that the box for the credit card info is outlined, but it is 0 characters wide. I have tried to navigate to it and type in, but it will not accept any input.

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 149
  • Karma: +26/-3
    • View Profile
Re: Stripe not showing credit card form on mobile platform
« Reply #3 on: November 18, 2017, 11:25:24 AM »
Edit your style.css file, add this at the bottom:

Code: [Select]
#card-element.StripeElement {
    min-width: 280px;
}


Offline barry819

  • Newbie
  • *
  • Posts: 23
  • Karma: +2/-0
    • View Profile
Re: Stripe not showing credit card form on mobile platform
« Reply #4 on: November 18, 2017, 11:31:24 AM »
I didn't really know how to edit the css file, but I managed to figure it out. But I can't see that that made any difference, I'm still getting the same result.

Take a look on your phone and see if you see something different. I do think I've cleared all cache.
« Last Edit: November 18, 2017, 11:52:34 AM by barry819 »

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 149
  • Karma: +26/-3
    • View Profile
Re: Stripe not showing credit card form on mobile platform
« Reply #5 on: November 18, 2017, 12:12:00 PM »
Hi, I just checked, you have not successfully edited the style.css file that is running your page because I don't see the new rule when i refresh the page and then inspect it. 

If you are using a template clone to customize your site, you need to find style.css located in the root/extensions/templatename/storefront/view/templatename/stylesheet/ folder.  Edit that file to add the complete snippet above, (take care to include all parentheses), then save the file back to the same location on your live server, then clear browser cache.  It will work. 

If you are customizing the default AC template, the file you need to edit will be in root/storefront/view/default/ folder.  Use the same procedure. 

Once you succeed in editing and saving the proper css file, the Stripe box will be limited to a minimum 280px width, which will solve your problem.

FYI - if you are customizing a template clone, you are "doing everything right". 

If you are customizing the default template, then it is probable that your work will be lost during future software updates.  This is okay, don't panic.  Just make a note to never update AbanteCart.  If AbanteCart never develops a security problem with the version you are using, then an update will never be essential. 

You can learn about these concepts in the AC doc stack.  Once you become familiar with Developer Tools and Cloning a template, you can actually migrate your current site customizations to a new clone rather easily, and then be fully ready for future updates without losing your work.  Etc etc.  Have fun coming up the curve!  It won't happen in 1 weekend, so don't stress. 

Offline barry819

  • Newbie
  • *
  • Posts: 23
  • Karma: +2/-0
    • View Profile
Re: Stripe not showing credit card form on mobile platform
« Reply #6 on: November 18, 2017, 01:04:19 PM »
Thanks, my webhost built a clone and a couple of backups while we were dealing with a problem with SSL, and I must have edited the style.css file in one of the ones that isn't powering the site. I'm still not sure which of the 9 style.css files is the right one, so I edited them all, and the problem is fixed.

Geoffrey, can I run another one past you? When I browse to the site on Chrome, everything works fine. But when I browse via Firefox, it lands on a page where the cart buttons are disabled (something to do with SSL). If I click on a product and go to that product's page, I can add it to the cart, and then when I browse back to the main page the 'add to cart' buttons are enabled. Since everything works in Chrome I assume this is a Firefox idiosyncrasy, but do you know of a way to get around it? The same thing happens in both the Windows and Android versions of Firefox. Running Firefox 57.0 on windows 7 (64bit) and Android 7.0

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 149
  • Karma: +26/-3
    • View Profile
Re: Stripe not showing credit card form on mobile platform
« Reply #7 on: November 18, 2017, 01:55:53 PM »
I looked at your site in Firefox 56.0.2, didn't notice any obvious problems. 

I can't solve your new problem, but i can give you some suggestions for working in that direction.

1 - Housecleaning.  Your entire site is located within one folder on the live server.  FTP that folder down to a backup folder on your PC.  It may take a long time, like hours, because the folder will contain numerous small files, which slows the data rate.  Keep this backup folder intact and safe and unedited. 

Then figure out which "copy or version" of your site on the live server is actually the one driving your website.  Delete the other copies or versions from the live server.  You need to get to a point where the only files and folders on the live server are the ones that are running your site.  Get your host to help you.  If I understand you correctly, there may presently be multiple versions.  That won't help with SSL issues. 

If you break something, restore things from the backup folder on your PC until the site runs.  Keep notes as you clean up.

2 - Read the AC documentation on Developer Tools and cloning the default template.  I doubt that your host-created website clone is the same concept as an AC template clone used for customizations.  If you use AC Developer Tools to create an AC Template clone, you will see the clone in it's own folder within the root/extensions folder, and that folder will have a name that you chose (templatename), and it will contain a cluster of site folders within a /storefront/view/templatename/ hierarchy.  If you can't find this in your site files, then you don't have a template clone.  This is not relevant to your SSL problem, rather just an FYI.  If you study enough to understand my comment, you will begin to understand how AC works. 

3 - Structure.  You need to learn how the site runs from the server.  AC is an application.  There are a small handful of files on your server that tell the AC application how to start up and run.  After that, it just runs.  Study your htaccess file, see what is in it.  In particular, you need to understand the RewriteEngine family of commands that include RewriteCond, RewriteBase, RewriteRule, etc.  There will be several of these rules in htaccess, and the settings specified by these rules basically contribute to either smooth sailing or endless headaches. 

4 - Here is a cut-n-paste from my notes for initial live site setup:
c.   Rename the htaccess.txt file to .htaccess.i.   
ii.   The dot in front of “.htaccess” indicates that this file is ‘invisible’. Therefore you may have to configure your FTP application or hosting file manager to show invisible files in order to edit.  This .htaccess file on an Apache based web server allows you to configure settings for how you’d like your website, or certain files within your website, to behave.
d.   Edit the .htaccess file: if your store is not on the root, you have to configure the RewriteBase/ element to point at the subfolder that contains your store: change it to RewriteBase/subfoldername/  .  The ending slash is important. 
e.   AC Admin control panel - System>Settings>System:   
i.   Scroll to bottom, enable System Check for Admin and Storefront.  Then check the messages that will come up on Admin as you use it.  Resolve the messages.  Delete each after you resolve it. 
ii.   Turn on Retina.
iii.   Turn on SEO URL's
iv.   Note: these all require the mod-rewrite Apache module to be active and .htaccess.txt to be renamed to .htaccess and the RewriteBase/ to be properly configured.

If you read up on the terminology in the snippet 4 above, you should begin to understand what htaccess is doing, which is a step towards getting it set properly. 

My htaccess file includes the following rules that steer all traffic to https :
RewriteCond %{SERVER_PORT} 80
RewriteCond %{REQUEST_URI} !^/[0-9]+\..+\.cpaneldcv$
RewriteCond %{REQUEST_URI} !^/\.well-known/acme-challenge/[0-9a-zA-Z_-]+$
RewriteCond %{REQUEST_URI} !^/\.well-known/pki-validation/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
RewriteRule ^(.*)$ https://www.yoursitenamegoeshere.com/$1 [R=301,L]

If you aren't set up properly in this fashion, that will be the first place that SSL problems start. 

If you get htaccess "right", then your host is going to be the one to help you resolve remianing ssl probs.

Good luck.  I was almost as much a noob as you when i started.  It took me months to sort this stuff out.  There are no shortcuts or quick fixes, other than cash.  If you want a super quick and dead-right fix, contact the AC devs and ask to them to do a contract job to clean this up.  I would imagine they could fix everything for less than the cost of a weekend's entertainment. 

Offline barry819

  • Newbie
  • *
  • Posts: 23
  • Karma: +2/-0
    • View Profile
Re: Stripe not showing credit card form on mobile platform
« Reply #8 on: November 18, 2017, 02:19:14 PM »
I'll talk to the host first about cleaning up all the extraneous stuff, and see where that gets me. To be honest, I really don't care to learn how all this stuff works, I just want it to work!  This started when my Stripe extension stopped working right, after the last 'update' to AbanteCart, which was what necessitated adding SSL. It all worked fine without SSL until just over a week ago. Wish I hadn't updated.

But let me make sure I understand what you're saying. If you clear your cache in Firefox 56.0.2 and go to theresamatherfantasyshop.com, on the page where you land if you go to a product the "add to cart" button is active? (Mine appear, but they have a different symbol than the shopping cart, and pushing them doesn't do anything.) If in fact you're getting those as you should, maybe what I really need to do is wait for Firefox 57.0.1
« Last Edit: November 18, 2017, 02:20:50 PM by barry819 »

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 4027
  • Karma: +201/-0
    • View Profile
Re: Stripe not showing credit card form on mobile platform
« Reply #9 on: November 20, 2017, 12:43:06 AM »
Hi.
Issue is confirmed and reported to GitHub tracker https://github.com/abantecart/abantecart-src/issues/1024
“Chuck Norris is so amazing.”
― Mother Teresa

Offline abolabo

  • core-developer
  • Administrator
  • Hero Member
  • *****
  • Posts: 1768
  • Karma: +246/-11
  • web for all, all for web!
    • View Profile
    • AbanteCart
“No one is useless in this world who lightens the burdens of another.”
― Charles Dickens

Offline barry819

  • Newbie
  • *
  • Posts: 23
  • Karma: +2/-0
    • View Profile
Re: Stripe not showing credit card form on mobile platform
« Reply #11 on: November 20, 2017, 02:23:43 PM »
The edit that Geoffrey suggested way up near the top fixed the issue for me, once I got it into the right style.css file:

#card-element.StripeElement {
    min-width: 280px;
}

May I suggest that this is a significant enough problem that the fix should be offered as a full update to the Stripe extension, and not just as an edit available on Github? Disabled mobile payments are a big deal. Make it easy for those installing the extension to not have to research this fix.

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 149
  • Karma: +26/-3
    • View Profile
Re: Stripe not showing credit card form on mobile platform
« Reply #12 on: November 20, 2017, 02:32:41 PM »
Hi Barry.

1 - as you can see, the AC devs addressed the mobile Stripe collapsed credit card entry box problem that you identified.  I sympathize with your latest sentiment.  I'm not 100% sure how something like this gets disseminated to existing AC Stripe users; guess I never thought about it until now.   

2 - I don't use firefox much.  Today, it auto-updated when I turned it on.  I'm now on latest version 57.0.  I confirm that on first visit to your homepage, your cart buttons on each product show the wrong icon and do not work.  I confirm that navigating anywhere on your site then returning to homepage, the cart buttons then work as expected.  I cannot say for sure whether this was occurring 2 days ago when i was on vs 56.  Sorry, I wrote my previous reply in a hurry and did not notice.

I can't offer much more help.  If I were you, I'd start with the housecleaning, then ask your host if they think SSL issues are related to odd FF performance, then ask AC devs.  Good luck.

Offline barry819

  • Newbie
  • *
  • Posts: 23
  • Karma: +2/-0
    • View Profile
Re: Stripe not showing credit card form on mobile platform
« Reply #13 on: November 20, 2017, 05:44:58 PM »
Geoffrey,

Thanks. I'm trying to get my host to help me set things up so that the domain always automatically forwards to https://theresamatherfantasyshop.com/dir/ instead of to the unsecure http://theresamatherfantasyshop.com . I think that would move users past whatever the browser problem is.

I don't use Firefox all that much either any more. I wouldn't even have known about the problem if someone trying to buy something hadn't contacted me.

FWIW, it all seems to have started with changes to security protocol in AbanteCart 1.2.11. I'd used .9 and .10 without problems, and without an SSL certificate. Once I did the .11 update, it all became a real mess. I have made a note to be very certain to make a full backup before doing any update at all in the future!
« Last Edit: November 20, 2017, 06:00:58 PM by barry819 »

Offline barry819

  • Newbie
  • *
  • Posts: 23
  • Karma: +2/-0
    • View Profile
Re: Stripe not showing credit card form on mobile platform
« Reply #14 on: November 20, 2017, 06:25:05 PM »
Just for the record, for all the AC folks here: my host did manage to fix the SSL problem by adding some code:

"The issue with pictures which was showed on screen-shot is related to No 'Access-Control-Allow-Origin' header.

So I have added following code in your /home/shortfor/public_html/TheresaMatherFantasyShop.com/.htaccess file in order to resolve this issue :

###


Header set Access-Control-Allow-Origin "*"


###


« Last Edit: November 20, 2017, 06:32:40 PM by barry819 »

 

Powered by SMFPacks Social Login Mod