method payment screen

index.js

@@ -6,4 +6,6 @@ import {AppRegistry} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';
 
+import Payment from './src/Screens/Payment/Payment';
+
 AppRegistry.registerComponent(appName, () => App);

ios/Invest.xcodeproj/project.pbxproj

@@ -296,7 +296,7 @@
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				D10F3A5D59847BD5B121672E /* [CP] Embed Pods Frameworks */,
 				6CC873A1E6FA7C328D7B37A9 /* ShellScript */,
-				02495638A08D660D532BEDE8 /* [CP] Copy Pods Resources */,
+				C942336BE13796643B04CCBB /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -461,7 +461,7 @@
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
 			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
-		}; 
+		};
 		18F4A22C3F5C6E0E974FEED1 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -662,7 +662,7 @@
 			shellPath = /bin/sh;
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
-		};
+		}; 
 		D10F3A5D59847BD5B121672E /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;

package.json

@@ -17,6 +17,7 @@
     "@react-navigation/native": "^5.9.2",
     "@react-navigation/stack": "^5.14.2",
     "axios": "^0.21.1",
+    "dateformat": "^4.5.1",
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "react": "16.11.0",
@@ -39,7 +40,8 @@
     "react-native-vnpay-merchant": "/Users/macbookpro/Documents/Company/ReactNative/Invest/node_modules/react-native-vnpay-merchant",
     "react-redux": "^7.2.2",
     "redux": "^4.0.5",
-    "redux-saga": "^1.1.3"
+    "redux-saga": "^1.1.3",
+    "sha256": "^0.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",

src/Screens/Action/Deposit/ChooseMethod.js

+import React, {useEffect, useState} from 'react';
+import {View, Text, StyleSheet, FlatList, Platform, Alert} from 'react-native';
+import R from '../../../assets/R';
+import HeaderBack from '../../../components/Header/HeaderBack';
+import Item from './Item';
+import {getListMethod} from '../../../apis/Functions/Deposit';
+
+const MethodPayView = (props) => {
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  const getData = async () => {
+    const res = await getListMethod({
+      platform: Platform.OS,
+    });
+    if (res.data.code == 200 && res.data.data) {
+      setData(res.data.data);
+    } else {
+      alert('Không lấy được danh sách phương thức!');
+    }
+  };
+
+  return (
+    <View style={{flex: 1}}>
+      <HeaderBack title={'Chọn phương thức thanh toán'} />
+      <View style={{flex: 1}}>
+        <FlatList
+          keyExtractor={(item) => item.id}
+          showsVerticalScrollIndicator={false}
+          numColumns={2}
+          columnWrapperStyle={{
+            marginHorizontal: 20,
+            justifyContent: 'space-between',
+          }}
+          data={data}
+          renderItem={({item}) => <Item item={item} />}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({});
+
+export default MethodPayView;

src/Screens/Action/Deposit/Item.js

+import React from 'react';
+import {View, Text, StyleSheet, TouchableOpacity, Image} from 'react-native';
+import {
+  getFontXD,
+  HEIGHTXD,
+  WIDTHXD,
+  toPriceVnd,
+} from '../../../Config/Functions';
+import R from '../../../assets/R';
+import Block from '../../../components/Block';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+const Item = (props) => {
+  const {item} = props;
+  return (
+    <TouchableOpacity
+      onPress={() => console.log('hello')}
+      style={styles.containerItem}>
+      <Image source={{uri: item.logo_url}} style={styles.imgIcon} />
+      <Text>{item.agent}</Text>
+    </TouchableOpacity>
+  );
+};
+
+export default React.memo(Item);
+
+const styles = StyleSheet.create({
+  containerItem: {
+    width: WIDTHXD(460),
+    height: HEIGHTXD(450),
+    backgroundColor: 'white',
+    marginTop: 20,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 2.84,
+    elevation: 3,
+  },
+  imgIcon: {
+    width: WIDTHXD(400),
+    height: HEIGHTXD(300),
+    marginBottom: 10,
+    resizeMode: 'contain',
+  },
+});

src/Screens/Payment/Payment.js

@@ -10,11 +10,16 @@ import {
   View,
 } from 'react-native';
 
+import create_payment_link from './setup';
+
 import VnpayMerchant, {VnpayMerchantModule} from 'react-native-vnpay-merchant';
 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) => {
@@ -59,8 +64,7 @@ const Payment = (props) => {
         onPress={() => {
           VnpayMerchant.show({
             iconBackName: 'ic_back',
-            paymentUrl:
-              'http://sandbox.vnpayment.vn/paymentv2/vpcpay.html?vnp_Amount=2500000&vnp_Command=pay&vnp_CreateDate=20210310143159&vnp_CurrCode=VND&vnp_IpAddr=172.69.134.207&vnp_Locale=vn&vnp_OrderInfo=Thanh+toan+goi+98003+gia+25000&vnp_OrderType=190002&vnp_ReturnUrl=http%3A%2F%2Fmy.dcvinvest.com%2Fapp-vnpay-return-url.html&vnp_TmnCode=ICTLIFE1&vnp_TxnRef=EC_98003_20210310143159&vnp_Version=2.0.0&vnp_SecureHashType=SHA256&vnp_SecureHash=f9a293f8e12eeae28172c90446f955dd9ba21ff2f9d2119574e0297542501563',
+            paymentUrl: create_payment_link(),
             scheme: 'sampleapp',
             tmn_code: 'FAHASA03',
           });

src/Screens/Payment/setup.js

+function sortObject(o) {
+  var sorted = {},
+    key,
+    a = [];
+
+  for (key in o) {
+    if (o.hasOwnProperty(key)) {
+      a.push(key);
+    }
+  }
+
+  a.sort();
+
+  for (key = 0; key < a.length; key++) {
+    sorted[a[key]] = o[a[key]];
+  }
+  return sorted;
+}
+
+function create_payment_link() {
+  /*var ipAddr = req.headers['x-forwarded-for'] ||
+        req.connection.remoteAddress ||
+        req.socket.remoteAddress ||
+        req.connection.socket.remoteAddress;*/
+
+  //var config = require('config');
+  var dateFormat = require('dateformat');
+
+  /*var tmnCode = config.get('vnp_TmnCode');
+    var secretKey = config.get('vnp_HashSecret');
+    var vnpUrl = config.get('vnp_Url');
+    var returnUrl = config.get('vnp_ReturnUrl');*/
+
+  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 date = new Date();
+
+  var createDate = dateFormat(date, 'yyyymmddHHmmss');
+  var orderId = dateFormat(date, 'HHmmss');
+  //var amount = req.body.amount;
+  var amount = 25000;
+  //var bankCode = req.body.bankCode;
+  var bankCode = '';
+
+  /*var orderInfo = req.body.orderDescription;
+    var orderType = req.body.orderType;
+    var locale = req.body.language;*/
+
+  var orderInfo = 'Thanh toan vnpay';
+  var orderType = '150000';
+  var locale = '';
+
+  if (locale === null || locale === '') {
+    locale = 'vn';
+  }
+  var currCode = 'VND';
+  var vnp_Params = {};
+  vnp_Params['vnp_Version'] = '2';
+  vnp_Params['vnp_Command'] = 'pay';
+  vnp_Params['vnp_TmnCode'] = tmnCode;
+  // vnp_Params['vnp_Merchant'] = ''
+  vnp_Params['vnp_Locale'] = locale;
+  vnp_Params['vnp_CurrCode'] = currCode;
+  vnp_Params['vnp_TxnRef'] = orderId;
+  vnp_Params['vnp_OrderInfo'] = orderInfo;
+  vnp_Params['vnp_OrderType'] = orderType;
+  vnp_Params['vnp_Amount'] = amount * 100;
+  vnp_Params['vnp_ReturnUrl'] = returnUrl;
+  //vnp_Params['vnp_IpAddr'] = ipAddr;
+  vnp_Params['vnp_CreateDate'] = createDate;
+  if (bankCode !== null && bankCode !== '') {
+    vnp_Params['vnp_BankCode'] = bankCode;
+  }
+
+  vnp_Params = sortObject(vnp_Params);
+
+  var querystring = require('qs');
+  var signData = secretKey + querystring.stringify(vnp_Params, {encode: false});
+
+  var sha256 = require('sha256');
+
+  var secureHash = sha256(signData);
+
+  vnp_Params['vnp_SecureHashType'] = 'SHA256';
+  vnp_Params['vnp_SecureHash'] = secureHash;
+  vnpUrl += '?' + querystring.stringify(vnp_Params, {encode: true});
+
+  return vnpUrl;
+}
+
+export default create_payment_link;

src/apis/Functions/Deposit.js

+import {PostLogin, GetData, PostData} from '../helpers';
+
+import url from '../url';
+
+export const getListMethod = async (body) =>
+  GetData(url.urlGetListMethod, body)
+    .then((res) => res)
+    .catch((err) => err);

src/apis/helpers.js

 import KEY from '../assets/AsynStorage';
 import axios from 'axios';
-import  AsyncStorage  from '@react-native-community/async-storage'
+import AsyncStorage from '@react-native-community/async-storage';
 axios.defaults.timeout = 10000;
 export async function GetData(url, data) {
   const token = await AsyncStorage.getItem(KEY.TOKEN);
@@ -39,7 +39,7 @@ export async function PostLogin(url, json) {
       Accept: 'application/json',
       'Content-Type': 'application/json',
     },
-    timeout:30 * 1000,
+    timeout: 30 * 1000,
     data: JSON.stringify(json),
   };
   console.log('post data mobile', myRequest);
@@ -57,7 +57,7 @@ export async function PostLogin(url, json) {
 }
 
 export async function PostData(url, json, isAuth = true) {
-  const token =await AsyncStorage.getItem(KEY.TOKEN);
+  const token = await AsyncStorage.getItem(KEY.TOKEN);
   console.log(token);
   let myRequest = {
     method: 'post',
@@ -91,7 +91,7 @@ export async function PostData(url, json, isAuth = true) {
  * @param {*} isAuth is state auth
  */
 export async function PutData(url, json, isAuth = true) {
-  const token =await AsyncStorage.getItem(KEY.TOKEN);
+  const token = await AsyncStorage.getItem(KEY.TOKEN);
   let myRequest = {
     method: 'put',
     url,

src/apis/url.js

@@ -2,4 +2,5 @@ const root = 'http://api.dcvinvest.com/';
 export default {
   urllogin: root + '/api/auth/customer-login',
   urlRegistor: root + 'api/auth/customer-register',
+  urlGetListMethod: root + 'api/v1/payments/get-list-deposit-method',
 };

src/components/Header/HeaderHome.js

@@ -17,7 +17,13 @@ import {connect} from 'react-redux';
 import {HEIGHTXD, toPriceVnd} from '../../Config/Functions';
 
 import {useNavigation} from '@react-navigation/native';
-import {WITHDRAW, DEPOSIT, TRANSFER, HISTORY} from '../../routers/ScreenNames';
+import {
+  WITHDRAW,
+  DEPOSIT,
+  CHOOSEMETHOD,
+  TRANSFER,
+  HISTORY,
+} from '../../routers/ScreenNames';
 
 const HeaderHome = (props) => {
   const navigate = useNavigation();
@@ -40,7 +46,7 @@ const HeaderHome = (props) => {
           </View>
           <View style={styles.containerMenu}>
             <TouchableOpacity
-              onPress={() => navigate.navigate(DEPOSIT)}
+              onPress={() => navigate.navigate(CHOOSEMETHOD)}
               style={styles.wraper}>
               <Image style={styles.imgIcon} source={R.images.iconDeposit} />
               <Text style={styles.txt}>Nạp tiền</Text>

src/routers/PlussModal.js

@@ -14,7 +14,12 @@ import {HEIGHTXD, WIDTHXD, getFontXD} from '../Config/Functions';
 import Modal from 'react-native-modal';
 
 import {useNavigation} from '@react-navigation/native';
-import {WITHDRAW, DEPOSIT, TRANSFER} from '../routers/ScreenNames';
+import {
+  WITHDRAW,
+  DEPOSIT,
+  TRANSFER,
+  CHOOSEMETHOD,
+} from '../routers/ScreenNames';
 
 const PlussModal = (props) => {
   const [isModalVisible, setModalVisible] = useState(false);
@@ -41,7 +46,7 @@ const PlussModal = (props) => {
           <View style={styles.footer}>
             <TouchableOpacity
               onPress={() => {
-                navigate.navigate(DEPOSIT);
+                navigate.navigate(CHOOSEMETHOD);
                 toggleModal();
               }}
               style={styles.wraper1}>

src/routers/ScreenNames.js

@@ -35,3 +35,5 @@ export const TRANSFER = 'TRANSFER';
 export const HISTORY = 'HISTORY';
 
 export const CONFIRMOTP = 'CONFIRMOTP';
+
+export const CHOOSEMETHOD = 'CHOOSEMETHOD';

src/routers/StackNavigation.js

@@ -25,6 +25,8 @@ import History from '../Screens/Action/History/History';
 import Authen from '../Screens/Authen/Authen';
 import ForgotPassWord from '../Screens/Authen/ForgotPassword';
 import ConfirmOTP from '../Screens/Authen/ConfirmOTP';
+import ChooseMethod from '../Screens/Action/Deposit/ChooseMethod';
+
 import * as ScreenName from './ScreenNames';
 
 const Stack = createStackNavigator();
@@ -36,7 +38,7 @@ function MyStack(props) {
         headerStatusBarHeight: 0,
       }}
       headerMode={'none'}
-      initialRouteName={ScreenName.CONFIRMOTP}>
+      initialRouteName={ScreenName.AUTHEN}>
       <Stack.Screen name={ScreenName.LOGINSCREEN} component={Login} />
       <Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
       <Stack.Screen
@@ -52,6 +54,7 @@ function MyStack(props) {
         name={ScreenName.SERVICECUSTOMER}
         component={ServiceCustomer}
       />
+      <Stack.Screen name={ScreenName.CHOOSEMETHOD} component={ChooseMethod} />
       <Stack.Screen name={ScreenName.BONUSTEAM} component={BonusTeam} />
       <Stack.Screen name={ScreenName.MYGROUP} component={MyGroup} />
       <Stack.Screen name={ScreenName.PAYMENTS} component={Payments} />