Inspiration
- my organization needed a third party service to handle all financial transactions on the webiste
- we want to share merch with our customers as they watch our youtube videos which I think our organization logo looks really nice
- we want to have users create an account and purchase courses in bulk from our website
- we want clients to properly pay for invoices through our application
What it does
The application starts at https://hackathon-square-6-5-23.web.app and then it redirects to store/products. Its a typical e-commerce site. The user would select a product card provide their options and either add to the cart, and continue to navigate the flow, or they can proceed to checkout or they can select AI prciing.
By selecting "Toggle AI pricing" the application would reload and then grab information about the users session such as their location and page hits and give this to the OpenAI manager which will determine what the price of all the products will be. Users can increase their chances of a better price but signing up for an account in the application and providing more personalized data. However the price for a product is narrowed down to 3 options, no ai option,anomyous user ai option, or user ai option. In my experience the ai price is usually higher so hopefully we can convert more users this way
There is support for multiple carts, but the user has to select the cart that they want to purchase from the cart panel. Once they are finished they proceed to checkout where they are greeted to a test square payment flow, and at the end would get the order Id in the screen.
If a user runs into an issue along the way then an error panel opens for them to fill out the information and I will look see solve the root of the issue. At my org we use many application auxillary tools, error monitoring is one of them
How we built it
We leveraged singleton design pattern to create SquareManager (in java or typical MVC API your recongize this as your service). then we kept methods small which only perform action that we needed from the whole Square API.
In the Angular App we used components from our component library such as wml-button, wml-tabs,wml-infinite-dropdown, and our most impressive wml-table in order to build our application which can be viewed at windmillcode.com.
We then used hashicorp secrets manager, and extracted all features related to our website into the submission in order to complete the work
Challenges we ran into
- inner_join item option data with items from the square API, it was difficult without a graphapi feature to filter all the data
- understand that a Catalog was Product I wish they named the terminology like that
- the font size on all the services in the api developer dashboard was waaaay to small
- dealing with item variation data, when we wanted to deal with item data only that was the worst. I had to know all the id's of the product before I could do anything meaningful, I would use a db or memorystore but thats violating source of truth
- Realizing we had to fork our organization website since the repo had to be public extracting all submission related features into a new application then get the application to leverage hashicorp to hide all of our secrets
- Getting to the sandbox, no UX ergonomic way to find the sandbox we overcame it by updating the url
- writing this documentation, never felt soo committed to technical writing
Accomplishments that we're proud of
- Successully leverging several square api's to manage our users, update pricing based on AI recommendations and completing users orders
- Successfully integrating an ergonomic AI feature that gives users the gamble to get a better price based on the AI recommendation, but also with enough user data may convince a person to buy at the original selling price as there is only one option, choose the AI price or chooose the list price
What we learned
- we should not use square for storing products,its missing things such as rating and a convenient way to access options
- we learned that if there is a promotion, square updates several paths in the purchase flow so everything is in sync according to the discounts
- we learned the implementing payment solution of your own can be difficult and with square webhooks 3rd parties will know to move the product along he supploy chain
- We learned in order for the AI model to be effective a user must have an account so price can be set based on the AI recommendation for every user and prices wont change as the user is going through checkout
- We learned that we need to always have currency conversion in place as it is very important *
What's next for Windmillcode site
- set up users then pricing models for users
- setup courses for users to take add bootcamp/ curriculum feature to our site, then allow people to pay for courses via a bulk purchase model
- Allow clients to create an account and send invoices to the client for each iteration of the project
- talk with the square team to setup ratings API so users can read product reviews, digital goods reviews, and service reviews


Log in or sign up for Devpost to join the conversation.