It's tedious to write a payment form…

As developers we always think about what is the code necessary to build a payment gateway, what service we are going to use and how to present it to the end customer.

What it does

React-square-web-payments-sdk is a library that will help developers easily build payment forms by passing only some parameters and having a Square account.

How we built it

We searched for all the libraries that Square have, and found one called @square/web-sdk that has all the functionality about Web Payments SDK that we need.

Starting from the fact that the react-square-payment-form was deprecated, we created a library that looks almost like the old library but with all the new core functionality from Square. We set up our library with GitHub Actions and NPM to have the ability to use the CI/CD correctly.

Challenges we ran into

One of the biggest challenges was to create the code with a real developer experience and easy to use. We used as a reference the old project react-square-payment-form.

The second challenge was to use all the new features of React and create some views, error consoles and more, to give the developer/user all the necessary information about what he is doing.

Also as a third challenge was to create an easy to customize and create styles for every component, so with this library we ship a CSS-in-JS really tiny in kb so the user can change all the styles that they want without compromising performance

Accomplishments that we're proud of

Create our first open source project that will be maintained not only for us, but also for the community that can make new features for the library. Besides, we made a public tool, so every person can watch and learn how the package is builded and how it works from the roots.

What we learned

We have two years working with React and a lot more working with Square, and even with that experience, we learned new things about how to integrate these two great technologies into one, in order to create a smooth, stylish and fast payment form for the community.

What's next for React Square web payments SDK

Loading states and errors for Credit/Debit Card button. Loading state for the form in general so we avoid clicking a lot in all the components. Bigger and better documentation to understand how can be integrated with React, NextJS and Gatsby (and all the frameworks based on React). Improve the performance of the library, even more, using vanilla-store and hooks.

Share this project: