Adding cart and checkout process with Stripe

We have added many features to our application but we are missing the most important one, our core feature, the possibility to order and complete the payment. This type of process is very delicate because money, sensitive data regarding credit cards, and personal information are involved. This is why it is best to use an external service to avoid exposing our users to security problems. Stripe is a service that allows you to carry out financial operations and is one of the best on the market for simplicity and truly excellent documentation. It offers an SDK for almost all languages and of course also for Javascript. The first step to perform is to open an account on https://stripe.com and retrieve the API KEYS Publishable key and Secret key via the Dashboard https://dashboard.stripe.com/apikeys, these will be used to perform integration with the service.

FILE: .env

VITE_STRIPE_PUBLISHABLE_KEY=...

We also need to install the JavaScript SDKs @stripe/stripe-js & stripe to be able to use the service APIs and proceed with the integration as best as possible.

pnpm install @stripe/stripe-js stripe

Add products to cart#

In the previous chapter we got to the point of adding items to the cart, let's go through the logic it implements. Let's create a file that contains the types related to our global state.

FILE: src/utils/store.ts

export type CartProduct = Product & {

Let's create a global state in our layout file

FILE: src/routes/layout.tsx

import { NavbarTop } from "~/components/NavbarTop";

We created a global state with useContextProvider to be able to collect the items added to the cart and we also created a button to trigger the checkout process in our NavbarTop component.

FILE: src/components/NavbarTop/index.tsx

export const getCartQuantity = (cart: Store["cart"]) =>