将 payUbiz 与 react-native 集成答案

【问题标题】：Integrate payUbiz with react-native将 payUbiz 与 react-native 集成
【发布时间】：2020-03-29 17:08:56
【问题描述】：

我正在尝试将 payUbiz 与 react-native 集成，但我找不到任何合适的 SDK 或库。谁可以帮我这个事。如何将 payUbiz 与 react-native 集成。这应该与 android 和 iOS 都兼容。

明确地说，我问的是 payUbiz 和 not 的 payUMoney

【问题讨论】：

标签： react-native payu

【解决方案1】：

替代解决方案：我已经使用 react-native + PHP 的 webview 方法实现了 PayUMoney。你可以聘请 react-native+java 开发人员为 PayUBiz 创建原生模块，或者参考我的代码并实现你自己的。

步骤：

包括我们的自定义 PayUMoney 组件

    {PayUModalVisibility && (
            <PayUMoney
              visible={PayUModalVisibility}
              onCloseModal={() =>
                this.setState({PayUModalVisibility: false, billingData: []})
              }
              getMagicResponse={magicResponse =>
                this.getMagicResponse(magicResponse)
              }
              paymentOptions={onlineObj}
            />
          )}

我的 getMagicResponse 函数

getMagicResponse(resp) {
console.log(resp);
    if (resp.status === 'success') {
        //do whatever u want
    }
  }

3.我的 PayUMoney 组件。

import React from 'react';
import {StyleSheet, View, Modal} from 'react-native';
import {Button, Text} from 'native-base';
import {WebView} from 'react-native-webview';

import styles from './styles';

class PayUMoney extends React.Component {
  constructor(props) {
    super(props);
    this.myWebView;
    this.state = {
      response: '',
    };
  }

  render() {
    const {
      visible,
      getMagicResponse,
      paymentOptions: {amount, productinfo, firstname, lastname, email, phone},
    } = this.props;
    const runFirst = `
            document.getElementById("amount").value = '${amount}';
            document.getElementById("firstname").value = '${firstname}';
            document.getElementById("lastname").value = '${lastname}';
            document.getElementById("email").value = '${email}';
            document.getElementById("phone").value = '${phone}';
            document.getElementById("productinfo").value = '${productinfo}';
            setTimeout(() => {
              document.forms.payuForm.submit();
            }, 200);
          `;

    return (
      <Modal
        animationType={'slide'}
        visible={visible}
        onRequestClose={() => {}}>
        <View style={styles.modalView}>
          <WebView
            ref={el => (this.myWebView = el)}
            startInLoadingState={true}
            useWebKit={false}
            javaScriptEnabled={true}
            domStorageEnabled={true}
            scalesPageToFit={true}
            automaticallyAdjustContentInsets={true}
            injectedJavaScript={runFirst}
            onMessage={event => {
              let response_data = JSON.parse(event.nativeEvent.data);
              getMagicResponse(response_data);
            }}
            source={{
              uri: 'my_payuform_on_my_server.php',
            }}
          />
        </View>
      </Modal>
    );
  }
}

export default PayUMoney;

使用 payumoney web sdk 配置 my_payuform_on_my_server.php。

<?php

$MERCHANT_KEY = "XXXXXX";
$SALT = "YYYYYY";
// Merchant Key and Salt as provided by Payu.

// $PAYU_BASE_URL = "https://sandboxsecure.payu.in";        // For Sandbox Mode
$PAYU_BASE_URL = "https://secure.payu.in";      // For Production Mode

$action = '';

$posted = array();
if (!empty($_POST)) {
  //print_r($_POST);
  foreach ($_POST as $key => $value) {
    $posted[$key] = $value;
  }
}

$formError = 0;

if (empty($posted['txnid'])) {
  // Generate random transaction id
  $txnid = substr(hash('sha256', mt_rand() . microtime()), 0, 20);
} else {
  $txnid = $posted['txnid'];
}
$hash = '';
// Hash Sequence
$hashSequence = "key|txnid|amount|productinfo|firstname|email|udf1|udf2|udf3|udf4|udf5|udf6|udf7|udf8|udf9|udf10";
if (empty($posted['hash']) && sizeof($posted) > 0) {
  if (
    empty($posted['key'])
    || empty($posted['txnid'])
    || empty($posted['amount'])
    || empty($posted['firstname'])
    || empty($posted['email'])
    || empty($posted['phone'])
    || empty($posted['productinfo'])
    || empty($posted['surl'])
    || empty($posted['furl'])
    || empty($posted['service_provider'])
  ) {
    $formError = 1;
  } else {
    $hashVarsSeq = explode('|', $hashSequence);
    $hash_string = '';
    foreach ($hashVarsSeq as $hash_var) {
      $hash_string .= isset($posted[$hash_var]) ? $posted[$hash_var] : '';
      $hash_string .= '|';
    }

    $hash_string .= $SALT;

    $hash = strtolower(hash('sha512', $hash_string));
    $action = $PAYU_BASE_URL . '/_payment';
  }
} elseif (!empty($posted['hash'])) {
  $hash = $posted['hash'];
  $action = $PAYU_BASE_URL . '/_payment';
}
file_put_contents('logs.txt', date('Y-m-d H:i:s') . ' :payu_popup data:' . PHP_EOL . json_encode(array_map('utf8_encode', $posted)) . PHP_EOL . '---------------------' . PHP_EOL, FILE_APPEND);

?>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script>
    var hash = '<?php echo $hash ?>';

    function submitPayuForm() {
      if (hash == '') {
        return;
      }
      var payuForm = document.forms.payuForm;
      payuForm.submit();
    }
  </script>
</head>

<body onload="submitPayuForm()" style="display:none">
  <h2>PayU Form</h2>
  <br />
  <?php if ($formError) { ?>

    <span style="color:red">Please fill all mandatory fields.</span>
    <br />
    <br />
  <?php } ?>
  <form action="<?php echo $action; ?>" method="post" name="payuForm">
    <input type="hidden" name="key" value="<?php echo $MERCHANT_KEY ?>" />
    <input type="hidden" name="hash" value="<?php echo $hash ?>" />
    <input type="hidden" name="txnid" value="<?php echo $txnid ?>" />
    <table>
      <tr>
        <td><b>Mandatory Parameters</b></td>
      </tr>
      <tr>
        <td>Amount: </td>
        <td><input name="amount" id="amount" value="<?php echo (empty($posted['amount'])) ? '' : $posted['amount'] ?>" /></td>
        <td>First Name: </td>
        <td><input name="firstname" id="firstname" value="<?php echo (empty($posted['firstname'])) ? '' : $posted['firstname']; ?>" /></td>
      </tr>
      <tr>
        <td>Email: </td>
        <td><input name="email" id="email" value="<?php echo (empty($posted['email'])) ? '' : $posted['email']; ?>" /></td>
        <td>Phone: </td>
        <td><input name="phone" id="phone" value="<?php echo (empty($posted['phone'])) ? '' : $posted['phone']; ?>" /></td>
      </tr>
      <tr>
        <td>Product Info: </td>
        <td colspan="3"><textarea id="productinfo" name="productinfo"><?php echo (empty($posted['productinfo'])) ? '' : $posted['productinfo'] ?></textarea></td>
      </tr>
      <tr>
        <td>Success URI: </td>
        <td colspan="3"><input type="hidden" name="surl" value="my_success.php" size="64" /></td>
      </tr>
      <tr>
        <td>Failure URI: </td>
        <td colspan="3"><input type="hidden" name="furl" value="my_failure.php" size="64" /></td>
      </tr>

      <tr>
        <td colspan="3"><input type="hidden" name="service_provider" value="payu_paisa" size="64" /></td>
      </tr>

      <tr>
        <td><b>Optional Parameters</b></td>
      </tr>
      <tr>
        <td>Last Name: </td>
        <td><input name="lastname" id="lastname" value="<?php echo (empty($posted['lastname'])) ? '' : $posted['lastname']; ?>" /></td>
        <td>Cancel URI: </td>
        <td><input name="curl" value="my_failure.php" /></td>
      </tr>
      <tr>
        <td>Address1: </td>
        <td><input name="address1" id="address1" value="<?php echo (empty($posted['address1'])) ? '' : $posted['address1']; ?>" /></td>
        <td>Address2: </td>
        <td><input name="address2" id="address2" value="<?php echo (empty($posted['address2'])) ? '' : $posted['address2']; ?>" /></td>
      </tr>
      <tr>
        <td>City: </td>
        <td><input name="city" id="city" value="<?php echo (empty($posted['city'])) ? '' : $posted['city']; ?>" /></td>
        <td>State: </td>
        <td><input name="state" id="state" value="<?php echo (empty($posted['state'])) ? '' : $posted['state']; ?>" /></td>
      </tr>
      <tr>
        <td>Country: </td>
        <td><input name="country" value="<?php echo (empty($posted['country'])) ? '' : $posted['country']; ?>" /></td>
        <td>Zipcode: </td>
        <td><input name="zipcode" value="<?php echo (empty($posted['zipcode'])) ? '' : $posted['zipcode']; ?>" /></td>
      </tr>
      <tr>
        <td>UDF1: </td>
        <td><input name="udf1" value="<?php echo (empty($posted['udf1'])) ? '' : $posted['udf1']; ?>" /></td>
        <td>UDF2: </td>
        <td><input name="udf2" value="<?php echo (empty($posted['udf2'])) ? '' : $posted['udf2']; ?>" /></td>
      </tr>
      <tr>
        <td>UDF3: </td>
        <td><input name="udf3" value="<?php echo (empty($posted['udf3'])) ? '' : $posted['udf3']; ?>" /></td>
        <td>UDF4: </td>
        <td><input name="udf4" value="<?php echo (empty($posted['udf4'])) ? '' : $posted['udf4']; ?>" /></td>
      </tr>
      <tr>
        <td>UDF5: </td>
        <td><input name="udf5" value="<?php echo (empty($posted['udf5'])) ? '' : $posted['udf5']; ?>" /></td>
        <td>PG: </td>
        <td><input name="pg" value="<?php echo (empty($posted['pg'])) ? '' : $posted['pg']; ?>" /></td>
      </tr>
      <tr>
        <?php if (!$hash) { ?>
          <td colspan="4"><input type="submit" value="Submit" /></td>
        <?php } ?>
      </tr>
    </table>
  </form>
</body>

</html>

我的 my_success.php 文件（与 my_failure.php 相同）

<?php

$returnArray = [];
$returnArray['status'] = $_POST['status'];
$returnArray['txnid'] = $_POST['txnid'];
$returnArray['amount'] = $_POST['amount'];
$returnArray['firstname'] = $_POST['firstname'];
$returnArray['addedon'] = $_POST['addedon'];
$returnArray['productinfo'] = $_POST['productinfo'];
$returnArray['lastname'] = $_POST['lastname'];
$returnArray['email'] = $_POST['email'];
$returnArray['phone'] = $_POST['phone'];

$success_response = json_encode(array_map('utf8_encode', $returnArray));

?>

<script>
      var success_response = '<?php echo $success_response; ?>';
      window.ReactNativeWebView.postMessage(success_response);
</script>

【讨论】：