Forem: Sig

Como coletar e dividir pagamentos com a API do Stripe

Igor Duca — Sun, 19 Nov 2023 02:43:45 +0000

Antes de tudo: o que é o Biome?

O Biome é um marketplace de aplicações web criado por desenvolvedores, para desenvolvedores. Nós da Sig tivemos a ideia de criar um novo ambiente onde qualquer desenvolvedor possa publicar as suas novas aplicações e monetizá-las ou não, gerando assim uma nova oportunidade para novas pessoas criarem credibilidade no seu portfolio, conseguindo usar as suas vendas e métricas como parâmetro para a sua confiabilidade como um profissional da tecnologia -- ou uma pessoa com hobbie de criar coisas boas.

Prefácio

Um dos maiores desafios que tivemos durante o desenvolvimento do nosso marketplace de aplicações web (Biome) foi como desenvolver um pagamento confiável e resiliente para que os nossos usuários tenham certeza de que serão corretamente monetizados por suas criações. Durante o processo de pesquisa e entendimento de gateways de pagamento, chegamos à conclusão de que o gateway que melhor atendia as nossas necessidades e expectativas agora a nível de MVP foi o Stripe, pelos seguintes motivos que serão explicados durante esta publicação:

1 - Comunidade
2 - Certificação de documentos
3 - Pagamento parcelado
4 - Split Payment
5 - API

Opiniões da comunidade sobre o Stripe

A documentação do Stripe é elogiada por todos os desenvolvedores que precisam implementarem os seus serviços em uma de suas criações.

eu daria muito um premio pra um dev do stripe por ter criado o MELHOR dashboard de todos os tempos pic.twitter.com/XTPxzu1AYR
— igor duca (@ducaswtf) November 14, 2023

e a melhor documentação tbm, padrão rubista de qualidade
— cherry 🏳️‍⚧️🍒 (@cherry_ramatis) November 15, 2023

Confiram os artigos da Cherry

Tendo isso em mente, foi ainda mais fácil tomar a decisão de usar o Stripe como principal gateway de pagamento, mesmo sabendo sobre o seu principal ponto negativo: a falta de suporte a Pix.

Não tem Pix????

Por ser um gateway de pagamento usado globalmente, mas, principalmente nos Estados Unidos, o Stripe tende a ter mais suporte para tecnologias americanas do que a queridinha brasileira, mas, de qualquer forma, temos alguns outros pontos que fazem a falta de suporte a Pix ser apenas um "dá pra esperar lançar".

Certificação de Documentos

A responsabilidade de programar um marketplace do zero é muito grande, e é por isso que temos que fazer ótimas escolhas pensando principalmente na UX e confiança dos nossos usuários. Um dos nossos maiores receios era o de acontecerem calotes ou falhas de pagamento na plataforma, e, uma das saídas que encontramos foi a certificação de documentos (RG, CNPJ, CNH) dentro da implementação de uma conta de parceiro do Biome -- usando a API de pagamentos do Stripe.

Por trás do código da criação de uma conta de parceiro

O Stripe tem essa funcionalidade muito legal chamada Stripe Connect. O Stripe Connect te permite a criar uma conta para o seu negócio e cadastrar parceiros que vão receber uma certa porcentagem (programática) por cada uma das suas vendas. No código abaixo está sendo demonstrada a forma mais simples de se criar uma conta de parceiro no Stripe:



// createStripeAccount.ts

import Stripe from "stripe";
import { createAccountLink } from "./createAccountLink";

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, {
  apiVersion: "2023-08-16",
});

export const createStripeAccount = () => {
  return stripe.accounts.create({
      type: "express",
      email: "youremail@email.com",
      country: "BR",
      capabilities: {
        card_payments: { requested: true },
        transfers: { requested: true },
      },
  });
};

A única funcionalidade do código acima é registrar uma conta para o usuário parceiro da sua empresa no Stripe usando apenas o seu email como referência. Para que o usuário consiga receber os pagamentos, ele precisa preencher alguns outros dados obrigatórios, mas, para isso, você deve gerar um accountLink para que ele forneça as outras informações para o próprio Stripe.



// createStripeAccountLink.ts

import Stripe from "stripe";

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, {
  apiVersion: "2023-08-16",
});

export const createAccountLink = (
  accountId: string,
  returnUrl: string
) => {
  return stripe.accountLinks.create({
    account: accountId,
    refresh_url: "https://biome.sigcoding.com/reauth",
    return_url: returnUrl,
    type: "account_onboarding",
  });
};

O account link deve ser enviado para o usuário -- ou o usuario também pode ser redirecionado para ele, que é a forma como eu lido com esse link -- e nele, serão pedidas as outras informações sobre endereço e documentação.

FAQ: Tentei fazer uma cobrança com o usuário criado com o código acima e não funcionou por conta de falta de requerimentos

A falta de requerimento pode significar uma lista de coisas:

O usuário não preencheu todos os documentos necessários
Você não especificou os requerimentos na função de criação do usuário e então não foram requisitadas as informações
Os documentos ainda estão em tempo de análise

A última observação foi algo que aprendi enquanto debugava os pagamentos do Biome: o Stripe não especifica nos retornos quanto tempo demorará para que eles consigam confirmar os documentos do seu usuário e assim fazer com que ele esteja elegível para receber ou para ser cobrado, mas, você ainda pode conferir isso pelo CMS do próprio Stripe:

Aqui está o link que te leva para a tela de overview das contas do Stripe Connect. Esse link vai te ajudar a ter uma noção de quantos usuários parceiros estão cadastrados hoje na sua plataforma.

Tenho usuários cadastrados, como faço para receber um pagamento e repassar uma parte do pagamento para essas pessoas?

Se você quer criar uma espécie de marketplace e repassar valores de compras para usuários, a solução de transferências do Stripe resolve muito bem o seu problema, e tudo o que você precisa é da seguinte implementação:



// Código retirado da própria documentação do Stripe

// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = require('stripe')('sk_test_51O4brBKOx2aErhkvVXzbwdtFk99FvB1M94fbbvwnJPJDMUNs97SATizCSqjSosH9CfBOcwEVVSJeckuabmcBiM3K003TXv4Rdr');

const session = await stripe.checkout.sessions.create({
  mode: 'payment',
  line_items: [
    {
      price: '{{PRICE_ID}}',
      quantity: 1,
    },
  ],
  payment_intent_data: {
    application_fee_amount: 123,
    transfer_data: {
      destination: '{{CONNECTED_ACCOUNT_ID}}',
    },
  },
  success_url: 'https://example.com/success',
  cancel_url: 'https://example.com/cancel',
});

O código acima foi retirado dessa documentação do Stripe. Basicamente o que está acontecendo aí é que esse código gera um checkout -- ou seja, esse código gera uma tela onde os seus usuários podem fazer um pagamento com o cartão de crédito -- e quando a compra é completa, um valor automaticamente é transferido para uma conta do Stripe.

FAQ: Mas e se meus usuários não tiverem uma conta no Stripe?

Não tem problema nenhum, por isso você vai apenas usar a conta do Stripe Connect criada com um dos códigos citados anteriormente aqui para fazer essa função, já que você cria uma conta pro usuário, independente se ele tiver uma conta ou não, evitando assim que pessoas tenham de "perder tempo" criando uma conta do Stripe só para receber o dinheiro delas no seu app.

Algumas outras perguntas legais:

FAQ: Quando os usuários são pagos?

O Stripe Connect paga os usuários diariamente, mas você pode ter mais informações sobre isso aqui.

FAQ: Quanto de taxa o Stripe tem?

O Stripe Connect tem uma taxa de 0,25% + USD 0,25 por transação enviada. Você pode ter mais detalhes aqui.

FAQ: Funciona localmente?

A API do Stripe é bem amigável com devs, então você pode não só testar pagamentos e cobranças localmente (ou em prod, se estiver com coragem) usando as chaves de teste mas eles também te deixam testar webhooks usando o Stripe CLI.

Documentação do Stripe

Sig Coding
Sig is a community-first DAO startup that produces SaaS applications powered by its own community. We spend time thinking on how to make things better and how to make tech be more environment-friendly.

Thumbnail feita por Igor Duca.

Test? When to test?

Igor Duca — Thu, 20 Jul 2023 12:19:51 +0000

Everyone now and then talked about the importance of writing unitary or implementation tests, but not everyone tried to explain to you what do you need to test.

Test? When to test?

First things first I need to explain to you deep down in the basics: "what is the purpose of testing?". Testing is trying to predict a mistake from the user before it happened. As a scientist or an engineer, your job is to prevent the final user to fail in what you have built.

Front-end tests

Front-end tests are sort of more unusual than the back-end ones are.
There are some architectures like microfrontend, componentization or atomic design that could help you creating tests for your websites or front-end applications. Basically, in front-end, you may test the steps that the user will take during his exploration through the website. So, you may want to test things like:

Is the register working?
Is the login working?
Is the document upload working?
Is the payment gateway working?
Are my emails being sent?

And there are also a lot other kind of tests that not even everyone knows:

Testing page contrast
Testing page analytics
- How much time does the page needs to load?

Back-end tests

Back-end tests are kind of required to build an application that can scale this days. This tests may be also related to what the user can, and will do, while he is using your services, so back-end tests must test YOUR code, not the code from the libraries you are using.

For example, a tweet of mine motivated me searching for better explanations about testing, and consequently, made me write this article.

As you guys can see, this is an example about WHAT NOT TO TEST, but first let me explain why not to write tests like this.

Only test your code

There are not any problems in the code, the code is pretty clean though. The real problem is: I am only testing Jest's code, not mine.
This test case below only tests if mongoose save method is working, not integrating my application into it.

When to test back-end

Woovi.com have a pretty great article that explains how and when you can test your back-end, you can see it here.

But, basically, you should test your code and the integrations that it may establish with external APIs for instance.

Test if API version match to the one you are waiting for
Test if your credentials are still active
Test if your controllers are working
Test if your services are working
Test if your recent migration is still compatible with your expected interfaces

Finally

Test your own code.

Thumbnail by Wu Yi at Unsplash

The origin of App Router - A Next.Js Rewind

Igor Duca — Sat, 15 Jul 2023 16:11:33 +0000

Preface

There are many controversial opinions about Next.js 13 App Router, some of them say that this routing method is slow and created a lot of unnecessary weight in the project, but in the other side, many people says that managing your routes using the App Router is the best way to improve productivity while building with Vercel's very own Next.js

Why Next was created?

In one of Lucas Montano's videos — this particular one featured Mario Souto they did a retrospective moment talking about the purpose of Next.js's existence.
When Guillermo Rauch, CEO of Vercel, first launched Next.js back in 2017, he mentioned that Next was created in a try to make an framework that would build application as PHP was merged with JavaScript.

Think about how webapps are created with PHP. You create some files, write PHP code, then simply deploy it. We don't have to worry about routing much, and the app is rendered on the server by default.

Watch the video here

Comparing AppRouter to PHP router

Starting with PHP, where the idea of Next came from.
In PHP, there are many ways to route your application, just as it works at React, you can install some routing library and work with a custom routes.php file or you can choose for building a folder structure that will be responsible for routing your entire application

As you can see, each one of the files inside this source directory is assigned to a route, so 404.php would be the /404 route, the same way home.php would be the / route.

Pretty simple, right? Next uses an almost identical folder structure to route applications.

Above there is Next.js original routing, that was based in the pages folder. A pages folder needed to exist in the app in order to create routes.
The structure consisted on a page inside the pages folder and a index.tsx file inside of the subfolder.

For example: the directory pages/users/duca.tsx would create the route users/duca.

New routing method: AppRouter

In order to make Next route even more succinct, Vercel developed the App Router.
Now the routes look like this:

The app does not need anymore the folder pages to work. Now, it follows this structure: app/users/duca/page.tsx to generate the /users/duca route. In this example, the routing seems to be static, once always will exist just one /duca route and you can not change the user without creating or renaming the existent folder.

But, let's try a new perspective: If you want to create a dynamic route that reads the name of a user by its url and then display it on screen, you can do something like this:

Final considerations

Guillermo had successfully created a file-based routing system that I am afraid to say that works better than the one from PHP.

Now it is up to you. Based on your application, which routing system would serve you better? Page routing (the deprecated one) or the newer App Router?

Would you be affected by a system that is more needed of folders but has a succinct nomenclature or would you prefer keep using the pages folder on exchange of using fewer folders to route your app?

People Should Follow Ideas - Sig's Walkthrough

Igor Duca — Wed, 12 Jul 2023 14:50:13 +0000

Preface

Once you are trying to make an idea become true and be proud of yourself to make it work that well, you need to make right decisions and meet the right people to take your idea off of the blueprint.

In this personal article, I will explain how I took the ones that made my company be where we are today. So, we need to set some points:

What makes you unique?
Does your team believe in your idea?
You have no money. How make your company still running? During this article I will explain how I answered each one of this three questions.

What makes you unique?

Sig was born after an idea:

Software must not look into people with more experience, once making something work says more about passion than knowledge. Everyone can learn, but you can not force anyone to fall in love with your idea

In order to follow what I wanted my startup to be based on, my first colleagues and employees were my friend that I made in college and his friend that lived in other state. They were finishing a programming school course and were also looking for an opportunity as a trainee in some small tech company in Brazil.

My first steps

At first, Sig were an agency that received freelancing jobs from another companies and had its profit shared between us three. A few days after our start, I would say in less than four days, I found our first design chief, specialized on UI/UX and with a lot more work experience than anyone in the company, he was the one that created our new visual identity.

Right after having our new team composed by 3 developers and 3 designers, our first customer and partner came: an crypto bank that were developed by a carioca developer, and we needed to help him with his mobile app visual identity and design. The owner of this bank became a personal friend of mine after our first talks, and so, he helped me sketching Sig's first remuneration model.

Sig's first steps to become a Startup

After some talks, I realized that Sig needed money to survive, so if we have not had any customers in the month, I would still paying for the developers and the company infrastructure. Said that, I booked a meeting with the entire team and built our first job description model: Each one of the components of the team that were present at that moment would have a % of the company while our idea was starting to expand, and, after some time and work model changes, their % would be changed by executive roles in the company board.

CFO enters the game

I was studying finances as fast as I could, learning about how to build up strategies to make sure that my team would be paid in day and at the same time be excited for the new projects that were coming to the startup. Then, I started to look for people that could help me managing the finances of my company, since I figured out that coding were my strong point and I should keep focusing on being a leader and improving my coding skills.
At this point, I remembered that my cousin were working at an investor consultant at XP Investimentos and I invited him to be a part of the company and take care of our finances, because I would not be able to make that work all alone.

Let us start being a Startup

After we had already our Chief of Design, Chief Executive Officer and Chief Financial Officer, we could really take a step forward to start being a startup.
After our first weeks with a larger team, our first big customer appeared out of the blue: now XP was our customer. We started taking some meetings with the guys from XP and it was time to bring more developers to the game, since only three of us — me as senior and my two friends that were learning their first commercial experiencies working alongside me.

Your team must be powered by an idea

At this point, my team was with almost 10 people and I needed to think how I was supposed to make their work for my idea without paying, since our contract with XP were about to start and we did not had money to hire other developers.
That was the point that made me think about a trade-off: I am going to purpose to juniors an opportunity to be close to XP team and learn with me how to be a part of a professional tech team and be prepared to be launched at the tech market when they feel they were ready. This way, my teams would be temporary but I would be helped with those guys to make my idea become true.

SCRUM or Kanbam?

Demand were coming hot and we needed to start creating boards to make sure anyone would be lost in the process and our team potential would not be wasted without a good task management.
After making some researches and also remembering what I did in the other companies I worked, this list of needs was created:

We need a free tool
We need a good integration with github
We need to create sprints — so, this way I would be able to follow my juniors much closer and help them with their doubts
We need to create a board for each project

So, we started to use JIRA. Our sprints lasted 15 days each and we had two meetings per sprint, one to be a kickoff meeting and the other one to take a look at our progress and make a general code review of the concluded tasks.

Wait... more people are coming?

More developers started to come after me asking about our project and how they could work in exchange of experiencing how it is to work on a team of professional developers. That was the moment I realized my idea was starting to be something, a lot of people were looking forward to enter in the team and we had a lot of good feedbacks since the very beginning.

Does your team believe in your idea?

After our team started expanding in a way that would be difficult for me to take look of every developer in the company, I started our new model: shared leadership.
I booked a call with my oldest developers and asked them some questions:

Our team is much bigger that when you guys came in. Be in the team still make sense for you two? I had a positive feedback
I need you two to help me take care of everyone in the team, this is when you become team leaders, it is OK for you two? They started to be very excited with the idea of being leaders and accepted my offer. With this conversation, I had the confidence that my team believed in my idea and they were up to anything that we would need to deal in the future. After that call, both of them started to be leaders of two teams with 3 developers each.

Our big squad

At that moment of the company, our squad had almost 12 members, 9 developers and 3 designers.
That was the moment I figured out we needed to start paying our team as fast as possible or it would start shrinking and people would become unsatisfied with the startup.

First earthquake

Our first earthquake was when my design chief needed to take a break of the company since his other job was needing too much of him because of some emergencies that happened that very same week.
After the designer dropped the team, his team of two other designers also needed to take a break so they could focus on their jobs, because they did not had their leader on the team anymore.

Putting the team together

After the shock that we had, I needed to start searching for new designers, and that was when I started searching for intelligent people at twitter.
// Detect dark theme var iframe = document.getElementById('tweet-1667688885361557506-452'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1667688885361557506&theme=dark" }

In less than two weeks we already had our new design team, composed by three designers: our new chief of design — that showed to be so much excited to work with us and he helped me understanding more about UI/UX.

A new potential?

One of our new designers is a specialist in cognitive research and psychology applied to interfaces, and after she entered the team, I realized that our startup could finally take a step forward and stop producing just websites and start being a strong SaaS builder.

## You have no money. How make your company still running?
XP was starting to pay us and our team was on its bigger size — bigger that the team we have today.
That was when I started putting together a system of remuneration based on challenges and demand.

Sibelius Seraphini

I sent a twitter direct message to Sibelius asking for a position as trainee in Woovi in order to learn with my major inspiration in the brazilian developer community to improve my coding skills.
After a chit-chat he sent me some bounties that are running on Woovi so I could solve one of them and prove if I was really intelligent enough to enter his team.

Let me start looking for really good people

After collaborating with Woovi in some of their projects and starting to be a part of the team, I saw that Sig walks in the same path as Woovi: we want to be quick, inclusive and automatized.
And, this is when I put together our new business modal: Sig were starting to be a community-first DAO company.

Why a DAO?

I need my team to be as much engaged with the project as possible, and my solution to this issue was giving them the possibility to work as they want and when they wanted to, as long as they delivered the tasks on time, it would work just fine.
Alongside the DAO model, I started to make my startup as much horizontal as possible: I started writing more essays, more documentations and more papers so they could learn how I think and how I expect things to be done at Sig — this paper will also serve as a direction to them.

Community-first

Our discord community started to grow after Sibelius started to support Sig as a mentor and consultant. We merged our communities and his followers also started to look forward to learn more about my business model.
At this time, I am taking the next steps of the company: Enlarge our community and start to look for bounties where they can work on and feel like they are inside of the team and helping the company to climb through new levels.

Leaf

I think Leaf is the part of Sig that I am most proud of. Leaf is our technology to sustainability module, where we can build applications and services that helps the environment through green technology.

GAMBA

GAMBA — Grupo Ambientalista da Bahia is the first NGO that we worked with. Together we created a project to help native people of brazilian poor regions though geographic location applications that shoots massive alerts to different channels. You can learn more about the project at our website.

doebem

doebem is a fundraiser NGO that collects donations from people and then redirect them to other causes in the country, so this way our money is taken care by competent organizations. This project also was the one that helped us be recognized by Woovi and build a direct partnership between the startups.

My next steps

All I wanted to say its said during this article, I hope you can learn with my thoughts how to help your idea to become real and start being something real.
In the next few days, this is what I will working on:

Woovi and OpenPix
doebem
Growing our community
Being recognized for my ideas at Twitter
Make Sig bigger and more valuable

Why not to have meetings

Igor Duca — Mon, 10 Jul 2023 22:09:33 +0000

At Sig we spend a lot of time thinking how to not spend more time taking decisions in the future.

First things first, our company had flexible meetings and SCRUM boards with the purpose to track and be aware of when and where – in which project – our devs were working, but, with time, I figured out that this was not the answer to our concerns.

The bad part of meeting

Everyone had already worked on a company that used a lot of meetings to talk about meaningless stuff, got away from the meeting subject and started talking about bullshit or some other worse experience.

The main point of meeting someone to talk about business is: to solve a problem without misunderstandings, wasting of time and one of its major advantages: consensus.

Said that, we need to start thinking about a way to solve the problems mentioned above and spending less time and money to make it work.

A-sync first

DO NOT WAIT FOR ANYONE TO GET SHIT DONE

You need to know what will be the next step that you need to take to evolve the product you are working on. That is why all of your decision making patterns, project scope, client meeting minutes and dev specs are available on our documentation.
All you need to know is written, not spoken nor recorded.

Do you have some issue? Send a message to your squad
The business rule is too hard for you to understand? Get in touch with one of your colleagues and ask

Are you afraid of asking? Just ask!

How things work at Sig

First things fist, we avoid having meetings.
It does not imply that we NEVER have meetings, it means that we talk, think and make decisions by forums or messages.
For example: Our mainstream communication system is Discord, if a developer has a doubt, we create a thread and make conversations until his problems are solved.

Does non-verbal conversations reduces cognitive potential?

Shout-out to Sam for bringing this issue to the table.
It actually does reduces cognitive potential, and that is why we need to understand that there are moments that we need to have meetings.
Those moments are:

A new member enters the team – if he knows nothing about your company, you are obligated to introduce him to how things work at your environment;
Kickoff meetings – the initial thoughts of a project are the ones that carves how it will be in the future, so you need to humanize the decision making and Search & Discover process so everyone can get to know which problems are we going to face;
1v1 meetings – you must understand that each people had different mentalities and different approaches to daily problems, and this also implies in the way they are going to solve your problems. So, if you like things the way I do, solving problems via text, running off of meetings, you must open an exception to your colleague that is having trouble with its tasks.
Personal issues – the best part of a blazing fast company must be its humanity. If one of your team workers are having personal issues or difficulties to perform their work, take a bit of your time to understand why are things hard to them.

Conversation at Discord

Documentation

Final considerations

After all, you need to find which way do your processes work better.
Maybe depending less on people is one of them.
Do not answer twice and make sure your teams have the knowledge to take their own decisions. When you depends less on other people to solve your problems, you become more valuable.

Forem: Sig

Como coletar e dividir pagamentos com a API do Stripe

Antes de tudo: o que é o Biome?

Prefácio

Opiniões da comunidade sobre o Stripe

Não tem Pix????

Certificação de Documentos

Por trás do código da criação de uma conta de parceiro

FAQ: Tentei fazer uma cobrança com o usuário criado com o código acima e não funcionou por conta de falta de requerimentos

Tenho usuários cadastrados, como faço para receber um pagamento e repassar uma parte do pagamento para essas pessoas?

FAQ: Mas e se meus usuários não tiverem uma conta no Stripe?

Algumas outras perguntas legais:

FAQ: Quando os usuários são pagos?

FAQ: Quanto de taxa o Stripe tem?

FAQ: Funciona localmente?

Test? When to test?

Test? When to test?

Front-end tests

Back-end tests

Only test your code

When to test back-end

Finally

The origin of App Router - A Next.Js Rewind

Preface

Why Next was created?

Comparing AppRouter to PHP router

New routing method: AppRouter

Final considerations

People Should Follow Ideas - Sig's Walkthrough

Preface

What makes you unique?

My first steps

Sig's first steps to become a Startup

CFO enters the game

Let us start being a Startup

Your team must be powered by an idea

SCRUM or Kanbam?

Wait... more people are coming?

Does your team believe in your idea?

Our big squad

First earthquake

Putting the team together

A new potential?

Sibelius Seraphini

Let me start looking for really good people

Why a DAO?

Community-first

Leaf

GAMBA

doebem

My next steps

Why not to have meetings

The bad part of meeting

A-sync first

How things work at Sig

Does non-verbal conversations reduces cognitive potential?

Final considerations

Sig is a blazing fast startup, but it does not imply that we are not humans.