A full-stack PayPal integration
July 15, 2022
Users can now purchase P.F. Engineering’s popular DIY build plans via a modern shopping cart. This full-stack application, meticulously crafted for my client, seamlessly integrates Go with the PayPal REST API. The performant and intuitive front end is built from vanilla TypeScript, powered by a custom state manager and JSX-rendering pragma functions.
Project Highlights
- Client: P.F. Engineering
- Scope: Full-stack development, shopping cart
- Website
![P.F. Engineering's online shopping cart, 2022 July](https://jacobbenison.com/processed_images/shopping-cart-pf-engineering.1554128619b9882d.jpg)
Primarily, the front-end is a single-page application. Two entities, however, operate outside of the cart page. One is a button component in the site’s menu bar. The other is a script that finds all “Add to Cart” buttons on any given page and binds each with an event listener.
My client’s customers can now combine items into a single order, select available shipping options, and complete their transactions in a secure PayPal Checkout window.
![A closeup of one of the site's 'Add to Cart' buttons](https://jacobbenison.com/processed_images/frontend-ui-development-add-to-cart.f6c1bcc805c18c04.jpg)
![A closeup of the shopping cart button in the navigation menu of the website](https://jacobbenison.com/processed_images/frontend-ui-shopping-cart-menu.b3a438822a28bb97.jpg)
![A screenshot of the cart page of pf-engineering.com](https://jacobbenison.com/processed_images/frontend-ui-shopping-cart.c55f0f9bf77b6a95.jpg)
![PayPal pop-up that is launched at checkout](https://jacobbenison.com/processed_images/frontend-ui-typescript-shopping-cart-checkout.9d7fefeea36c3f34.jpg)