An elegant front-end boilerplate that'll make it easier to cope with the default Ingenico payment view, which is rather grotesque.
Did you ever thought, while implementing payment services from Ingenico (previously Ogone), that the CSS file was not being loaded on the actual payment page? Well, we did...and still do, every single time.The payment view is truly hideous and looks like a web page from the early nineties. Our guess is that "level-1 PCI DSS compliant" does not have anything to do with providing a user friendly interface with proper front-end code.
Luckily, for us implementors, Ingenico provides an option to modify the default layout / design. As they state in their FAQ:
"There are two different ways to influence the look and feel of the payment page: by using either the static template or the dynamic template. With the dynamic template it is possible to customize the entire design of the payment page using a template and cascading style sheets (CSS)"
Yes, "customize the entire design", that's what we want! And that's where Ingenico.css comes in. We provide subtle and customizable CSS styles that will make it easier to cope with the payment view and can be installed in a breeze.
All examples can be found at: http://github.e-sites.nl/ingenico.css/
There are basically two things you'll need to do when implementing Ingenico.css. First of, make sure that usage of the dynamic template is allowed and if so, point both Trusted dynamic template URL and Trusted website hostname to the GitHub environment.
Second, you will need to pass the TP parameter and make it point to the template.html file. Like this:
<input name="TP" type="hidden" value="https://e-sites.github.io/Ingenico.css/dist/template.html">Ingenico will fetch the .html file and the string '$$$PAYMENT ZONE$$$' will be replaced with their payment form. As for the CSS styles, these will be loaded directly from GitHub.
The default Ingenico.css styles are based on Bootstrap but you can quite easily roll your own when you're comfortable around LESS / CSS.
Please note that when you want to customize either the HTML or the CSS you'll need to host both files on your own server.
The original HTML and CSS is already bad as it is, so Ingenico.css comes with an optimized build (created with gulp.js) for your production enviroment. All code is minified and unnecessary CSS rules are stripped out with gulp-uncss. After this optimization it clocks in at 9KB minified and 2KB when being served with gzip compression. This build is located in the dist directory.
As for the HTML template, this is minified as well and points directly to the corresponding CSS (hosted on GitHub).
All help and feedback is appreciated. Perhaps we can work towards making multiple themes or build an interface to customize the payment view without even writing LESS / CSS. For now, we haven't layed out any ground rules yet, just fork this project and create a pull request when you to want get your changes merged.
Editor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at http://editorconfig.org.
Ingenico.css is not finished yet, we definitely got some things planned, such as:
- adding views from missing payment methods;
- write more documentation, both inline (in the code) as well on this very page;
- adding examples that work with other frameworks than Bootstrap;
E-sites is a full service internet agency with offices in Breda (NL) and Curaçao. We create innovative, extraordinary and effective websites, (mobile) apps and web campaigns for organizations with online ambitions.
Copyright (C) 2014 e-sites, http://e-sites.nl/ Licensed under the MIT license.