push code

src/Screens/Action/Deposit/Deposit.js

-import React from 'react';
+import React, {useEffect} from 'react';
+import {Alert, NativeEventEmitter} from 'react-native';
 
 import DepositView from './DepositView';
 
+import create_payment_link from '../../Payment/setup';
+
+import VnpayMerchant, {VnpayMerchantModule} from 'react-native-vnpay-merchant';
+const eventEmitter = new NativeEventEmitter(VnpayMerchantModule);
+
 const Deposit = (props) => {
-  return <DepositView />;
+  const {method} = props.route.params;
+
+  useEffect(() => {
+    // mở sdk
+    eventEmitter.addListener('PaymentBack', (e) => {
+      console.log('Sdk back!');
+
+      // Đã available trên cả ios, android
+      if (e) {
+        switch (e.resultCode) {
+          case 0:
+            console.log('Sdk closed');
+            break;
+          case -1:
+            console.log('Người dùng nhấn back từ sdk để quay lại');
+            break;
+          case 10: //ios
+            console.log(
+              'Người dùng nhấn chọn thanh toán qua app thanh toán (Mobile Banking, Ví...)',
+            );
+            break;
+          case 99:
+            console.log(
+              'Người dùng nhấn back từ trang thanh toán thành công khi thanh toán qua thẻ khi gọi đến http://sdk.merchantbackapp',
+            );
+        }
+      }
+    });
+    return () => {
+      // khi tắt sdk
+      eventEmitter.removeAllListeners('PaymentBack');
+    };
+  }, []);
+
+  const depositClick = (money, note) => {
+    if (money && note) {
+      if (method.agent == 'VNPAY') {
+        VnpayMerchant.show({
+          iconBackName: 'ic_back',
+          paymentUrl: create_payment_link(
+            method.return_url,
+            method.checkout_url,
+            money,
+            note,
+          ),
+          scheme: 'sampleapp',
+          tmn_code: 'FAHASA03',
+        });
+      }
+    } else {
+      Alert('Bạn vui lòng điền đầy đủ thông tin!');
+    }
+  };
+
+  return <DepositView depositClick={depositClick} />;
 };
 
 export default Deposit;

src/Screens/Action/Deposit/DepositView.js

-import React from 'react';
+import React, {useState} from 'react';
 import {View, Text, StyleSheet} from 'react-native';
 import HeaderBack from '../../../components/Header/HeaderBack';
 import TextField from '../../../components/Input/TextField';
@@ -7,16 +7,30 @@ import Button from '../../../components/Button';
 import {HEIGHTXD} from '../../../Config/Functions';
 
 const DepositView = (props) => {
+  const [money, setMoney] = useState(0);
+  const [note, setNote] = useState('');
+
   return (
     <View style={{flex: 1}}>
       <HeaderBack title={'Nạp tiền'} />
       <View style={{flex: 1, paddingHorizontal: 10, paddingTop: 10}}>
-        <TextField title={'Số tiền'} />
-        <TextField title={'Phương thức nạp'} />
-        <TextMulti numberLines={3} title={'Ghi chú'} />
+        <TextField
+          value={money}
+          isNumber={true}
+          onChangeText={(val) => setMoney(val)}
+          title={'Số tiền'}
+        />
+        <TextMulti
+          onChangeText={(val) => setNote(val)}
+          numberLines={3}
+          title={'Ghi chú'}
+        />
       </View>
       <View style={styles.containerBtn}>
-        <Button title={'Nạp tiền'} />
+        <Button
+          title={'Nạp tiền'}
+          onClick={() => props.depositClick(money, note)}
+        />
       </View>
     </View>
   );

src/Screens/Action/Deposit/Item.js

@@ -9,12 +9,17 @@ import {
 import R from '../../../assets/R';
 import Block from '../../../components/Block';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {DEPOSIT} from '../../../routers/ScreenNames';
+import {useNavigation} from '@react-navigation/native';
 
 const Item = (props) => {
   const {item} = props;
+
+  const navigate = useNavigation();
+
   return (
     <TouchableOpacity
-      onPress={() => console.log('hello')}
+      onPress={() => navigate.navigate(DEPOSIT, {method: item})}
       style={styles.containerItem}>
       <Image source={{uri: item.logo_url}} style={styles.imgIcon} />
       <Text>{item.agent}</Text>

src/Screens/Payment/Payment.js

@@ -18,8 +18,6 @@ const eventEmitter = new NativeEventEmitter(VnpayMerchantModule);
 const Payment = (props) => {
   const [text, setText] = useState('OpenSDK');
 
-  console.log('Link create payment');
-
   useEffect(() => {
     // mở sdk
     eventEmitter.addListener('PaymentBack', (e) => {

src/Screens/Payment/setup.js

@@ -17,7 +17,7 @@ function sortObject(o) {
   return sorted;
 }
 
-function create_payment_link() {
+function create_payment_link(return_url, checkout_url, money, note) {
   /*var ipAddr = req.headers['x-forwarded-for'] ||
         req.connection.remoteAddress ||
         req.socket.remoteAddress ||
@@ -34,14 +34,14 @@ function create_payment_link() {
   var tmnCode = 'ICTLIFE1';
   var secretKey = 'ISDFGWJZVJFABUMZYKDFOSYWHHYNAPFS';
   var vnpUrl = 'http://sandbox.vnpayment.vn/paymentv2/vpcpay.html';
-  var returnUrl = 'http://my.dcvinvest.com/app-vnpay-return-url.html';
+  var returnUrl = return_url;
 
   var date = new Date();
 
   var createDate = dateFormat(date, 'yyyymmddHHmmss');
   var orderId = dateFormat(date, 'HHmmss');
   //var amount = req.body.amount;
-  var amount = 25000;
+  var amount = money;
   //var bankCode = req.body.bankCode;
   var bankCode = '';
 
@@ -49,7 +49,7 @@ function create_payment_link() {
     var orderType = req.body.orderType;
     var locale = req.body.language;*/
 
-  var orderInfo = 'Thanh toan vnpay';
+  var orderInfo = note;
   var orderType = '150000';
   var locale = '';
 

src/components/Button.js

@@ -11,11 +11,9 @@ import {colors, sizes} from '../assets/theme';
 import {getFontXD, HEIGHTXD, WIDTHXD} from '../Config/Functions';
 
 const Button = (props) => {
-  const {title} = props;
+  const {title, onClick} = props;
   return (
-    <TouchableOpacity
-      style={styles.container}
-      onPress={() => console.log('hello')}>
+    <TouchableOpacity style={styles.container} onPress={() => onClick()}>
       <ImageBackground
         imageStyle={{
           borderRadius: 20,

src/components/Input/TextField.js

@@ -4,7 +4,7 @@ import {HEIGHTXD, WIDTHXD, getFontXD} from '../../Config/Functions';
 import R from '../../assets/R';
 
 const TextField = (props) => {
-  const {title, onChangeText, maxLength} = props;
+  const {title, onChangeText, maxLength, isNumber, value} = props;
 
   return (
     <View style={{marginVertical: 5}}>
@@ -17,8 +17,10 @@ const TextField = (props) => {
         {title ? title : ''}
       </Text>
       <TextInput
-        maxLength={maxLength}
+        maxLength={maxLength ? maxLength : 256}
         placeholderTextColor={R.colors.placeHolder}
+        value={value}
+        keyboardType={isNumber ? 'number-pad' : 'default'}
         onChangeText={(val) => onChangeText(val)}
         style={{
           height: HEIGHTXD(109),