在前端开发中，处理支付和实现金融交易通常是一项繁琐的工作。不过，幸运的是，Razorpay提供了一个方便的前端JavaScript SDK来帮助开发者快速处理属于自己网站的支付结算。
这篇教程将会告诉你如何在你的网站中使用razor-pay-front-end-sdk，并且会提供具体的代码示例。
创建 Razorpay 账号
在开始使用体验Razorpay前端SDK之前，你需要在 Razorpay 的网站上先注册一个账号。
安装 SDK
你可以通过使用npm安装razor-pay-front-end-sdk，方法如下
npm install razor-pay-front-end-sdk
初始化
在你的项目的 JavaScript 文件中，你可以初始化代码如下
-- -------------------- ---- -------
------ -------- ---- --------------------------
----- -------- - --- ----------
---- ---------------------
------- ------------------------------
----- --- ---------
------------ -------- -------
------ ----------------
--------- ---
-------- -------- ---------- ---
-------- -
----- ---
------ ---
-------- ---
--
------ -
-------- ---
--
---其中，此处的key为您在Razorpay上注册的API key，amount为您的货币量。预期，此处不会超过十万卢比。然后，您可以输入一个便于您的用户识别的名称、注册一个描述、并上传您的网站/公司logo。handler函数将在Razorpay的交易成功时被触发。可以配置发送电子邮件的字段，包括用户姓名、电子邮箱和电话号码，以及您的客户的地址信息。
使用 Razorpay
现在，你已经建立了Razorpay的用户账号，初始化了你的razor-pay-front-end-sdk，你可以在你的应用中来使用它。
你可以在你的网站的任何地方，比如说，当你点击时，遵循下面的语法：
razorpay.open()
通过调用这个方法，您的用户将会看到一个安全的、定制的界面，他们可以用来完成支付操作。
示例代码
下面是一个完整的JavaScript代码示例文件，以展示如何为你的应用程序配置 Razorpay 的前端 SDK。
-- -------------------- ---- -------
------ -------- ---- --------------------------
----- -------- - --- ----------
---- ---------------------
------- ------------------------------
----- --- ---------
------------ -------- -------
------ ----------------
--------- ---
-------- -------- ---------- -
------------------------------------
--
-------- -
----- --------
------ --------------------
-------- -------------
--
------ -
-------- --------- --------- --------
--
---
--------------------------------------------------------------- -------- --- -
----------------
-------------------
---
结论
到这里，我们已经学习了如何使用npm包 razor-pay-front-end-sdk来配置和运行Razorpay的支付系统，以及如何使用它来进行网站上的支付交易。如果您还没有使用Razorpay来处理您的网站交易，那么希望这篇文章现在会给你踏上这条服务之路的初始点。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067355890c4f7277583af6