Question

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

React Native版本0.60.4

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

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'
    />
  )
}


=============================

Our backend team have done this in 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;
};




In React Native I am getting this error after sending the POST request with mentioned formbody

============
Error Code: 10001     Invalid Request - Encrypted request invalid/not present.

Don't worry... It happens to the best of us. 
============


Whereas on hitting the ccavRequestHandler.js from Node.js, we are getting the correct response from CCAvenue, which is an HTML.

How can I do something similar like request.on using AJAX. I think I am missing something in that section.

Answer 1

CCAvenue请求无法以这种方式工作。它应该具有用于配置网关的有效引荐来源网址（即IP /域）。通过node.js的ccavRequestHandler.js发出的请求有效，因为该请求具有有效的IP /域，正在使用该IP /域配置您的ccAvenue帐户。

要使同一流程在移动设备中起作用（即，响应本机），请在服务器中创建一个页面，该页面通过WebView接收您的输入，并准备从该页面发出的后处理请求，并带有链接到ccAvenue Gateway的所有必需的表单参数，所有内容都应做得好。

让我知道这是否可行。

在React Native中实现CCAvenue

1 个答案: