FishandField Posted January 31, 2019 Share Posted January 31, 2019 Hello all, first time creating a e-commerce site and I'm new to the whole web design thing too but I've been building www.fishingandfieldsports.co.uk and I'm relatively happy with where I'm at now in terms of design however when I've tried to setup Stripe to take payments I cant seem to get the payment screen itself to display properly the fields are mangled into one, can anyone point me in the right direction? I'm currently using a modified version of the e-trend blue skin, I've tried this with the custom foundation skin too and it seemed to work okay but I can't style that skin how I would like too so any assistance would be greatly appreciated :) Link to comment Share on other sites More sharing options...
bsmither Posted January 31, 2019 Share Posted January 31, 2019 Welcome FishandField! Glad to see you made it to the forums. I'll be back shortly with some suggestions. In the meantime, please review this: https://forums.cubecart.com/topic/54543-credit-card-form/ Link to comment Share on other sites More sharing options...
FishandField Posted January 31, 2019 Author Share Posted January 31, 2019 Hello bsmither thanks for the welcome and quick reply, I had a look at the link you posted, very useful my HTML and CSS knowledge is limited but by changing float: left; to float: center, with the dev tools on chrome I've achieved a better result, Any issues with doing it like this? and also, is it possible to add a header above the expiry and CVV fields like the card number field? *EDIT* just tried this on the live site and it screws the footer up aligning everything down the left column so i guess its a global value? Link to comment Share on other sites More sharing options...
bsmither Posted February 1, 2019 Share Posted February 1, 2019 Since the Stripe 2 series is meant for CC6 (templates expecting to be compatible with Foundation), Stripe 1 series is meant for CC5, and e-Trend has its own responsiveness CSS rules (not compatible with Foundation), there is an inherent "lack of communication". We need to make the Stripe 2 template compatible with e-Trend's responsive CSS rules. Try this: In the template /modules/gateway/Stripe/skin/form.php, near line 2, find: <div class="medium-6 medium-push-3 small-12 columns"> Change to: <div class="u4"> The u4 is e-Trends equivalent of 33% width of the parent container. Have CubeCart clear its internal cache. Also, be aware that the text entry fields that the Stripe code builds (Stripe provides this via javasacript and iframe) is very non-descript. One can have a border around those fields by adding this CSS rule to the very bottom of common.css: .CardField-child { border: 1px solid black; } You will need to force your browser to reload page resources (usually CTRL-F5) so that the browser gets a fresh copy of common.css. To follow-up what you did: There is no float:center. The yellow warning is an indicator that center is an invalid value for float. So, no float at all for rows - which is a global effect. Link to comment Share on other sites More sharing options...
FishandField Posted February 1, 2019 Author Share Posted February 1, 2019 Much Better many thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.