DEV Community
·
如何在Next.js 14/15中轻松集成RazorPay
💡
原文英文，约900词，阅读约需4分钟。
📝
内容提要
在Next.js项目中集成Razorpay支付，首先安装Node.js SDK和相关包，获取并存储API密钥于.env文件中。创建API路由以生成订单，并实现支付验证，最后构建可重用的支付按钮组件，完成支付流程。
🎯
关键要点
- 在Next.js项目中集成Razorpay支付的步骤很简单。
- 第一步：安装Razorpay Node.js SDK和其他必要的包。
- 第二步：从Razorpay获取API密钥，并将其存储在项目根目录的.env文件中。
- 第三步：创建API路由以生成订单，使用Next.js的内置API路由系统。
- 第四步：创建生成订单ID的函数，使用axios发送请求。
- 第五步：创建可重用的支付按钮组件，处理支付逻辑。
- 第六步：为支付验证创建新的API路由，确保支付的安全性。
- 集成完成后，可以安全地在应用程序中接受支付。
❓
延伸问答
如何在Next.js中安装Razorpay的SDK？
在项目目录中运行命令：npm install razorpay @types/razorpay axios。
如何获取Razorpay的API密钥？
从Razorpay获取API密钥，并将其存储在项目根目录的.env文件中。
如何创建Razorpay的订单API路由？
使用Next.js的内置API路由系统，创建一个新的API路由/api/createOrder/route.ts来生成订单。
如何实现支付验证？
创建一个新的API路由/api/verifyOrder/route.ts，使用HMAC算法验证支付签名。
如何创建可重用的支付按钮组件？
在/components/BuyButton.tsx中创建一个组件，处理支付逻辑并调用生成订单ID的函数。
集成Razorpay后如何安全地接受支付？
通过创建API路由和验证支付签名，确保支付过程的安全性。
➡️
