Decoding simple donate extension

As mentioned by Tony in his blog, we have recently released “Simple Donate” extension that allows you to have a pretty and responsive donation pages. I want to take this opportunity to share some implementation details for this extension.

CiviCRM and API

We made a conscious effort not to add more configurations and decided to use existing contribution page settings. So the only thing that you need to do is link your existing contribution page with our extension.

AngularJS

CiviCRM already has support for angular extension. It was fairly easy to learn and develop front-end based on angular framework. It also helped in implementing client-side validations for most of the user related and payment related fields. Angular was useful to script out the single-input credit card field, which provides a more concise input method for entering credit card info.

Bootstrap CSS

One of the aim of this project was to make donation pages responsive and it should work across various devices. Hence we decided to use Bootstrap CSS.

Bootstrap is one of the most popular HTML, CSS, and JS frameworks for developing responsive, mobile first projects on the web. Bootstrap's responsive CSS adjusts to Desktops, Tablets, and Mobile phones.

Ziptastic library

We wanted to make donation page more user centric and reduce the number of obstacles in donation. Our extension uses Ziptatstic postal code library to auto-populate “City” and “State” information based on the zip code. Since this is US centric service, we also provide an option to disable this service in extension configuration.

Protractor Test Runner

Tests are an integral part of any project. Our front-end is based on angular hence we decided to use Protractor. Protractor is a Node.js program, and runs end-to-end tests that are also written in JavaScript and run with node. Protractor uses WebDriver/Selenium Server to control browsers and simulate user actions. More information can be found at https://docs.angularjs.org/guide/e2e-testing.
In this extension we are using CiviCRM selenium server configuration, to run protractor test cases.

Currently we have 37 tests and some of the use cases are listed below:

• Redirection to correct page or display error if case of incorrect configuration
• Simple donate configuration
• Conditional display of “State” and “Country” based on "Ziptastic" configuration
• Validations for credit card type, number, expiration date
• Required field validation
• Ensure contributions are created correctly for existing as well as anonymous user

You can find the code at https://github.com/webaccess/com.webaccessglobal.simpledonate