The Payflip technology stack

Payflip made it its mission to strenghten the purchase power of 11 million Belgians. How? Payfip helps SMEs to offer flexible salary packages to their employees. Yes, you read it well: via the Payflip tool, employees can choose themselves how they want to be rewarded. Why? Because a flexible salary package is one of the best weapons for SMEs to win the war-for-talent!

To accomplish its mission, Payflip uses a number of innovative technologies to integrate with benefit providers, HR tools and payroll providers. If you want to have a véry transparent view on our awesome technology stack, continue reading, dear dev's!

Jon Lopez Garcia

Co-founder, CTO

August 17, 2021

First and foremost: front-end!

Let's take off with explaining the technologies used in the front-end part of our solutions.

We build our web applications using React with Typescript. We love the flexibility of React and its declarative paradigm. We combine the power of JSX with CSS-in-JS to style our components using the well-known Styled Components library. CSS-in-JS avoids namespace conflicts by generating unique class names when styles are converted to CSS.

We adopted React Spring to enhance our UIs with nice animations when CSS animations fall short.

Another important part of a front-end stack is the way the data is fetched. We wanted to rely on a specification which is one of the reasons we chose GraphQL. We use Apollo Client to make calls to our GraphQL back-end. Apollo gives a complete and robust caching system that enables a fast and performant user experience.

When it came to state management we have tried not to rely on extra dependencies and used the caching system of Apollo Client. Apollo Client version 3 enables the use of reactive variables that can be accessed within our components. The component that uses a reactive variable will re-render when the variable changes.

Apollo Client also comes with the concept of local-only fields where a GraphQL schema can be appended with parts that only exist on the client side. The values that local-only fields return can be derived from existing values in the cache or from a reactive variable for example.

Behind the scenes: back-end!

Each tool has a dedicated back-end service that serves the data and exposes commands. We use Koa to implement our endpoints. Koa is a library that is very similar to Express with a smaller footprint and a modular architecture.

We wanted to stick with Apollo technologies on the back-end as well. Therefore we chose for the Apollo Server implementation for Koa. It provides a fast and spec-compliant GraphQL server implementation. The Apollo Client team is putting a lot of effort in maintaining their community happy by providing dev-tools that enhance the developer experience.

We also use NestJS for REST services. It is quite a mature framework that comes with dependency injection out of the box. It borrows the architecture of Angular which gives solid guidelines to structure the files that compose the solution. It also has a quite active community which contributes to a lot of the available modules for NestJS. We use the Swagger NestJS module to generate an OpenAPI spec-compliant documentation which is very useful to share with partners.

The database is one of the most important topics in a solution. We wanted to start with something flexible that we could easily adapt as our business needs were becoming more and more mature. Therefore, we turned to a document-oriented database and picked MongoDB. MongoDB comes with a powerful querying language and plenty of operators that make querying and transforming data enjoyable.

No infrastructure, no party

We heavily rely on cloud platforms to serve and run our workload. We picked Azure to host our infrastructure. We depend on plenty of their services as Azure Storage, App Service, Azure Service Bus and Azure Logic Apps.

Provisioning the infrastructure is another common challenge that companies face. At Payflip, we wanted our infrastructure to be validated and deployed through a CI/CD pipeline. Therefore we use Terraform to describe the infrastructure in a declarative manner, allowing our infrastructure to be written in code.

This gives all the benefits of a programming language as having variables, conditions or loops. Terraform takes care of applying the migrations for every new state that is declared in the files avoiding writing manually complicated migrations script.

Our CI / CD is hosted and runs on Github using Github Actions. Github Actions are a really nice and flexible way to compose CI and CD pipelines. They use simple YAML files to invoke jobs in a safe Github environment. You can even build your own Github Action and share it with the world!

What's next?

Now that Payflip is rapidly growing, we want to start building more domain-oriented services that could be shared by all our dedicated back-end services.

To make this happen, we would like to rely on a strongly typed language and we are pretty convinced that C# would be a great match! It is a mature-but-not-has-been language that comes with a lot of functional concepts like pattern matching or first-class immutable structures. It enables to write strongly typed declarative code and runs on the amazing opensource and cross-platform .NET engine.

Wanna co-author the extremely interesting technology story of Payflip? Send a message to our CTO jon@payflip.be and he will be more than happy to discuss technology and your future within Payflip with you!


Goesting gekregen om bij Payflip te werken? 

Hier vind je al onze openstaande vacatures. Val je niet helemaal in deze kraam? Stuur ons gerust een berichtje op jobs@payflip.be. We maken graag kennis!

Afbeelding vacature

Legal Manager

For our Belgian market, we are looking for a legal customer success manager with at least 1 year of experience in social or tax law.

Lees meer (EN)
Afbeelding vacature

Software Engineer

For our Belgian market, we are looking for software engineers with 2 years of experience (or equivalent 😉). Ideally, you have experience in both frontend and backend development, but if not, your willingness to learn wins!

Lees meer (EN)

Meer over auteursrechten

Meer over bonussen

Meer over flexibel verlonen

Meer over flexibel verlonen

Meer over verlonen

Meer over mobiliteit