对于电子商务网站来说,让人们给你钱是非常重要的。Stripe 有一个快速结账流程,我们可以使用无服务器功能(如Netlify Functions)将其插入到我们现有的应用程序中。我们不必编写整个交易流程的代码,而是可以向Stripe发送有关用户想要购买的产品的信息,然后让他们处理其余的事情。文字只能做到这么多,所以让我们编写代码来解决这个问题。
首先,今天的最终产品将是这样的:一个带有“立即购买”按钮 委内瑞拉电报号码数据库 的简单产品页面,以及用户用于购买的 Stripe 结账页面。以下是我们在本文中要做的事情:
从列出一些示例产品的 Angular 项目开始
在项目环境变量中设置 Stripe 凭证
创建一个与 Stripe API 交互的 Netlify 函数
监听“立即购买”按钮的点击以触发 Netlify 功能,然后
创建一个加载 Stripe 的函数,将用户重定向到结帐页面并显示所需的信息
所有代码都可以在这个 repo 中找到,如果您想亲自尝试,请单击下面的按钮将其部署到 Netlify。
部署到 Netlify
好的,让我们开始编码。
从 Angular 项目开始
为了直接开始,我们将使用ng newAngular CLI 中的命令来搭建项目。由于我们今天的重点是 Stripe 而不是项目创建,因此我将列出制作 UI 的步骤。单击每行上的小章鱼表情符号) 可查看每个步骤的代码更改提交。