Invofly

• 

  Easily create eye-catching Invoices

• 

  Fastest way to collect invoice payments

• 

  Create beautiful checkouts

• 

  Full control over how you get paid

• 

  Customize brand colors and theme

• 

  Email alerts for payments

• 

  Full featured invoice manager

Inspiration

30%!

This is nearly how much of Americans are being self-employed at the moment (Forbes). The pandemic made traditional workers leave their jobs and start new small businesses. Whether it's small or large, invoicing and payment collection plays a key role in any business. Most of the time Invoicing and payment collection are done using two separate services. For an independent creator or a small business, setting up invoicing and payment collection can be a cumbersome task. That's where Invofly comes into the rescue.

What is Invofly?

Invofly is a non-traditional digital invoicing solution that can easily generate eye-catching invoices and collect payments from anywhere in the world within minutes. Invofly is proudly powered by Rapyd, which is the largest and safest local payment network in the world. This makes you less worried about the payments and more concentrated on the work you love. With Invofly, it will only take 5 minutes to send your first invoice and start receiving payments.

With Invofly you can,

✅ Easily create and manage digital invoices for multiple clients.

✅ Create eye-catching invoices with an inbuilt invoice generator.

✅ Start receiving payments from clients anywhere in the world with 0 setups.

✅ Fully customize the look and feel of invoices and checkout screens.

✅ Configure a suitable payment method for each client based on their location.

✅ Send your first invoice to a client within a few minutes and start to receive payments.

✅ Dedicated invoice page which shows the history and current status of an invoice.

✅ Receive email alerts when payments are made for invoices.

How we built it

Invofly uses React.js for the front-end and express or Node.js for the backend. Ant design library was used with some tweaks to build the user interface. We used Firebase for user authentication and Firestore for the database. The invoice generator was created from scratch to suit our needs. We had to spend about 3 weeks day and night to complete the project on time. When we first got this idea, we were not sure about its feasibility. We were able to get support from a Rapyd team member and he was very helpful and gave the right guidance on choosing the right APIs and stuff. All Rapyd API calls were made via our express server.

Following is a diagram to show how we used Rapyd's inbuilt features to integrate them with our system.

We wanted to make a more polished and a fun checkout experience for the user. That's why we came up with this nice idea of having the invoice and the checkout screen as two sides of a coin. We were able to customize the look and feel of the Rapyd checkout screen using their toolkit methods.

Also, the users will see cheerful confetti when they complete the checkout successfully. This will add some joy for the end user.

Mailgun was used to send emails about invoices and payments to the clients. Once we finished the project we hosted our project on Heroku and integrated with a dedicated domain name invofly.com.

Challenges we ran into

The first challenge was to identify which Rapyd features should be used to implement the project. We used a dedicated Rapyd wallet per each Invofly user and connected them with Rapyd's hosted checkout pages. Then we added them to our Invoices via the Rapyd checkout toolkit with custom styling.

When we first try the Rapyd API, generating the correct signature took a few trial and error attempts. This was mostly due to the incorrect body parsing. Apart from that the APIs did not have any major issues. It was easy to get started with Rapyd's well written documentation.

The Rapyd checkout toolkit does not handle the response states of a checkout screen once they completed. Therefore we implemented all the response states with our own custom messages and added some fun to it.

Limited time was the other challenge we had. We only had about 3 weeks to complete the whole project and we gave our priority to the invoice generating and payment processing. Therefore we had to work on days and nights continuously.

Accomplishments that we're proud of

At the beginning of the project, we had an idea about what the final app should look like. We were able to add more features than the original idea and are satisfied with the final output and the app functionality. We are proud of the things we were able to complete within this short period. Still, the payout section is not completed. But this is not a critical feature since all the transactions are happening inside a sandbox.

What we learned

We learned a lot about the Rapyd APIs and their features during the project implementation. We wanted to give some purpose and meaning to the checkout experience and be different from a traditional checkout. That's why we thought of adding some joy to the end-user and providing ways to customize it to suit their needs.

What's next for Invofly

There is a roadmap ahead for Invofly and hope to add continuous updates and features in the future. Implementing the Payouts section is the next key feature for Invofly. Features like adding support for different user authentication methods, more invoice customizations, and more theme configurations were not implemented due to the lack of time. These are the main key features to be implemented next.

Built With

• antd
• express.js
• firebase
• firestore
• heroku
• mailgun
• node.js
• rapyd-api
• react.js