如何将PayTM集成到React Native App中群控编程网

最近，我的一位客户要求我接受我正在使用的React Native应用上的PayTM钱包付款。虽然，没有这样的库可以安装并在RN应用程序上运行PayTM，但是总有一种解决方案，我找到了。

您可以在YouTube上观看这6部分系列

或继续阅读下面的内容。

我使用在https://github.com/Paytm-Payments/Paytm_Web_Sample_Kit_NodeJs_Express_Project中找到的PayTM的ExpressJS工具包来处理后端处理。此存储库未更新，因此克隆存储库后，您将必须运行经典的“ npm install”，然后运行“ npm install-save express-redirect”

如果您不使用ExpressJS，那就没问题。只需按照以下步骤操作，就可以了。

现在，我们需要更改三个变量，config.js内部两个，views / pgredirect.ejs内部一个。

打开config.js，将MID和PAYTM_MERCHANT_KEY更改为PayTM在注册进行沙箱访问时提供给您的凭据。

打开views / pgredirect.ejs并将表单的action属性的值更改为https://pguat.paytm.com/oltp-web/processTransaction

接受发布请求的文件（在我们的示例中是views / testtxn.ejs，这是我们的本机应用程序将开始进行PayTM处理的地方）应包含类似以下代码

  <输入类型=“隐藏” ID =“ INDUSTRY_TYPE_ID”名称=“ INDUSTRY_TYPE_ID”值=''>

  <input type =“ hidden” id =“ CHANNEL_ID” name =“ CHANNEL_ID” value =''>

  <输入类型=“隐藏”标题=“ MID”名称=“ MID”值=''>

  <input type =” hidden” name =” WEBSITE” value =''>

  <输入类型=“隐藏”名称=“ PAYTM_MERCHANT_KEY”值=''>

提交表单后，会为我们生成一个名为“ CHECKSUMHASH”的新参数，然后我们将被重定向到一个新表单，该表单将使用9个参数自动将该表单提交给PayTM的服务器。

发送到PayTM服务器的9个参数是：

ORDER_ID，CUST_ID，INDUSTRY_TYPE_ID，CHANNEL_ID，TXN_AMOUNT，WEBSITE，MID，CALLBACK_URL和CHECKSUMHASH

为了进行测试，我们将其中五个值设置如下：

  INDUSTRY_TYPE_ID =零售

  CUST_ID = Aditya123

  CHANNEL_ID = WEB

  TXN_AMOUNT = 10

 网站=网站标记

您的ORDER_ID应该始终是唯一的。 MID变量的值将由config.js捕获。

尽管第8个变量（即CALLBACK_URL）需要更多注意。如果在localhost上进行开发，则需要将其更改为IP地址，然后是port，然后是端点。因此，它应该看起来像这样

http://192.168.0.100:3000/响应

注意：我们使用了实际的IP地址，因为如果我们从React Native应用程序加载相同的地址，那么“ localhost”将无法工作！对于生产环境，请将此值设置为您的实际域。

足够多的后端东西，该轮到React了！

我们将使用RN的WebView组件通过PayTM处理付款。这在Android和IOS上都非常有效，我们不必为每种情况单独集成网关。

请点击下面的链接获取Payments.js文件的代码

morfsys / react-native-paytm
一个WebView包装器，将paytm集成到React Native应用程序上– morfsys / react-native-paytm github.com

那么，这是如何工作的呢？我承认这是一个有点棘手的解决方案，但效果很好。

我们在这里做什么？我们将三个变量（即ORDER_ID，CUST_ID和TXN_AMOUNT）注入接受发布请求的URL，然后提交表单以及其他5个参数，您可以如上所述从后端修改自己。

现在，将自动为您生成第9个参数，即CHECKSUMHASH，然后将这些参数发送到PayTM。如果您仍在开发环境中，请使用PayTM提供的凭据进行付款。该号码应为7777777777，请检查您的电子邮件以查看密码。当您注册沙盒访问时，PayTM会向您发送内置凭据。

付款成功后，您将导航回IP的/ response页面。这是我们处理RN应用可以与后端通信的方式处理PayTM响应的地方。现在是最棘手的部分，我们如何告诉RN页面付款是否成功？ RN不提供任何直接方法来处理来自不同来源的响应。

我们现在干什么？我们黑客！！！

那就对了。在后端，我们根据PayTM的响应切换“ title”标签内的文本。从PayTM接收数据后，我们将从后端服务器向视图发送一个名为“ restData”的变量。现在，我们需要检查restData是true还是false。

如果restData为true，则支付成功；如果为false，则出问题。因此，我们根据restData的值更改响应页面的标题。如果restData为true，则将“ title”标记内的文本更改为true；如果restData为false，则将其更改为false。在ExpressJS中，我们通过在response.ejs文件的标记中添加此代码来做到这一点

   true

   false

  商家结帐页面

提醒那些不使用ExpressJS的人们，请找到一种方法来动态更改响应文件的标题，如果restData为true，并且在restData为false的情况下为false，则在标题中写入true标记。

为什么我们对标题标签如此关注？这是因为RN的WebView提供了一个名为“ onNavigationStateChange”的道具，并且可以访问文档的标题标签。

我们使用这些信息，并处理来自paytm的响应。

如果您有任何疑问或卡在某个地方，请在下面进行评论，我们将尽力为您提供帮助。

我希望这篇文章对某人有所帮助。如果可以，可以拍手吗？二？三？四个？ ……一百？干杯！！！！