Inspiration

Employees frequently interact with multiple financial tasks as part of their daily work. Some of them include - Submitting reimbursements, Submitting invoices, even raising funds for a good cause, or helping a co-worker in need. Usually, to get started with these tasks, there are separate standalone websites and interfaces/portals which often get redirected to external websites when a payment has to be made. These tasks usually tend to be repetitive and users do not prefer having to share their personal information on multiple sites/portals and hence resulting in a bad checkout experience.

EmployeeTasks

But imagine doing all of the above tasks from your Microsoft Teams application itself??? Sounds interesting, doesn't it? With millions of users and organizations adopting Microsoft Teams as their primary mode of communication, we want to transform the checkout experiences by integrating Rapyd directly into Teams App.

What is RapydTeams?

RapydTeams is an easily integratable Teams bot that provides employees to submit finance-related data and make secure payments using Rapyd, all while staying in the Teams App itself. Some of the specific uses cases targeted by RapydTeams are as follows:

  • Employees can submit Reimbursements (Internet expenses, Team lunch, etc.) in Teams and receive approval from their manager and forward it to the finance team so they can complete the payment (through Rapyd embedded in Teams). Approval logic is set up so that the managers can get notified about the reimbursements. We also made sure that the reimbursement section is constantly updated with the current status (Ex: pending approval, Approved, Rejected) for tracking purposes.
  • Any user can organize fundraising campaigns and share them with the organization, where employees can make donations to support a particular cause. Using Rapyd checkout, employees have an option to either donate to the company fund or directly to a personal account. This can be particularly useful when someone is facing an emergency, so that money can be transferred directly to the user instead of having to wait for the formal approval from the company.
  • Company Admins can create highly customizable invoices through an invoice generator embedded in Teams.
  • When there is a company-wide event or company-wide sale of hardware parts, they can setup Inventory or Merchandize and collect payments from Employees through Rapyd in the Teams app

How we built it

RapydTeams consists of several components which are responsible for the successful end-to-end functioning of this solution.

Part-1: Configuration Setup:

  1. Create a free M365 developer account at https://developer.microsoft.com/en-us/microsoft-365/dev-program. (Ex: Tenant - Tqdys, where by default 15 sample users are created)
  2. Activate Teams with the new domain that was created

Part-2: Bot creation:

In order to provide users with Automation and guidance at each step, we developed a Teams bot using NodeJs.

  1. Through a series of responses in the form of adaptive cards, users are provided with the necessary information to complete their tasks.
  2. Users can then interact with the buttons on these adaptive cards to take the appropriate action.
  3. Using Task modules in Teams, we are rendering our website (hosted on Replit) directly in Teams, so that users can perform all of their interactions from here. Upon initializing microsoftTeams module with the AppId of the bot, we will be able to send the responses from the hosted backed server to the Bot.

Part-3: Rapyd Integration:

  1. Checkout Toolkit: We integrated hosted checkout and checkout toolkit for multiple functions within the bot. We also made use of the webhooks and events provided with the toolkit to perform certain actions with teams based on the output generated by Rapyd. The options were endless in Rapyd but we decided to restrict ourselves to using checkout(except some) for now as the hackathon focuses on the same.
  2. Rapyd Wallet: We used wallet APIs to customize the user who collects funds and integrate this with the checkout toolkit. The user or admin doesn't have to explicitly create a wallet, this is done within the system with the help of wallet APIs and using a unique Teams generated user token as the identifier of the wallet.

Part-4: Backend Logic:

  1. We have hosted our Backend on Replit servers, which handles the data users have submitted via Teams. We have separated the bot and the backend components to ensure decoupling and greater flexibility to improve performance of each components.
  2. File attachments if any, (especially for the purpose of Reimbursements, Merchandise sale) when uploaded by the user via Teams, are immediately synced to Azure Container in the form of Blobs. This makes it easier to store the data securely and retrieve it quickly.

Part-5: Invoicing:

No Finance solution is complete without an invoicing feature. Hence, here we are with an embeddable Invoice that can be edited within Teams App and mailed to the clients.

  1. We have hosted the Invoice feature on Replit servers which is rendered in the form of a Teams tab, that is highly customizable to the users. Using JS and JQuery we were able to provide the option to add multiple items to the invoice and automatically calculate the total cost.
  2. Once the user makes the necessary changes to the Invoice and clicks "Send", it is converted to a PDF file and emailed to the recipients.
  3. Clients would then find the pdf in their email, which when opened would have the link to make the payment. They would be taken through the Rapyd checkout experience to make the settlement.

Challenges we ran into

We ran into a few challenges while developing the hack and have overcome all of them, thus delivering a seamless and reliable checkout experience for Teams users.

Most notably, we had a lot of back and forth on how we should set up automation for the bot. We have initially done it through hardcoded commands where through a switch logic, the bot would function accordingly. However, we soon realized that we needed other automations such as sending out emails, waiting for Teams adaptive card response, responding to HTTP post requests, etc. Therefore, we moved to PowerAutomate which offers a wider range of flows with various triggers and actions.

We also had a hard time getting Microsoft Teams task module to work with the external webpage, from collecting user data to dumping it in Azure Containers. Here, the error messages were mostly vague and we had to take extra steps to log the response and figure out what went wrong. Eventually, we got it to work after referring through public documentation and using bot's AppId to establish the connection.

We have faced some difficulty with the dynamic data in Adaptive cards. The Adaptive cards are an excellent way to display data and prompt users to take action. We wanted to allow users to upload multiple attachments and submit them via the same form as we didn't want to compromise on the user experience. As a result, we couldn't predict the count of objects that we would receive for the Adaptive Card json template. Hence, we spent time researching dynamic data embedding and realized the concept of schema, where we can define a properties key, that would auto-populate our dynamic data based on the defined schema.

Accomplishments that we're proud of

We are very proud of making a scalable and easy-to-use application that employees can take advantage of right away. We are also proud to have implemented the hack using many different technologies such as Azure Cloud, Nodejs bot framework, Adaptive Card Templating language, Rapyd APIs, etc.

This hackathon being our first ever in the field of FinTech, we could learn and pick up a lot of skills within a short time thanks to the Rapyd community and the perfect documentation. The community site's QA was really helpful in the onboarding process, and then the discord community managers and staff were really helpful in clearing up even the most trivial questions.

We always made the choice to not use the easiest software and tools, but the right ones for the requirements. For example, even though it was more work for us, we have decided to use TaskModule with an external webpage for the ability to build a more flexible UI instead of being restricted to the templating language for TaskModule. We have also decoupled the frontend, backend server, and bot microservice so that each piece can be scaled up as needed without impacting the others. We wanted to make a solution that can be taken to Microsoft Team's Marketplace which can enhance the checkout experience for millions of Team's users. And we are proud to have accomplished this.

What we learned

This project helped sharpen our skills as developers and exposed us to new technologies such as PowerAutomate, Azure Storage Containers, and Rapyd APIs. We got a better understanding of the Microsoft Teams bot framework along with its core components - Adaptive Cards, Task Modules and Tabs. This led us to deliver an end-to-end solution by efficiently analyzing the usecase of each component and determining its usage.

More importantly, we learned about the importance of a well-managed checkout experience, as well as the Rapyd's checkout Toolkit that helped us to manage the entire checkout process. This hackathon has inspired us to more actively contribute to solving fintech problems.

What's next for RapydTeams

We have a roadmap ahead for RapydTeams and will continue to add more features and updates in the future. We would especially like to explore the possibility of integrating Rapyd into most of the Office365 Apps so that we can target to provide an all-round experience for billions of Microsoft Office Users.

As a further step, we would like to publish our bot on Microsoft's AppSource, where organizations can add the bot to their Organizations' Teams environment and get started with RapydTeams checkout experience!!!

Built With

Share this project:

Updates