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.
到目前为止，我们一直在构建商店的后端组件。 我认为，这些设置和实施步骤是最重要的！ 但是，拥有一个前端接口无疑会更加令人兴奋。 由于我们已经建立了坚实的基础，因此对于该网站实际上没有什么可做的。 我们关注的两个主要步骤是获取最新产品并完成Stripe Checkout流程 。
取得最新产品 (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.
美国袜子市场网站从Cloud Firestore获取产品信息。 这样可确保随着库存变化和新产品的发布，客户将看到最新信息。
Use Cloud Firestore to download up-to-date info on products
使用Cloud Firestore下载有关产品的最新信息
This graphic shows the current data structure in Cloud Firestore:
此图显示了Cloud Firestore中的当前数据结构：
There is a collection called socks which has four documents. Each document’s key is the name of the associated product.
有一个名为socks的集合，其中包含四个文档。 每个文档的密钥是关联产品的名称。
The documents have several fields:
这些文档有几个字段：
- description 描述
- an array of images 图像阵列
- name 名称
- price 价钱
- product SKU (created in Stripe) 产品SKU(在Stripe中创建)
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.
由于Cloud Firestore是NoSQL数据库，因此我们不必坚持这种结构。 随着商店的增长，业务需求可能会改变。 我们可以轻松地向文档中添加新字段，向袜子集合中添加新文档，以及添加新集合。 也许有一天我们会扩展到围巾和帽子的样式！ 我们可以为这些类别中的每个类别添加新的收藏。
With item information available to customers, they can make their selections and check them out.
利用客户可用的项目信息，他们可以进行选择并签出。
发起结帐 (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!
Stripe的Checkout API包含重定向到支付门户的功能。 这意味着我们不必编写这个组件，我绝对喜欢！ 通过预构建的UI节省时间是整洁的，但是使用此UI的真正好处在于，它免除了我们管理客户付款信息安全性的麻烦。 将安全性交给一家每天整天专注于付款的公司，我感觉很好！
The Stripe Checkout prebuilt UI takes care of some security concerns when implementing payment processing
在实施付款处理时，Stripe Checkout预先构建的UI解决了一些安全问题
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.
要启动Stripe Checkout流程，我们首先调用Cloud Run端点以创建付款意向会话。 我们在呼叫响应中获取有关会话的数据。 一旦我们将数据传递给Stripe，付款处理就在他们手中。 完成后，客户将被重定向到我们选择的页面。
下一步 (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
整理Stripe文档
Dig into Cloud Firestore
Check out the next blog post
查看下一篇博客文章
翻译自: https://medium.com/google-cloud/managing-payments-in-your-app-setting-up-the-website-fe8df68e8883
9281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
