Managing payments in your app: setting up the website

We have an inventory ready to go. Let’s make a website!

So far, we’ve been building the backend components of our store. In my opinion, those setup and implementation steps are the most important! But it’s certainly more exciting to have a frontend to interface with. Thanks to the strong foundation we’ve built, there actually isn’t much to do for the website. The two main steps we’re focusing on are fetching the latest products and completing the Stripe Checkout process.

Fetch the latest products

The American Sock Market website fetches product information from Cloud Firestore. This ensures that, as inventory changes and new products are released, customers will see up-to-date information.

Use Cloud Firestore to download up-to-date info on products

This graphic shows the current data structure in Cloud Firestore:

There is a collection called socks which has four documents. Each document’s key is the name of the associated product.

The documents have several fields:

• description
• an array of images
• name
• price
• product SKU (created in Stripe)

I get a kick out of finding stock images for these blogs. This one came up when I searched for “collection”. It does remind me a bit of a NoSQL database. A bit of a stretch, but I like it! Source

Since Cloud Firestore is a NoSQL database, we don’t have to stick with this structure. As the store grows, the needs of the business are likely to change. We can easily add new fields to documents, add new documents to the socks collection, and add new collections. Maybe one day we’ll expand into patterns for scarves and hats! We can include new collections for each of these categories going forward.

With item information available to customers, they can make their selections and check them out.

Here’s an image that was tagged “database”. Not bad! You should see some of the ones that come up though. So random. Source

Initiate Checkout

Stripe’s Checkout API includes functionality to redirect to a payment portal. This means that we don’t have to code this component, which I absolutely love! Saving time through a prebuilt UI is neat, but the real draw of using this UI is that it saves us the worry of managing the security of customers’ payment information. I feel good putting the security in the hands of a company that focuses on payments all day every day!

The Stripe Checkout prebuilt UI takes care of some security concerns when implementing payment processing

To start the Stripe Checkout process, we first make a call to our Cloud Run endpoint to create a payment intent session. We get back data about the session in the call response. Once we pass the data to Stripe, the payment processing is in their hands. Once complete, customers will be redirected to the page of our choice.

Next Steps

With the functionality of the storefront outlined, you’re ready to build this part of the project! Here are some next steps to take:

• Scope out the Stripe documentation
• Dig into Cloud Firestore
• Check out the next blog post