Buy Now Cart

The Buy Now cart is intended to be both a payment portal as well as an internal pricing API to support Keap’s sales team, partners, operation team and engineering team.

The main role of the cart is to allow customers to purchase Keap’s software. It allows for Keap’s sales team to generate unique links to configure the cart for multiple deals they’re working on.

Along side Keap’s sales team it also supports Keap’s vast partner network. It allows partners and sales teams, to create unique one to one links or one to many links to sell Keap’s software. The cart handles all attribution tracking as well as estimate generation.

One of the biggest challenges of this project is data management and performance. The subscription management system Keap uses to manage all pricing, customers and subscriptions has a complex and scattered API. This means any time we wanted to get the total price of a configured package, we would need to pull all the data from multiple API requests and piece them together. This of course is not ideal as the requests would take too long between each. To solve this we implemented a caching system that would update the cache in real time when changes were made to the subscription management system.

The backend utilizes Laravel, Redis, and Postgres. We chose Laravel because of how easy it is to quickly build as well as onboard other developers. One of the great things about Laravel is how easy it is to use their queueing interface. It allowed us to easily send jobs, like recaching the pricing data, to a job handler and not worry about the load being put on the main process. Speaking of caching, we use Redis to handle all our caching. It’s super fast and easy to use, especially with Laravel’s cache facade.

For the database, Postgres, we use it to store all the cart configurations. The buy now cart has an API endpoint that allows authorized agents to create a unique slug. The unique slug is used as an identifier to get all the config data to hydrate the cart’s frontend.

On the frontend we use Vue.js and Tailwind CSS. The frontend communicated with the backend all via API endpoints. When the cart loads we request the configuration for that link. Once the data is returned we hydrate the app with all the correct configurations.

Using Vue in combination with Tailwind allows the cart to quickly adapt to changing business requirements without a long turn around time. It also allows for easy developer onboarding as this tech combination is a wildly used combination.

The cart is currently in production being used by both partners and direct sales reps at Keap. While the cart no longer allows users to configure the package themselves it still allows the user to review their order and purchase the software. You can check it out for yourself: https://buy.keap.com/