Payouts: Designing and implementing the designer's commissions on SideDoor

To provide some background, SideDoor operates under a B2B2C framework, wherein it brings together various vendors. This platform enables designers to access a diverse range of vendors and market their collections to their own clientele.

Having said that, customers have the option to complete their purchases using the SideDoor app, allowing the designer to earn their commission.

So what are we solving?

Currently, the finance team manually handles the processing of commission payouts. They utilize a Google sheet to keep track of pending and paid payouts, ensuring a record of the associated accounts. Subsequently, they use Stripe to make payments to the designers. This step is particularly important as it involves monetary transactions, necessitating meticulous verification to ensure alignment with the total amount.

Whose problem are we solving?

The finance team stands as the main recipient of the project's benefits. However, during the project planning phase, several other teams were identified as beneficiaries. For instance, the customer service team gains access to a comprehensive overview of payout statuses, allowing them to have a broad perspective. Similarly, the designers can track their commissions on each collection, enabling them to monitor their earnings closely.

We need to import existing data, such as the payout records stored in the Google sheet they currently use.

How do we migrate the data without impeding the finance team to send payouts?

Implementation

We have divided the project into two distinct scopes:

Developing a feature that enables the finance team to manually record the existing payouts.
Implementing the actual payouts functionality by integrating with Stripe.

Manual Payouts

Instead of creating a migration script to import the existing payout transactions, which contain inconsistent data that only the finance team can interpret, we have devised a solution to create a feature where they can manually record the payouts within the app.

Payouts with Stripe Integration

Building this, particularly in the UX aspect, is quite thrilling. The inclusion of monetary factors instills a sense of caution within us as developers, ensuring that everything is accurate and secure.

We have devised a solution to break this down into multiple scopes, allowing us to avoid becoming overwhelmed and concentrate on the crucial aspects.

Here is a brief overview of the screens we have developed for sending out the payouts.

Listing the line items eligible for payouts

Previewing the line item for payout

Once the finance team selects the item labeled as a payout, it will be directed to an open batch for payouts, which only the finance head and executives have the authority to initiate and send the payouts.

Processing the payout transactions

Only the finance head and executives have access to these screens, which are integral to the actual payout process where the Stripe integration is utilized to send commissions to the designers.

Confirming the payout

Rejecting a payout

Furthermore, the finance head has the ability to reject a payout and remove the item from the processing queue.