Virgin.com - Unite donations

How I integrated Virgin Unite donations into the virgin.com site.

About

After Beyond did the redesign of the virgin.com presence. The non-profit foundation of the Virgin Group wanted for donations to be integrated into the main virgin.com site.

Build

The donations are managed from the custom build Drupal admin interface. The checkout process is handled using the Drupal Commerce module. Payments are processed using the DataCash payment gateway.

Role

• Backend Developer
• Responsible for figuring out how we could integrate Virgin Unite donations on virgin.com
• Provided estimates, scoping and technical oversight

Challenges

There were several big challenges I had to face in order to add Unite donations on the main virgin.com site.

Template rendering approach

Since the Beyond approach for having a good-looking and flexible site was to ditch the built-in Drupal templating approach. The in-house solution used Drupal for content management only, and for rendering content a modern templating language (Twig) was used.

• Pros - Using Twig (similar to Jinja) templating language, and we could split HTML from JS/CSS files, making the frontend development easier.
• Cons - We couldn’t leverage existing Drupal modules, they had to be re-implemented to use Twig.

E-commerce & Donations

One of the requirements of Virgin Unite was to allow the user to specify any amount it wanted to donate.

• This was my first project dealing with E-commerce, and so I had to deal with a less common case where the items for checkout have no fixed price! 🙈

After exploring options for Drupal on how to add support for E-commerce, I found that Drupal Commerce module would be the best option to use.

• The custom in-house implementation for rendering content made the integration of this module much more complex. : open_mouth:😮😮

DataCash Payment Gateway

Another challenge was the requirement to use DataCash as the payment gateway.

• The payment gateway was very obscure and with minimal documentation.
• An experimental Drupal module Commerce Datacash added some support for this gateway, but it was lacking functionality, and had no documentation.

Iframes

Some donation payments would redirect the user to the card issuer page for authorization (3D Secure). This meant that the payment experience had to be sandboxed in an iframe, which was a less ideal user experience on mobile devices.

Learnings

I learned a lot from this experience!

• Learned about Drupal
• Learned about E-commerce, donations, payments, 3D Secure

One area where I could have improved was in thoroughly communicating the technical reasons to frontend developers about the benefits of having the payment process on an iframe.

Results

• Virgin Unite donations integrated into the main virgin.com presence.
• Large volume of donations processed.
• Expanded to support complex business rules, such as using different merchant IDs depending on the card issuer or currency.

Media