在 React Native 中实现 CCAvenue

Question

我正在 React Native 中实现 CCAvenue 支付网关。

React Native 版本 0.60.4

我创建了一个 WebView，传递了一个 HTML 源文件。在其中，我使用 AJAX 使用所需的数据达到 CCAvenue 的终点。收到响应后，我将 HTML 响应从 CCAvenue 发送到 Native 端。

Payment.js

```
import React, { useSate, useEffect, useRef } from 'react'
import { WebView } from 'react-native-webview'

var crypto = require('crypto')
var qs = require('qs')

const encrypt = (plainText, workingKey) => {
  var m = crypto.createHash('md5')
  m.update(workingKey)
  var key = m.digest()
  var iv = '\x00\x01\x02\x03\x04\x05\x06\x07\x08\x09\x0a\x0b\x0c\x0d\x0e\x0f'
  var cipher = crypto.createCipheriv('aes-128-cbc', key, iv)
  var encoded = cipher.update(plainText, 'utf8', 'hex')
  encoded += cipher.final('hex')
  return encoded
}
const data = {
  merchant_id: 'MERCHANT ID',
  order_id: '1232321',
  amount: '1.00'
  currency: 'INR',
  language: 'EN',
  redirect_url: 'redirect address',
  cancel_url: 'cancel address'
}


function Payment(props) {
  const [HTML, setHTML] = useState('')
  const webviewRef = useRef(null)

  useEffect(() => {
    // have to put it inside a timeout function, otherwise the postMessage was called before the page was loaded
    setTimeout(() => {
      const body = qs.stringify(data),
      const workingKey = 'WORKING_KEY,
      const accessCode = 'ACCESS_CODE',
      const encRequest = encrypt(body, workingKey)

      const formbody = '<form id="nonseamless" method="post" name="redirect" action="https://test.ccavenue.com/transaction/transaction.do?command=initiateTransaction"/> <input type="hidden" id="encRequest" name="encRequest" value="' + encRequest + '"><input type="hidden" name="access_code" id="access_code" value="' + accessCode + '"><script language="javascript">document.redirect.submit();</script></form>'

      webviewRef.current.postMessage(JSON.stringify(formbody))
    }, 200)
  }, [webviewRef])

  const _onWebViewMessage = message => {
    const parsedMessage = JSON.parse(message.nativeEvent.data)
    setHTML(parsedMessage.result)
  }

  return (
    <WebView
      ref={ref => (webviewRef.current = ref)}
      originWhitelist={['*']}
      source={HTML.length ? { html: HTML } : { uri: 'file:///android_asset/widget/ccavenue.html' }}
      domStorageEnabled
      javaScriptEnabled
      allowUniversalAccessFromFileURLs
      onMessage={message => _onWebViewMessage(message)}
      onError={e => console.log('Webview Error', e)}
      mixedContentMode='always'
    />
  )
}
=============================

我们的后端团队已经在 Node js 中完成了这项工作

ccavRequestHandler.js

var http = require("http"),
  qs = require("querystring");

exports.postReq = function(request, response) {
  var body = qs.stringify(request.body),
    workingKey = 'WORKING_KEY',
    accessCode = 'ACCESS_CODE',
    encRequest = encrypt(body, workingKey),
    formbody = "";

  var request = require("request");

  request(
    "https://test.ccavenue.com/transaction/transaction.do?command=initiateTransaction"
  )
    .on("data", function(data) {
      formbody =
        '<form id="nonseamless" method="post" name="redirect" action="https://test.ccavenue.com/transaction/transaction.do?command=initiateTransaction"/> <input type="hidden" id="encRequest" name="encRequest" value="' +
        encRequest +
        '"><input type="hidden" name="access_code" id="access_code" value="' +
        accessCode +
        '"><script language="javascript">document.redirect.submit();</script></form>';
    })
    .on("end", function() {
      response.writeHeader(200, { "Content-Type": "text/html" });
      response.write(formbody);
      response.end();
    });

  return;
};

在 React Native 中，我在使用提到的 formbody 发送 POST 请求后收到此错误

错误代码：10001 无效请求 - 加密请求无效/不 现在。

别担心...这发生在我们最好的人身上。

而在从 Node.js 访问 ccavRequestHandler.js 时，我们会从 CCAvenue 获得正确的响应，这是一个 HTML。

如何使用 AJAX 执行类似 request.on 的操作。我想我在那个部分遗漏了一些东西。

Answer 1

CCAvenue 请求不是这样工作的。它应该有一个有效的推荐人（即IP/域），通过它配置网关。 node.js 通过 ccavRequestHandler.js 发出的请求有效，因为该请求具有配置您的 ccAvenue 帐户的有效 IP/域。

为了使相同的流程在移动设备中工作（即反应原生），在服务器中创建一个页面，该页面通过 WebView 接收您的输入，并准备来自该页面的发布请求，其中包含链接到 ccAvenue 网关的所有必需表单参数，一切都应该工作正常。

让我知道这是否有效。