如何在 next.js 中设置支付网关并使用 razorpay 和 tailwindcss 做出反应

147 阅读 0 评论 0 点赞

如果您有电子商务应用程序，则支付网关可让您即时在您的网站上处理付款。

如今，随着各种现代支付网关解决方案的出现，您可以通过多种方式整合支付并向用户收取您的产品或服务的费用。

在本教程中，我们将构建一个登录页面，让最终用户可以从 Web 应用程序购买产品。该页面如下所示：

现场演示：整合付款
源代码：集成支付源代码

一些流行的可用支付网关包括：

条纹
Gumroad
PayPal
Razorpay

今天，我们将学习如何将 Razorpay 与 Next.js（React）应用程序集成，并了解流程的实际工作方式。

技术堆栈

对于我们的堆栈，我们将使用以下技术：

Next.js—— 一个允许访问无服务器功能和 React 架构的 React 框架。
TailwindCSS - 一个基于实用程序的 CSS 框架，可轻松进行样式设置
Razorpay—— 一种允许用户访问付款的支付网关系统。
Vercel- 用于托管我们的 Next.js 应用程序（如果尚未托管）
Tailwind Master Kit - 用于轻松访问 Tailwind 组件

项目设置

如果您已经有项目，那么您可以直接跳到本文的集成部分。如果没有，让我们开始创建一个 Git 存储库并在 Vercel 上托管我们的项目。

如何设置 Next.js 存储库和网站

首先，前往 Vercel 并为自己创建一个业余爱好帐户。（如果您要将其用于商业项目，请确保购买他们的计划。业余爱好帐户仅用于测试和创建游乐场。）

创建帐户后，点击 New Project
Screenshot-2021-12-21-at-11.56.47-AM

然后，从可用选项中选择 Next.js 并在平台上创建一个 Git 存储库。
Screenshot-2021-12-21-at-11.57.31-AM

您的网站将在几秒钟内部署，您将获得实时网站的 URL。

如何设置 TailwindCSS

现在网站已经设置好了，你可以直接去 GitHub 克隆仓库，然后在本地环境中运行它。为此，请按照以下简单步骤操作：

前往 GitHub 并找到你新创建的存储库
单击该 code 部分并复制存储库 URL。
在桌面上打开终端并写入 git clone <repo_name> 。这将在您的本地环境中克隆存储库，以便您可以开始工作。
在本地环境中克隆/复制存储库后，在您最喜欢的代码编辑器中打开项目（我认为 VSCode 是最好的）。
在终端中，打开应用程序的位置并写入 npm install 。这将安装所有相关的节点模块。
你可以通过以下方式启动本地开发服务器 npm run dev .

现在，项目已在您的本地环境中启动并运行。要本地访问您的网站，请 localhost:3000 在浏览器中打开，您将能够看到已经存在的样板网站。

设置 Tailwind 非常简单。他们的文档让设置过程更加简单。查看他们的文档以获取参考资料以及有关 TailwindCSS 作为框架的更多信息。

要在本地环境中设置 Tailwind，请按照以下步骤操作：

npm install -D tailwindcss postcss autoprefixer - 这将安装 TailwindCSS 以及用于编译和运行 Tailwind 代码的其他重要依赖项。
npx tailwindcss init -p - 这将初始化一个 tailwind.config.js 文件，该文件只是一个可以根据用户需要进行操作的对象。
在 tailwind.config.js 文件中，粘贴下面的代码，它基本上告诉 Tailwind 编译 /pages 和 /components 目录中存在的代码。

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

打开 globals.css 中的文件 /styles 并粘贴以下代码。这些代码片段导入了所有与 Tailwind 相关的设置代码：

@tailwind base;
@tailwind components;
@tailwind utilities;

退出终端并 npm run dev 在终端上书写，重新启动您的网站。现在，您已准备好利用 TailwindCSS 的强大功能。

现在 Tailwind 和我们的网站已经设置好了，让我们直接开始开发页面和集成付款。

登陆页面开发

我们将要使用的登录页面直接取自 Tailwind Master Kit ，它允许您访问使用 TailwindCSS 构建的组件。

让我们分解代码并更好地理解它。

import React from "react";
export const Navbar = () => {
  return (
    
      
        Payments
        
          
            
              Pricing
            
          
          
            
              Product
            
          
          
            
              Team
            
          
          
            
              Sales
            
          
        
      
      
        
          Sales
        
        
      
    
  );
};

构建导航栏很简单。它是一个 Flexbox 容器，其中的链接和无序列表项以 row .

但是，这个按钮很有趣。它使用了新的 TailwindCSS 阴影类，可以投射背景阴影。（我们还可以在 TailwindCSS 3.0+ 版本中使用彩色阴影 - 非常酷。）

Hero.js

const Hero = ({ onClick }) => {
  return (
    
      
        
          Integrate{" "}
          
            payments
          {" "}
          in less than 10 minutes.
        
        
          Learn how to integrate a Payment Gateway with your Next.js and React
          application.
        
        
          
        
        
          
        
      
      {/*  */}
      
      {/*  */}
    
  );
};

英雄部分包含我们的 Purchase Now 按钮，它将为我们初始化付款（我们将在下一节中查看实施情况）。

布局包含两个部分： Left section 包含所有文本，以及 Right Section 包含一张大图像（取自免费开源插图网站 Undraw）。

操作 onClick 很重要，因为它负责触发初始化付款的操作。 onClick 只不过是一个 callback 调用函数的按钮，该函数作为 prop 传递给组件。

UI 部分就这些了。让我们进入支付部分，了解如何在 Razorpay 上设置开发者帐户并使用其 SDK 在我们的网站上付款。

如何设置 Razorpay 帐户并检索 API 密钥

为了整合付款（即在我们的网站上接收付款），我们需要做两件事：

Razorpay 账户
一组 API 密钥让我们可以访问他们的服务。

让我们创建一个帐户并检索 API 密钥。

前往 Razorpay 并注册一个账户
注册后，您可以访问仪表板，在那里您将找到整合付款所需的所有必要详细信息。
目前，我们将处于测试模式，以便我们可以在实际上线之前测试我们的付款。
在左侧面板中，向下滚动到 Settings - 您将在那里找到 API 密钥部分以及您可以对付款 UI 进行的配置。
由于您是第一次执行此操作，请单击 Generate API Keys ，下载将自动开始。下载的文件包含 Razorpay API Key 和 Razorpay API Secret .

现在您已准备好 API 密钥并设置好平台。让我们直接了解如何实际触发 Razorpay API 并进行付款。

如何将付款与 Razorpay 集成

为了集成我们的付款，我们需要单击一个按钮来初始化 Razorpay checkout 模块。为此，我们已经有一个按钮 Purchase Now 回调 onClick 函数

要初始化付款，我们需要将 Razorpay 的 checkout 脚本添加到我们的代码中。在 React 中，我们可以简单地使用 document.body.appendChild(script) 代码来完成此操作。

初始化Razorpay（）

const initializeRazorpay = () => {
    return new Promise((resolve) => {
      const script = document.createElement("script");
      script.src = "https://checkout.razorpay.com/v1/checkout.js";

      script.onload = () => {
        resolve(true);
      };
      script.onerror = () => {
        resolve(false);
      };

      document.body.appendChild(script);
    });
  };

现在，我们使用承诺来完成这项任务。我们这样做是因为稍后我们将以 initializeRazorpay() 这种方式使用，即每次 Purchase Now 点击时，都会初始化付款。我们只需使用 await 此函数创建并将脚本附加到 DOM 中。

让我们看一下负责在页面上创建和初始化付款的主要函数。

makePayment() 函数

const makePayment = async () => {
    const res = await initializeRazorpay();

    if (!res) {
      alert("Razorpay SDK Failed to load");
      return;
    }

    // Make API call to the serverless API
    const data = await fetch("/api/razorpay", { method: "POST" }).then((t) =>
      t.json()
    );
    console.log(data);
    var options = {
      key: process.env.RAZORPAY_KEY, // Enter the Key ID generated from the Dashboard
      name: "Manu Arora Pvt Ltd",
      currency: data.currency,
      amount: data.amount,
      order_id: data.id,
      description: "Thankyou for your test donation",
      image: "https://manuarora.in/logo.png",
      handler: function (response) {
        // Validate payment at server - using webhooks is a better idea.
        alert(response.razorpay_payment_id);
        alert(response.razorpay_order_id);
        alert(response.razorpay_signature);
      },
      prefill: {
        name: "Manu Arora",
        email: "manuarorawork@gmail.com",
        contact: "9999999999",
      },
    };

    const paymentObject = new window.Razorpay(options);
    paymentObject.open();
  };

该 makePayment() 方法负责初始化并打开 Razorpay 弹出窗口。

该 makePayment() 函数执行以下操作：

p29
p30
p31
1. currency - The currency in which we want the transaction to happen
2. amount - The amount in which the transaction has to happen. Note that it has to be the smallest denomination. Example if you're from the USA, then the amount will be in cents.
3. order_id - This will be generated from the serverless API which we are going to talk about in a minute.
4. handler - When the payments are successful, this callback function is called.
p32

我们查看上述 makePayment() 方法，看到一行代码：

const data = await fetch("/api/razorpay", { method: "POST" }).then((t) =>
      t.json()
    );

但是这是什么意思？

Next.js 允许我们借助 apis Next.js 文件夹中 api 提供的无服务器函数来访问它们

无服务器 API 只不过是 Lambda Functions 充当我们 JAMStack 应用程序的后端。在这里，我们可以轻松编写与后端相关的代码，而无需创建单独的后端。

这里，我们需要无服务器，因为 order_id 我们在代码中看到的 makePayments() 是唯一的，必须在后端生成。不仅如此， amount 和 currency 也来自后端。这是为了确保没有人可以操纵金额和货币，并且门户网站的支付是安全的。

让我们看一下无服务器 API 代码并更好地理解它。

/api/razorpay.js

const Razorpay = require("razorpay");
const shortid = require("shortid");

export default async function handler(req, res) {
  if (req.method === "POST") {
    // Initialize razorpay object
    const razorpay = new Razorpay({
      key_id: process.env.RAZORPAY_KEY,
      key_secret: process.env.RAZORPAY_SECRET,
    });

    // Create an order -> generate the OrderID -> Send it to the Front-end
    const payment_capture = 1;
    const amount = 499;
    const currency = "INR";
    const options = {
      amount: (amount * 100).toString(),
      currency,
      receipt: shortid.generate(),
      payment_capture,
    };

    try {
      const response = await razorpay.orders.create(options);
      res.status(200).json({
        id: response.id,
        currency: response.currency,
        amount: response.amount,
      });
    } catch (err) {
      console.log(err);
      res.status(400).json(err);
    }
  } else {
    // Handle any other HTTP method
  }
}

这是 razorpay.js 通向的路由 /api/razorpay 。您在 API 文件夹中创建的每个文件都将成为无服务器路由。就像我们在后端创建 API 一样，我们在 API 文件夹中创建文件，这些文件将成为我们的路由。

例如：假设您在 /api 名为的文件夹 posts.js 。那么路由将变为 /api/posts 可以根据用例返回您想要的任何内容。

对于我们的情况，我们需要 POST 向后端发出请求，后端 order_id 将为我们 amount ，并将 currency 其返回到前端进行付款。

让我们了解此 API 的流程。

首先，我们需要安装 razorpay 模块以及 shortid 用于生成简短唯一 ID。为此，请转到您的终端并输入 npm install razorpay 并 npm install shortid
现在，要访问 POST 请求，我们检查请求对象并使用以下代码片段访问方法：

export default async function handler(req, res) {
  if (req.method === "POST") {
    // Initialize razorpay object
    const razorpay = new Razorpay({
      key_id: process.env.RAZORPAY_KEY,
      key_secret: process.env.RAZORPAY_SECRET,
    });

    // rest of the code...
}

3. 此处 request.method 检查方法。如果方法可用，则 POST 我们继续初始化 Razorpay 对象。

4. Razorpay 对象接受 2 个参数： key_id 和 key_secret 。还记得我们从 Razorpay 仪表板下载密钥的时候吗？让我们来使用它们。

5. .env 在文件夹结构的根目录中打开/创建文件并粘贴以下代码：

RAZORPAY_KEY=YOUR_KEY_HERE
RAZORPAY_SECRET=YOUR_SECRET_HERE

在这里，您可以插入您的 API 密钥和秘密，然后就可以开始了。

注意：请确保重新启动开发服务器 - 否则更改将不会反映。

一旦 razorpay 设置了对象，它就会有三个重要选项 receipt , amount ： currency .

const payment_capture = 1;
    const amount = 499;
    const currency = "INR";
const options = {
      amount: (amount * 100).toString(),
      currency,
      receipt: shortid.generate(),
    };

请注意，金额和货币已在我们的声明中 back-end ，以便攻击者无法篡改它。

一旦设置好选项，我们就可以使用 Razorpay 的 razorpay . orders .create(options) 方法创建订单。

try {
      const response = await razorpay.orders.create(options);
      res.status(200).json({
        id: response.id,
        currency: response.currency,
        amount: response.amount,
      });
    } catch (err) {
      console.log(err);
      res.status(400).json(err);
    }

这里我们简单地介绍一下 await 方法 create() 。当创建方法成功时，我们会得到一个， id 就是 order_id 我们需要提供给前端以生成唯一付款的。

一旦一切成功，我们将发送一个 200 response 带有 id , currency 和 amount 字段的。这就是前端处理付款所需的全部内容。

如何使用 Razorpay 付款

一旦所有东西都整合到位，我们就可以开始使用 Razorpay 的收费方式了——有多种选择。有了它，您只需在您的网站上接受付款，就可以开始为您的服务和产品收费。

整个弹出窗口是可定制的，可以直接从 Razorpay 的仪表板门户进行编辑。

由于您处于测试模式，要开始在生产中使用他们的服务，您需要通过提交证明文件来完成他们的身份验证过程，然后在和之间切换 test mode 即可 live mode .

这就是您从编码方面需要做的全部工作，以实现从测试到实时的转变。

环境变量

为了确保我们的更改反映在我们的实时生产网站中，我们需要在 Vercel 平台上的代码中添加相同的环境变量。

为了那个原因：

前往 Vercel 并打开你的项目
点击 settings
点击 environment variables .
您将获得 2 个输入字段 - 名称和值。
首先，输入 RAZORPAY_KEY 并添加API密钥
第二步，输入 RAZORPAY_SECRET 并添加秘密值
重新部署网站，您也可以在实时环境中付款。

现场演示和源代码

该应用程序的完整源代码可以在这里 .

该网站的现场演示在这里 .

结论

由于 Razorpay 拥有简单易懂的优秀文档，因此集成付款非常容易。

我很喜欢编写这个网站的代码并整合付款。您还可以在我的网站上看到代码片段： Manu Arora 的代码片段

如果您喜欢这个博客，请尝试在您自己的网站上实现它，这样您就可以联系到您的最终用户，并使付款变得轻而易举。

如果你想提供任何反馈，请通过我的 Twitter 账号或访问我的网站

还要感谢 Tailwind Master Kit 漂亮的登陆页面 UI。

祝你编码愉快。:)

点赞(0) 打赏

本文分类：IT技术
本文标签：电子商务支付 Tailwind Next.js React
浏览次数：147 次浏览
发布日期：2024-08-05 23:06:01
本文链接：http://yelongauto.com/index.php/ITjishu/2330.html

上一篇 > 如何在 javascript 中解构对象
下一篇 > 学习编写 RPG 代码 – 新闻资料包

如何在 next.js 中设置支付网关并使用 razorpay 和 tailwindcss 做出反应

技术堆栈

项目设置

如何设置 Next.js 存储库和网站

如何设置 TailwindCSS

登陆页面开发

导航栏.js

Payments

Hero.js

Integrate{" "} payments {" "} in less than 10 minutes.

如何设置 Razorpay 帐户并检索 API 密钥

如何将付款与 Razorpay 集成

初始化Razorpay（）

makePayment() 函数

/api/razorpay.js

如何使用 Razorpay 付款

环境变量

现场演示和源代码

结论

评论列表共有 0 条评论

发表评论取消回复

如何在 next.js 中设置支付网关并使用 razorpay 和 tailwindcss 做出反应

技术堆栈

项目设置

如何设置 Next.js 存储库和网站

如何设置 TailwindCSS

登陆页面开发

导航栏.js

Payments

Hero.js

Integrate{" "} payments {" "} in less than 10 minutes.

如何设置 Razorpay 帐户并检索 API 密钥

如何将付款与 Razorpay 集成

初始化Razorpay（）

makePayment() 函数

/api/razorpay.js

如何使用 Razorpay 付款

环境变量

现场演示和源代码

结论

如何在 html 和 css 中创建漂亮的盒子阴影

如何向前端应用程序添加搜索功能

如何在 next.js 中设置支付网关并使用 razorpay 和 tailwindcss 做出反应

React Router 第 6 版教程 – 如何设置路由器并路由到其他组件

评论列表 共有 0 条评论

发表评论 取消回复

评论列表共有 0 条评论

发表评论取消回复