Payment Service Development for bePaid
Payment service development for provider BePaid. We used Ruby on Rails, Ruby and AngularJS. Read the case from Rubyroid Labs
Team
Full-stack developer
UI/UX Designer
Project Manager
Timeline
Since 2018
Industry
Fintech
Noticeable Results
bePaid is the payment service provider which allows performing single-click payments using a bank card or national payment system.
16x
more payment methods integration
no redirects from the website
50%
increase in data accumulation
Key features
No Redirects to other website
Full widget customization
More than 15 payment methods integrated
Legacy browser support
Secure «Save Card» options
Challenge
Our client, bePaid, had their own payment processing system with two-layer back-end. They arrived at Rubyroid Labs with the problem, that their platform had no UI/UX friendly and reliable front-end part which could be integrated into most e-commerce websites.
Also, there was a lack of payment systems that could be used by the payment system (Bankcard only). The challenge for Rubyroid Labs was to create a modern and reliable front-end part which would be convenient for business owners because of easy website integration and convenient for the end-users because of the great usability.
Solution
As the first step of this payment service development, the Business Analyst of Rubyroid Labs reviewed all the materials and specifications our client had. After that, our in-house designer started to prepare UI/UX for the future widget. When the design was approved, our full-stack engineer started development.
No Redirects
While payment processing there is no redirect to the website of the particular payment system. We developed this using pop-up window (full-screen on mobile) and, for security reasons, payment widget loads in separated iframe. Now, after payment is finished, user stays on the original website.
Number of payment methods
Before we started working on this project, there was only one payment method available - bank card. After design work and development, there is a menu-bar with the possibility to choose from more than 15 payment methods. The following payment methods were implemented:
Some of these methods work using a redirect. This is because of limitations from the system, not from our side.
Webpack
We used webpack for this product. This means that the code which is written using the latest JavaScript and CSS (stage 0), will be compatible with old and not-supported browsers (For example, Internet Explorer). It helps to optimize the solution for the huge amount of users.
Widget customization
It’s possible to customize the widget in order to meet the business needs of the particular e-commerce website. In parameters of loading of the widget, CSS parameters are transferred in JSON format.
Save card
We added the ability to save card number, name and expiration date within the widget. While processing the next payment, users only need to add CSV code (several cards supported). Card data is stored on the server, and a unique user code is stored on the browser side. For security reasons, all your data (cards and unique user code) can be deleted.
Wireframes
Technology
Communication
We had weekly meetings with the customer (1-2 times). All the tasks were handled in Trello, time-tracking system - OpenProject. For the meetings, we used Slack and for urgent communication - Skype.
Meeting
Weekly
meetings
Communication
Slack
Skype
Task Tracking
OpenProject
Trello
Results
Thanks to the easy integration, customization, and reliable payments, bePaid quickly became the market leader in payment products. Their solution is used by most e-commerce businesses in the country. Nowadays, we continue to support and maintain solutions that we delivered by adding payment methods, custom features, and system integration support.
16x
more payment methods integration
10x
reviews from real customers
How It Looks
Hear from the Customer
Alexander Shostak
CEO bePaid
We were pleased by Rubyroid Labs approach to each phase of our cooperation. During the business analysis phase, developer and manager of Rubyroid Labs visited our office several times in order to discuss all the details of the project. Communication with the design team was brilliant, which helped us implement the best design for our application. We feel development experience on each feature they implemented. Even after release, Rubyroid Labs team continues to support and improve our current solution.