The opportunity of digital payments: Why I decided to take the step from Visa to fintechs

How are dynamic user forms created with React Hooks in Kushki? The creation of forms that will capture information from an end-user can be a difficult task because it must take many factors into account, such as: validation of fields, accessibility, maintainability, extensibility, and subject to change, to achieve it in the shortest possible time, with good practices, among others. And it can be more challenging in the case that the form that we wish to develop is extensive, complex, with numerous sections, or involving generating new forms according to user choices. In Kushki, we perform this work continuously to offer the best user experience in the use of our platform. In this article, we will tell you how we manage to solve all these difficulties for an optimal result in the development of user forms. What are the technologies and libraries to be used? React It is a library for the construction of user interfaces, which mainly offers the possibility of developing complex web applications with data that changes through time. It adapts very well to our needs to constantly collect information in our different products to update them in our platform, in addition to presenting information that continuously changes in an immediate and consistent way. Some significant characteristics it also offers are: Ease of use, reusability of graphic components, and efficiency when constructing complex interfaces starting from simpler pieces. Hooks They are a new addition to React, allowing to write applications with a functional approach, reducing the amount of code necessary, simplifying the complex components previously developed with classes, to a simpler structure, which allows to abstract and reuse logic in these functions, to achieve components easier to understand and maintain. Typescript It is a programming language that compiles JavaScript, and the reason to use it, is that JavaScript was not thought for the creation of large and complex systems, but for the implementation of dynamic functionalities to a website; that's why Typescript becomes that fundamental piece for JavaScript to be highly scalable, maintaining a great level of flexibility. When adding strict typing, we achieve a more robust and solid code, allowing our applications to have fewer errors, being easier to test, and greater maintainability through time, so our adoption of this programming language is very high in our set of applications. React Hook Form It is a library for the construction of forms with React, created with the objective of achieving greater performance and ease when implementing and validating forms. Some reasons why it is recommended to use React Hook Form are: It is intuitive, allowing the developer to use a single function responsible for abstracting the form's entire handling logic. It uses Hooks, getting a neater code when reusing functions responsible for the management of the different parts of the interface. It offers good performance, since it minimizes the number of re-rendering when using Hooks, and isolation from the form fields at the time their status changes. It is light, without any dependence that affects its size when downloading it. It has built-in validation; it is in charge of the control of errors that happen when entering erroneous data in the fields in the form. Integration with Typescript, to maintain a strict typing of the fields that must be collected from the user. With some disadvantages: It requires the use of functional components, so it is incompatible with components made with classes. The use of Hooks, as it is a new feature in React, can assume an additional time to learn to use them correctly. How should it be implemented? React Hook Form is the library used for the construction of the form. In this section, we will focus on describing the development process to carry it out, together with technical explanations that allows to better understand how its adoption can proceed in a project. 1. Define strict form typing When specifying an interface with the fields the form will have, allows us to maintain an understanding in the working team, providing error detection in compilation time. Below we have an implementation of a simple form interface, that will collect data from a customer. typescript interface IForm { clientName: string; clientDetails: { email: string; documentType: string; documentNumber: string; } } 2. Initializes the form with the function useForm() This function returns the methods with which interaction with the API library will take place; it receives a generic typing with the interface that we previously defined, to maintain a strict typing of the form, and we also specified that field validation is with the "onBlur" mode, that is to say, at the moment the element loses the user approach. typescript export const FormComponent: React.FC = () => { const form = useForm <IForm> ({ mode: "onBlur", }); } 3. Wraps the sections of the form with the FormProvider component This component offered by the library, makes use of React's Context API, which solves the problem of passing "props" at each level of the component tree, this is specifically useful in complex forms with multiple nested sections. For the implementation, we have defined that the form will have 2 nested sections, the first will capture the customer name, and the second the customer details. In addition to specifying the "handleSubmitForm" function, which will be responsible for processing the data once the user makes a sending of the form. const handleSubmitForm: SubmitHandler= async (formData) => { // Save fields received from the form }; return ( <ClientNameSection/> <ClientDetailsSection/> <Button style={{ margin: 20 }} variant="contained" color="primary" disableElevation onClick={form.handleSubmit(handleSubmitForm)} > Save </Button> </FormProvider> ); }; `` **4.** Use the [ConnectForm](https://react-hook-form.com/advanced-usage#ConnectForm) component for nested sections of the form It is very common to develop forms that have deeply nested sections within the component tree; in this case, the ConnectForm component is very well integrated, allowing for wrapping the nested component with the library methods without the need to obtain them from the "props." Here we use React's ["renderProps"](https://es.reactjs.org/docs/render-props.html#gatsby-focus-wrapper) technique, to reuse this component in multiple parts of the code. ```typescript const ConnectForm =({ children, }: { children: (form: UseFormMethods) => JSX.Element; }) => { const formMethods = useFormContext(); return children({ ..formMethods, }); }; ``` **5.** In the nested sections of the form, it uses the [TypedController component](https://react-hook-form.com/advanced-usage#StrictlyTyped) This library component will be in charge of registering the element in the form status to track user entries. We will use the "Textfield" component of the [Material-UI](https://material-ui.com/es/) library, which is wrapped within the TypedController in its "render" attribute. Two nested sections, called "ClientNameSection" and "ClientDetailsSection" will be created: ```typescript export const ClientNameSection: React.FC = () => { return ( <ConnectForm\> {({ control, errors }) => { const TypedController = useTypedController({ control: control, }); return ( <div style={{ padding: 20 }}> <TypedController name={"clientName"} rules={{ required: true }} render={(props) => ( <TextField {...props} label="Customer name" variant="outlined" error={!! errors.clientName} required fullWidth margin="normal" helperText={ !! errors.clientName && "Required field" } /> ) } /> </div> ); }} </ConnectForm> typescript export const ClientDetailsSection: React.FC = () => { return ( <ConnectForm\> {({ control, errors }) => { const TypedController = useTypedController({ control: control, }); return ( <div style={{ padding: 20 }}> <div> <Typography variant="h6" color="primary"> Customer details </Typography> <TypedController name={["clientDetails", "email"]} rules={{ required: true, pattern: emailPattern }} render={(props) => ( <TextField {...props} label="email" variant="outlined" error={!! errors.clientDetails?.email} required fullWidth margin="normal" helperText={ !! errors.clientDetails?.email && "Invalid email" } /> ) } /> </div> <div style={{ display: "flex" }}> <div style={{ width: "50%", marginRight: 10 }}> <FormControl variant="outlined" fullWidth margin="normal" > <InputLabel>Type of document</InputLabel> <TypedController name={["clientDetails", "documentType"]} defaultValue={"CI"} render={(props) => ( <Select {...props} label="Type of document"> <MenuItem key="CI" value="CI"> {"CI"} </MenuItem> <MenuItem key="RUC" value="RUC"> {"RUC"} </MenuItem> <MenuItem key="PAS" value="PAS"> {"PAS"} </MenuItem> </Select> ) } /> </FormControl> </div> <div style={{ width: "50%", marginLeft: 10 }} > <TypedController name={["clientDetails", "documentNumber"]} render={(props) => <TextField {...props} id="documentNumber" label="Document number" variant="outlined" error={!! errors.clientDetails?.documentNumber} fullWidth margin="normal" /> ) } /> </div> </div> </div> ); }} </ConnectForm> ); }; `` In addition, the "TypedController" component maintains a strict typing of the form, as we observe in the following code section, when placing a wrong argument in the "name" attribute, the compiler detects an error in running time. **** We can see how it would be visualized in the browser with the 2 nested sections of the form.  **Observe** the changes in the form fields with the [useWatch()](https://react-hook-form.com/api#useWatch) function In the development phase, the need to perform actions according to user entries, for example, to conditionally render, or to validate data in real-time; the useWatch() function, allows us to be listening to the changes of a field of the form, and to act according to it. In our implementation, the function can be used to validate if the "email" field exists at the moment the user enters it in the form: ```typescript export const ClientDetailsSection: React.FC = () => { return ( <ConnectForm\> {({ control, errors }) => { const TypedController = useTypedController({ control: control, }); const email = useWatch({ name: "email" }) as string; useEffect(() => { // Verificar if email already exists }, [email]); ... Send the values of the form with the handleSubmit() function This function will pass the collected data, once a successful validation is performed, to be able to save the form data. const handleSubmitForm: SubmitHandler < IForm > = async (formData) => { // Save fields received from the form }; ... Prior to the invocation of the function, a validation of the fields is performed, as we can observe in the following image, the library is in charge of detecting the errors and updating them in the interface. Finally, with the full fields, we can see how they will be received in the function to be able to process them: json { "clientName": "John Doe", "clientDetails": { "email": "jhon.doe@test.com", "documentType": "CI", "documentNumber": "1764537289" } } What are our results? Currently, in Kushki, this implementation has allowed us to: Build forms in a more efficient way by reducing the written code. Extensive and complex forms are developed from simple components, and the responsibility of validating and controlling them is delegated to the library. Having a standardization in developing them, to achieve better maintainability of the code throughout time within the working team. Achieve performance improvements by minimizing the number of renderings that the browser must make. Detecting errors before the code is in production thanks to the strict typing of the form. Also, it is important to consider these observations before adapting it in a project. There will be an additional learning time until the working team properly implements the library. It can be an excessive solution if the form to be developed is simple and with a few elements. The library has fewer community and collaborators than other older libraries in the market, such as Formik or Redux Form. You can see a complete comparison with these libraries in this link. Finally, I hope that this article has been of help in the project that you are carrying out or planning to do, and that you can adopt this way of constructing forms, so that you have an optimal and efficient development process.

From startup to scaleup: how an entrepreneurial mindset helped me scale a business The last time I wrote, was on the big step we took in our entrepreneurial journey: Selling our startup, and start walking along with a regional and much larger payment gateway. But, before that, we already had some time in the game with different businesses, some successful and others not much. The mentality and resilience generated in all these years of entrepreneurship struggle, has served the team and me to be able to flow in highly changing, dynamic, and challenging environments. Everything has happened fast with a bit of an impact, but if there is something we have learned, it is that it is very different from creating a local startup than scaling a regional business. One does not happen without the help of the other: The entrepreneur's path gives you the tools, and most importantly, the mentality to make a company grow quickly. The basics A startup is a small institution or company driven by a basic principle: Solving unsatisfied needs in society. And not by chance, because these natural needs are the ones that are precisely generated, because big institutions are not able to adapt fast enough to the changes we live on from day to day. Additionally, startups use new technologies, and their differentiating element is their ability to move fast. Which is the great objective of startups? Finding a market fit product, that is, a product that solves a market problem. This is when the turning point comes. It is that moment when the market needs more of your product than your small company can provide, where the first big Black Swan has generated: An unpredictable event that is out of normal. What does all this mean? The startup takes off, and becomes what many call a scaleup or high-growth firm. A scaleup? Surely, you are wondering what that concept is. A scaleup is an institution that has growth as its only objective. According to organizations such as the OECD or Endeavor, these types of companies are the ones that really generate impact in countries, and improve economies by providing numerous jobs. They are defined as those having at least 10 formal workers, who have experienced a cumulative growth rate of at least 72% for three years in a row (or a 20% average annual rate). Scaleups use their product and their already validated business model, to grab the largest share in the market. But they have something of a startup too, since they seek to maintain agility to be able to adapt to a sharp growth as well as possible. They are what Google, Amazon, Tesla, and many more were some time ago. Ambitious in their essence, they want to break barriers and tend to monopolies. For that, they use financing, technology and human capital. Everything to maintain exponential growth. It sounds like chaos and, to a certain extent, it is. But it is good chaos, of the kind that achieves genuine solutions to dynamic problems, which are becoming larger and bigger. It is the type of chaos that takes the best of some, inviting others to adapt or take a step to the side. And there are multiple variables in this stage: We work to systematize the processes that were made manually in the startup phase, in scaling sales to increase our reach, in strengthening our product to respond to new demand, in structuring the culture to attract the right talent, and in increasing the sense of belonging of new people joining the team. It is a moment of change of priorities, where the question is moving from how we obtain more resources (money, advisors, talent), to how we can use those resources to generate greater impact. Scaling without dying in the process To grow this fast, the institution has to achieve adaptation in good way. In a dynamic and fast environment like this, that is achieved by delivering a sense of belonging to the people we work with. It is important to generate autonomy because, along with growth, roles are changing, and responsibilities increase. There is a point where you welcome new partners every week, and things out of our control happen and happen. The clearest example is the Coronavirus pandemic. It is something that needs to be dealt with, and fast. There is disorder and there is chaos, but of the type that generates results, motivated individuals and, more importantly, those happy with their work. As in everything, there are good days and bad days, that is what makes it exciting. Founders are no longer the only ones that create dynamics and make decisions. In that growth, there are several validated models to achieve market participation and continue developing a scalable product. But independent of the strategy, there are essential aspects that need to be addressed: First, the key point to be able to grow: Financing. Scaleups use external resources to leverage their exponential scaling. If the company decides not to have external financing, it slows its growth. There is nothing wrong about it, only that it would not be a Scaleup. Second, culture. As scaling happens quickly and challenges are increasing, it is important to maintain the soul of the startup you once were. If there is no clarity of that, it is easy that your values and objectives start blurring in the way, and that your decisions are inconsistent with that. Third, contracts, one of the biggest challenges. It is key to have resilient and dynamic people, that have the ability to adapt to changing environments. This is not for everyone, and that is fine; one must only know how to recognize it when expanding the teams. Fourth, chaos management. A little chaos is positive, it gives dynamism to the working environment, and helps to continue progressing. The important point, is to have it under control, and develop tools that allow each to do their work in the best way, even in chaotic moments. And finally, there are many questions on which I do not have the answer. Nobody is born knowing how to scale a business. Questions are thousands, and they are pilling up in the way, but always with a clear objective: Achieving cohesion in the team to release its potential, thus achieving the greatest impact possible, helping our region to develop. If you like traditional businesses, the structure and the known, working in a scaleup is not for you; but if challenges call you, changing environments encourage you, and you flow in change, I cannot less but recommend you working in a scaleup, that will fill your life with emotion and innovation.

This is how countries in the region are progressing with their respective Fintech Laws It is not rare that, once the creation of companies starts booming in some industry, a law to regulate and control its activities emerges. The case of fintech is no exception: These companies are taking the lead of the race towards the digital economy, mixing finances with technology, and bringing financial products to all people. So much, that the history of fintech has no match in the world: There is no market that has grown as fast as this in the technological industry records, reaching an investment of more than USD 110 billion globally only in 2018. That same year, the industry had 112.000 created fintech companies. Although some ensure that regulation can be a booster for certain industries, others warn that care must be put when laws are very restrictive and do not allow growth. In regulation worldwide, the scope is broad, and there are approximately 12 nations that have legislation in these areas. Countries such as China and the United Kingdom have chosen to create new laws that regulate the use of these technologies in their financial systems. In the United States, instead, they have decided to act reactively, that is to say, modifying rules that already exist. What happens in our region? As in a school grade of teenagers, there are students of all heights in Latin America. Some, like Mexico and Brazil, are more advanced than others. In fact, these two countries are the ones that, almost competing, enacted fintech regulations at the same time. Nonetheless, experts point out that Mexico is the only country that has a comprehensive and non-biased regulation. In March 2018, Brazilian fintech regulation introduced two new types of financial institutions through electronic platforms: direct credit companies and peer loan companies. In April 2019, regulation included the implementation of an open financial system, which is known as “open banking”. That regulated environment has proven to be a boost for investment: According to KPMG, Brazil registered a record investment in the industry of USD $555 million in 2018. Mexico was also one of the most precocious ones: Since March 2018 they have a Fintech Comprehensive Law, although it only entered into force in September of that same year. This, although several fintech companies already existed in the country, which had until September 2019 to request their official authorization under the new law. With the pandemic, the National Banking and Securities Commission (CNBV) suspended authorization processes and left 80 fintechs on the waitlist. But, in August 2020, the process was resumed, this time in a 100% digital way. The law itself includes the regulation of four figures: Crowdfunding, cryptocurrencies, APIs and regulation sandbox. Another of the most advanced, although not yet having comprehensive legislation, is Colombia. Its regulation is in charge of the Ministry of Finance, through the Financial Regulation Unit (URF) and also by the Financial Superintendence. Up to now, they have taken legislative steps to give entry to electronic deposits, to allow financial crowdfunding under certain rules, and to allow the arrival of the robo-advisor to the consumer. Also, the Financial Superintendence has created a regulatory sandbox. What does this mean? A sandbox is an experimental space, which allows certain companies to temporarily operate in a legal manner, with the idea that they test their solutions in an environment approved by the controllers. No specific law In Ecuador, although a positive view from the Banking Superintendence towards fintechs has been noted, there is not yet a law that is precisely focused on these companies. In 2017, the Monetary and Financial Policy and Regulation Board issued the general rule that regulates the definition, qualification and actions of auxiliary services of the financial sectors. That gave some fintech companies an opportunity to regularize and obtain authorization in an official way. Since there is no specific regulation, fintechs must adhere to the laws applicable to all companies of a financial nature. There are two sectors: The private financial sector (banks, financial services and auxiliary services entities), and the popular and solidarity financial sector (savings and credit cooperatives, communal banks, savings and loans associations and centralized funds). Unlike their neighbors, they do not have a regulatory sandbox yet. It is this lack of specific laws which precisely slows fintech's processes, which have been forced to adhere to financial laws that often do not apply to them. A little further behind Both Chile and Peru have demonstrated their intention to advance in fintech legislations. That is why both countries have a high activity in the industry. In Chile, the last measurement of Finnovista's Fintech Radar of Chile, had 112 fintech companies in mid-2019. In Peru, the growth these types of companies have had, exceeds almost all of its neighbors, registering a progress rate of 256% between 2017 and 2018. In May 2019, the Peruvian Government sent to the Congress a Crowdfunding bill to offer greater security to investors and consumer protection. The bill states that collective financing platforms can only be managed by companies based in Peru, and authorized by the SMV securities regulator. For now, it is that fintech side the one that has regulation in the Peruvian nation. A little lower in the continent, Chile has been discussing the topic of regulating fintech companies. In April of this year, the Government announced that the Fintech Bill would be admitted to Congress in mid-2020, in a process that would be led by the Ministry of Finance. However, with the impact of the pandemic, little has happened in that regard, and the Government has pointed out that the matter is stalled. “They told us that the matter had been put on hold, since it is not part of the list of most urgent priorities,” says Ángel Sierra, executive director of the Fintech Companies Association of Chile (FinteChile). A win-win For many, fintech legislation can be beneficial to governments. The truth is that, according to international experience, it has been shown that good regulation can be a win-win for all. A Fintech Law which is well-developed in each country: - Guarantees and promotes good functioning of the industry - Protects users of these services - Fosters investment, since for investors it is safer to risk funds in a country where there is a strong regulatory framework. If something has been made clear by the pandemic, is an urgent need to move towards a digital economy. Companies such as dLocal, Rappi and Kushki are breaking those barriers, where regulation plays an important role: It can make them take off or brake them hard. The case of Mexico is a positive example: Two years after the creation of its Fintech Law, the country has registered a record investment of almost USD 1.3 billion in 2020, that is, 16% of regional investment. In addition, it must not be forgotten that an industry that grows at this pace is a strong generator of qualified employment and labor dynamism, which something that, with the ravages of the pandemic, and more than 41 million unemployed people in the region, is more relevant than ever. As Kushki, we want to push the evolution of the fintech industry. That is why we hope that regulation in Latin America will accompany the development of all companies, which, as we do, seek to break paradigms, bring financial services, and ease the lives of all people who live in one of the least banked regions up to this day.