在您的应用程序中管理付款:设置网站

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中的当前数据结构:

Image for post

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中创建)
Image for post
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
我为查找这些博客的库存图片而烦恼。 当我搜索“收藏”时出现了这个。 它确实让我想起了NoSQL数据库。 有点拉伸,但我喜欢! 资源

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.

利用客户可用的项目信息,他们可以进行选择并签出。

Image for post
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!

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:

概述了店面的功能之后,您就可以构建项目的这一部分了! 以下是一些后续步骤:

翻译自: https://medium.com/google-cloud/managing-payments-in-your-app-setting-up-the-website-fe8df68e8883

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值