Jump to content
Sign in to follow this  

Payment screen messed up

Recommended Posts

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 :)


Share this post

Link to post
Share on other sites

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 floatcenter, 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?

Edited by FishandField

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Create New...