Next.js接入stripe订阅详细教程

前言

之前申请stripe成功了，现在需要将stripe接入到我的网站中。于是我在油管找到了一个视频，并且跟着做了下来，现在把整个细节分享一下，主要是给开发者也就是程序员看的。原视频地址是https://www.youtube.com/watch?v=R9PwoQwVpPQ

另外，想开发出海产品但还没有stripe账户的朋友可以参考我这篇【公众号】独立开发者申请英国公司开通stripe一条龙教程。

效果演示

访问https://stripe-subscriptions-jet.vercel.app

这是我已经完成的演示网站，已经部署到了vercel。

点击登录，刚登录以后是这样的：

然后我们购买，支付

卡号随便填，因为这里是测试模式

支付完成以后回到原来的页面再刷新，可以看到界面已经显示我是高级用户了。这个流程就是今天这篇文章要实现的效果。

技术栈介绍

视频作者提供了代码，地址是https://github.com/burakorkmez/stripe-subscriptions

有两个分支，master和starter-code。master是已经改完的代码，starter-code是视频中刚开始的代码。我就直接用的master分支，把一些配置改成自己的就能直接运行了。

用户认证：kinde

数据库：mongodb

数据库orm: prisma

设置mongodb

首先你需要到https://www.mongodb.com注册一个账号，这是免费的。

然后创建一个新项目。

创建完项目以后点击create a cluster

选择免费套餐，地区选择一个离你近一点的，我选的香港。然后点击创建。

把这个用户对应的密码复制下来，粘贴到一个地方，一会儿会用到。然后点击Create Database User创建一个用户。

接着点击Drivers，选择node.js，复制下面的连接地址，同样粘贴到一个地方，一会儿有用。如果连接地址中的密码没有显示而是类似mongodb+srv://zfyoung799699:<db_password>@xxx/?retryWrites=true&w=majority&appName=Cluster0这种的话，那就用到刚才记下的密码了，把<db_password>替换成刚才的密码即可。

然后需要把这个地址修改一下，在.net/后面加上stripe_db，这是数据库名称。比如原来的是mongodb+srv://zfyoung799699:<db_password>@xxx/?retryWrites=true&w=majority&appName=Cluster0，改完以后就变成mongodb+srv://zfyoung799699:<db_password>@xxx/stripe_db?retryWrites=true&w=majority&appName=Cluster0

另外还有一步是设置网络访问权限。点击Network Access，点击edit，选择ALLOW ACCESS FROM ANYWHERE，然后点击确定。如果不这样设置一下的话，一会儿本地或者vercel都是连不上这个数据库的。

设置prisma

在终端中执行：

bash

npx prisma init

这个命令将会创建一个prisma的文件夹和一个.evn的环境变量文件。将刚才的mongodb的连接地址粘贴进去：

DATABASE_URL=mongodb+srv://zfyoung799699:xxx/stripe_db?retryWrites=true&w=majority&appName=Cluster0

然后编辑prisma/schema.prisma这个文件，修改配置，定义两个model，User和Subscription，分别对应两张表，用户表和订阅信息表。具体的我就不写出来了，详细的看代码吧。

然后在终端执行：

bash

npx prisma db push

这个命令会将刚才定义的数据结构同步到mongodb，并建表

接着创建一个prisma.ts文件，这里不细讲了，可以看原视频或者代码

使用kinde进行身份验证

首先你需要到https://kinde.com注册一个账号，这是免费的。然后登录。

点击switch business

add business

创建一个business，名称自己定义，不能和别人的名称重复

点击进入这个新创建的business

一步一步按照截图来走

登录方式选择email和google

选择Connect

复制环境变量，粘贴到.env文件中

接着去创建一个接口，src/app/api/auth/[kindeAuth]/route.ts

修改一下Navbar.tsx的代码

现在点击登录按钮你会发现你可以登录了，并且在kinde的后台中可以看到登录的用户

理解用户认证回调

这个图表示了用户的登录认证逻辑，首先点击登录按钮，kinde处理完登录以后会跳转到/auth/callback页面，在这个页面进行是否是新用户的判断，然后跳转到主页。所以接下来我们要去创建一个auth/callback的中转页。

auth/callback/page.tsx的最终代码如下

同时需要修改.env中的环境变量配置

这时候再登录，你可以在mongodb中看到登录的用户数据。

stripe订阅设置

打开你的stripe后台，把测试模式打开。因为我们是在开发阶段，所以就用测试模式就好了。等调试完成以后，再把一些环境变量换成生产环境的就可以了。

点击产品目录，进入之后点击创建产品

填写产品名称、金额，然后点击添加产品

接着我们点击刚刚创建好的产品

点击三个小点，点击创建支付链接

勾选允许商家客户提供税号

编辑一下支付成功以后显示的提示，按你自己的意愿来填就可以了

最后点击创建链接

复制这个支付链接，粘贴到.env文件中

然后我们回到产品目录，继续创建年度的价格，操作和刚才一样

然后还要复制price id，粘贴到.env文件

编辑Pricing.tsx，设置paymentLink:

这时候你点击pricing中的Buy Now按钮，就可以跳转到支付页面发起支付了。

然后这里有个问题，就是如果是未登录的用户，点击了这个购买按钮以后，需要先跳转登录。视频作者是这样处理的。将/api/auth/login作为跳转链接，这个接口现在由kinde来接管。如果未登录就会跳转kinde的登录，然后跳到/auth/callback页面，这是在.env文件里配置过的。在/auth/callback这个页面我们进行逻辑处理，是登录后跳转主页还是登录后跳转checkout页面。具体我就不细讲了，可以自己看一下代码。