A UK-based startup had a revolutionary idea of a platform to bring together merchants, fundraisers, and product consumers willing to make a difference by donating to good causes.
Technology-wise, integration with eBay was the most demanding part of the project due to the specificity of their API. But it enhanced the site’s ecommerce aspect immensely by eliminating a lot of back and forth for Merchants. From the point of view of business logic, our primary challenge was to roll up multiple user roles and objectives into one solution without overcrowding the space.
The key objective was to create a modern and easy to user website to promote the brand and fundraising platform that would meet the requirements below:
- Easy to navigate, great look & feel, fully responsive on all devices (mobile, tablet)
- Capable of uploading hundreds of thousands of products
- Housing thousands of Good Causes & Charity pages
- With the ability of manual updates on Fundraisers’ social media profiles
- Built to the latest Google / search engine standards
Time was an important variable, as well.
The website logic
We built a website with multiple user roles and corresponding responsibilities pertaining those roles:
- Fundraiser – creates an account via form-filling and admin approval. On the approval, sets up a fundraising page with description, media, etc.; connects the page to their FB profile (optional). Gets charity notifications and manages reports, etc.
- Merchant – creates an account and a product page to sell items or generate affiliate links to their own website. Gets order notifications and can manage order statuses. They can pull the existing items from eBay to the site (we’ll describe the merchant account functionality in the feature section).
- Donator (customer) – creates an account (optional, can be created post factum in the case of donation/purchase); they can donate directly to a cause or via purchasing a product on the site; tracks the order status in the case of purchase, can withdraw the donation/cancel the purchase and get a refund.
- Non-authorized user – has a choice to create an account as a fundraiser/merchant by filling out a form and shifting to one of these roles. They can also buy a product or donate directly to one of the fundraiser campaigns, in which case a donator profile is created automatically.
- Admin – manages the website via admin panel, manually approves/refuses fundraiser/merchant accounts.
- WordPress. The website is built on top of WordPress CMS with it core features of user and content management and site structure.
- WooCommerce. We opted for WooCommerce to manage products, orders, payments.
- WC Marketplace. To create a multi-vendor shop we used WC Marketplace plugin. It provides merchant account registration and brings a significant part of merchant profile management (products, orders, payments, etc.) to the frontend.
- 3rd-party APIs. There’s a simple logic of using native API for eBay, MangoPay and Zoho. Since we have a complex multi-vendor environment with non-standard payments flow, including commission, the behaviour of some core feature will directly depend on 3rd party APIs.
- Add-ons. We used WC Marketplace add-on for reports.
- Elasticsearch. Enables search optimisation for vast categories of products. It lets you perform and combine many types of searches — both structured and unstructured. In addition, being multitenant-capable, it simultaneously serves multiple roles.
- Zoho. Integration with a 3rd-party system for invoice generation.
Let’s look at some interesting features and the way they were implemented in this project.
Fundraiser account is managed by a fundraiser and a campaign page is automatically removed after an expiry date or as soon as the donation target is met, unless it’s an ongoing support campaign. MangoPay Wallet, integrated with the page, enables getting the donations and the system takes care of the proper distribution of the funds and fees. Both Fundraisers and Merchants has an access to a report on all campaigns launched as well as an option of download an excel report file by clicking a report button.
Another attractive feature is creating a campaign PDF poster that allows accessing the campaign from any external source by reading a specifically generated QR code.
A Merchant account allows for the following functionality:
- Account update
- View any pending or completed orders
- Add/edit products
- Update the status of orders (pending; dispatched; delivery; complete)
- Create a MangoPay wallet
- Add a dynamic % commission structure per merchant goods
- And much more
Merchants benefit from 3 ways of adding items to their page:
- sync products from EBAY
- upload a CSV file
- via individual product upload
Import from eBay saves a Merchant tons of time by syncing the product values with eBay via the API. The integration also allows for automatic stock amount updates on eBay if an item gets ordered on IBuytoGive, which is a useful feature to exclude the instances of overbuying.
There are 2 ways of image upload for items on sale:
- via a URL link on the CSV import which is hosted on another site
Since this role involves financial transactions, integration with a payment system is part of the functionality. The payment is taken via the Mangopay Payment Gateway. A Donator can only message the Fundraiser or Merchant outside the system via an email. There’s an option of cancelling donations and purchases and getting a refund.
Charity listings/charity page
Charity listings contain a grid of campaigns. A charity page features a photo, description, the name of cause or charity, call to action, ‘Donate Now’ button and other elements. Autocomplete is available in the search field. Filters help categorise charities.
Product listings/product page
This page is integrated with the core WooCommerce functionality. The search mimics the look and feel of eBay. The products can be browsed by categories. Filters allow for sorting by popularity, date, and price. A single product page, apart from the standard attributes, states the amount of money to be donated in case of purchase.
As promised, our team managed to deliver a lightweight complex solution to meet our Client’s requirements, on time and within budget. The Client was satisfied with the result. The product is now on the stage of UAT.
WordPress, WooCommerce, PHP, ElasticSearch, MangoPay
- Latest versions of Google Chrome, FireFox, Edge, Safari for Mac, Internet Explorer 11
- Responsive layout: 320px and up – mobile view, 992px and up – desktop view
- Support for touch devices