xpay-redirect 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +53 -0
- package/index.html +13 -0
- package/package.json +31 -0
- package/public/vite.svg +1 -0
- package/src/App.jsx +60 -0
- package/src/Screens/BtnScreen/index.jsx +145 -0
- package/src/Screens/FTBScreen/FTB/FTBTransactionPage.jsx +732 -0
- package/src/Screens/FTBScreen/FTB/RegNewAccount.jsx +377 -0
- package/src/Screens/FTBScreen/index.jsx +107 -0
- package/src/Screens/index.jsx +2 -0
- package/src/assets/ai Icon/ai Icon-1.png +0 -0
- package/src/assets/ai Icon/ai Icon-2.png +0 -0
- package/src/assets/ai Icon/ai Icon-3.png +0 -0
- package/src/assets/ai Icon/ai Icon-4.png +0 -0
- package/src/assets/ai Icon/ai Icon-5.png +0 -0
- package/src/index.css +40 -0
- package/src/main.jsx +10 -0
- package/vite.config.js +31 -0
package/README.md
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
## Installation
|
|
2
|
+
|
|
3
|
+
xpay-redirect has a PayNowBtn and ftbScreenIndex module
|
|
4
|
+
|
|
5
|
+
**npm:**
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
npm install xpay-redirect
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Steps
|
|
12
|
+
|
|
13
|
+
step 1: Install latest version `npm install xpay-redirect`.
|
|
14
|
+
|
|
15
|
+
step 2: import modules and with props name `config`.
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
import {PayNowBtn, FtbScreenIndex} from 'xpay-redirect';
|
|
19
|
+
import { BrowserRouter, Route, Routes } from 'react-router-dom';
|
|
20
|
+
.
|
|
21
|
+
.
|
|
22
|
+
.
|
|
23
|
+
let config = {
|
|
24
|
+
.
|
|
25
|
+
.
|
|
26
|
+
.
|
|
27
|
+
.
|
|
28
|
+
onResponse: f() ,
|
|
29
|
+
onError: f()
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
.
|
|
33
|
+
.
|
|
34
|
+
.
|
|
35
|
+
|
|
36
|
+
<Route
|
|
37
|
+
path='/'
|
|
38
|
+
element={<PayNowBtn config={config}/>}
|
|
39
|
+
/>
|
|
40
|
+
<Route
|
|
41
|
+
exact
|
|
42
|
+
path="/XPayConnector"
|
|
43
|
+
element={<FtbScreenIndex config={config}/>}
|
|
44
|
+
/>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Note
|
|
48
|
+
|
|
49
|
+
- onResponse and onError are function. Pass parameter and to get access of it.
|
|
50
|
+
|
|
51
|
+
## Example
|
|
52
|
+
|
|
53
|
+
[Sample app](https://github.com/shankareshBB)
|
package/index.html
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Payment Gateway</title>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id="root"></div>
|
|
11
|
+
<script type="module" src="/src/main.jsx"></script>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
package/package.json
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "xpay-redirect",
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"main": "dist/xpayroute.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "vite build",
|
|
9
|
+
"preview": "vite preview"
|
|
10
|
+
},
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"@emotion/react": "^11.10.0",
|
|
13
|
+
"@emotion/styled": "^11.10.0",
|
|
14
|
+
"@mui/icons-material": "^5.8.4",
|
|
15
|
+
"@mui/lab": "^5.0.0-alpha.93",
|
|
16
|
+
"@mui/material": "^5.9.3",
|
|
17
|
+
"@mui/x-date-pickers": "^5.0.0-beta.3",
|
|
18
|
+
"axios": "^0.27.2",
|
|
19
|
+
"date-fns": "^2.29.1",
|
|
20
|
+
"react": "^18.2.0",
|
|
21
|
+
"react-dom": "^18.2.0",
|
|
22
|
+
"react-router-dom": "^6.3.0"
|
|
23
|
+
},
|
|
24
|
+
"devDependencies": {
|
|
25
|
+
"@types/react": "^18.0.17",
|
|
26
|
+
"@types/react-dom": "^18.0.6",
|
|
27
|
+
"@vitejs/plugin-react": "^2.1.0",
|
|
28
|
+
"vite": "^3.1.0",
|
|
29
|
+
"vite-plugin-css-injected-by-js": "^2.1.0"
|
|
30
|
+
}
|
|
31
|
+
}
|
package/public/vite.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
package/src/App.jsx
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { BrowserRouter, Route, Routes } from 'react-router-dom';
|
|
3
|
+
import FtbScreenIndex from './Screens/FTBScreen';
|
|
4
|
+
import PayNowBtn from './Screens/BtnScreen';
|
|
5
|
+
|
|
6
|
+
function App() {
|
|
7
|
+
|
|
8
|
+
let config = {
|
|
9
|
+
baseurl: "",
|
|
10
|
+
channelId: "",
|
|
11
|
+
loginId: "",
|
|
12
|
+
password: "",
|
|
13
|
+
merchantID: "",
|
|
14
|
+
signature: "",
|
|
15
|
+
integrityCheckString: "",
|
|
16
|
+
transactionDetails: {
|
|
17
|
+
txid: 0,
|
|
18
|
+
item: "",
|
|
19
|
+
amount: 0.0,
|
|
20
|
+
quantity: 0,
|
|
21
|
+
invoiceid: 0,
|
|
22
|
+
purchaseCurrency: "",
|
|
23
|
+
purchaseAmount:0,
|
|
24
|
+
expiryTime:"3"
|
|
25
|
+
},
|
|
26
|
+
merchantName: "CAMBODIA",
|
|
27
|
+
btnName: "Web PayNow",
|
|
28
|
+
merchantUrl: "",
|
|
29
|
+
onResponse: function onResponse(data) {
|
|
30
|
+
console.log("Response item :::",data);
|
|
31
|
+
},
|
|
32
|
+
onError: function onError(data) {
|
|
33
|
+
console.log("Error item :::",data);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
return (
|
|
38
|
+
<div className="XPay-App">
|
|
39
|
+
<BrowserRouter>
|
|
40
|
+
<Routes>
|
|
41
|
+
<Route
|
|
42
|
+
path="/"
|
|
43
|
+
element={<PayNowBtn config={config}/>}
|
|
44
|
+
/>
|
|
45
|
+
<Route
|
|
46
|
+
exact
|
|
47
|
+
path="/XPayConnector"
|
|
48
|
+
element={<FtbScreenIndex config={config}/>}
|
|
49
|
+
/>
|
|
50
|
+
<Route
|
|
51
|
+
path="*"
|
|
52
|
+
element={<PayNowBtn config={config}/>}
|
|
53
|
+
/>
|
|
54
|
+
</Routes>
|
|
55
|
+
</BrowserRouter>
|
|
56
|
+
</div>
|
|
57
|
+
)
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
export default App
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
// Material UI (ui lib)
|
|
4
|
+
import Button from '@mui/material/Button';
|
|
5
|
+
// axios (api call lib)
|
|
6
|
+
import axios from 'axios';
|
|
7
|
+
|
|
8
|
+
function strcmpXPAY(a, b) {
|
|
9
|
+
return (a < b ? -1 : (a > b ? 1 : 0));
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export default function PayNowBtn({ config }) {
|
|
13
|
+
|
|
14
|
+
// for calling only once due to react18 useEffect calls twice
|
|
15
|
+
const callingOnce = React.useRef(true);
|
|
16
|
+
const { baseurl } = config;
|
|
17
|
+
const onResponse = config?.onResponse
|
|
18
|
+
? config.onResponse
|
|
19
|
+
: (data) => {
|
|
20
|
+
console.log("Btn Response ::> ", data);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const onError = config?.onError
|
|
24
|
+
? config.onError
|
|
25
|
+
: (err) => {
|
|
26
|
+
throw err;
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
// default btn disabled, enables when gets payment token ID
|
|
30
|
+
const [webPayNowBtnDisable, setWebPayNowBtnDisable] = React.useState(true);
|
|
31
|
+
|
|
32
|
+
// webpages sends data-
|
|
33
|
+
const [sessionId, setSessionId] = React.useState(config?.sessionid);
|
|
34
|
+
// error message at checking payment token
|
|
35
|
+
const [errMsg, setErrMsg] = React.useState('');
|
|
36
|
+
|
|
37
|
+
// openSessionPurchase response ptk
|
|
38
|
+
const [paymentTokenId, setPaymentTokenId] = React.useState(null);
|
|
39
|
+
|
|
40
|
+
// API calls while pay-now btn shows
|
|
41
|
+
const OpenSessionPurchase = async() => {
|
|
42
|
+
// open session api call
|
|
43
|
+
let jsonData = {
|
|
44
|
+
"channelId":config?.channelId || '',
|
|
45
|
+
"loginId": config?.loginId || '',
|
|
46
|
+
"password": config?.password || '',
|
|
47
|
+
"merchantID": config?.merchantID || '',
|
|
48
|
+
"signature": config?.signature || '',
|
|
49
|
+
"integrityCheckString": config?.integrityCheckString || '',
|
|
50
|
+
"transactionDetails": config?.transactionDetails || ''
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
try {
|
|
54
|
+
const response = await axios({
|
|
55
|
+
method: 'post',
|
|
56
|
+
url :`${baseurl}/openSessionv2`,
|
|
57
|
+
data: jsonData
|
|
58
|
+
});
|
|
59
|
+
onResponse({"at":"/openSessionv2", "response":response.data});
|
|
60
|
+
setSessionId(response.data.result.sessionid);
|
|
61
|
+
setPaymentTokenId(response.data.result.xTran.paymentTokenid);
|
|
62
|
+
|
|
63
|
+
// set Payouts api call
|
|
64
|
+
let data = {
|
|
65
|
+
"ptokenId": response.data.result.xTran.paymentTokenid || "",
|
|
66
|
+
"sessionid": response.data.result.sessionid || "",
|
|
67
|
+
// "payoutrequest": config.transactionDetails.amount
|
|
68
|
+
"xpayPayOutRequest": [{
|
|
69
|
+
"poAccount": "0",
|
|
70
|
+
"poAmount": `${config.transactionDetails.amount}`
|
|
71
|
+
}]
|
|
72
|
+
}
|
|
73
|
+
try {
|
|
74
|
+
const resNext = await axios({
|
|
75
|
+
method: 'post',
|
|
76
|
+
url: `${baseurl}/SetPayouts`,
|
|
77
|
+
data: data
|
|
78
|
+
});
|
|
79
|
+
onResponse({"at":"/SetPayouts", "response":resNext.data});
|
|
80
|
+
if (strcmpXPAY(resNext.data.errorMessage, "SUCCESS") == 0) {
|
|
81
|
+
setWebPayNowBtnDisable(false);
|
|
82
|
+
setErrMsg('');
|
|
83
|
+
} else {
|
|
84
|
+
setWebPayNowBtnDisable(true);
|
|
85
|
+
setErrMsg(resNext.data.errorMessage);
|
|
86
|
+
}
|
|
87
|
+
} catch (error) {
|
|
88
|
+
onError({"at":"/SetPayouts", "error":error?.response?.data || error?.message || error});
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
} catch (error) {
|
|
93
|
+
onError({"at":"/openSessionv2", "error":error?.response?.data || error?.message || error});
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
};
|
|
97
|
+
// init transaction
|
|
98
|
+
const handlePayNowTransaction = async() => {
|
|
99
|
+
let text = {
|
|
100
|
+
"ptokenId": paymentTokenId || "",
|
|
101
|
+
"sessionid": sessionId || ""
|
|
102
|
+
};
|
|
103
|
+
try {
|
|
104
|
+
const res = await axios({
|
|
105
|
+
method: 'post',
|
|
106
|
+
url: `${baseurl}/initialiseTransactionV2`,
|
|
107
|
+
data: text
|
|
108
|
+
});
|
|
109
|
+
onResponse({"at":"/initialiseTransactionV2", "response":res.data});
|
|
110
|
+
|
|
111
|
+
sessionStorage.setItem("sessionid", sessionId);
|
|
112
|
+
sessionStorage.setItem("paymenttokenid", paymentTokenId);
|
|
113
|
+
window.location.href = '/XPayConnector';
|
|
114
|
+
} catch (error) {
|
|
115
|
+
onError({"at":"/initialiseTransactionV2", "error":error?.response?.data || error?.message || error});
|
|
116
|
+
}
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
React.useEffect(() => {
|
|
120
|
+
if(callingOnce.current) {
|
|
121
|
+
callingOnce.current=false;
|
|
122
|
+
if (!config) onError(new Error("Please pass all required config in Props"));
|
|
123
|
+
OpenSessionPurchase();
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
return () => { }
|
|
127
|
+
}, []);
|
|
128
|
+
|
|
129
|
+
return (
|
|
130
|
+
<Button
|
|
131
|
+
variant='contained'
|
|
132
|
+
style={{
|
|
133
|
+
textTransform: 'none',
|
|
134
|
+
...config?.style
|
|
135
|
+
}}
|
|
136
|
+
className='web-paynow-btn'
|
|
137
|
+
disabled={webPayNowBtnDisable}
|
|
138
|
+
onClick={() => {
|
|
139
|
+
handlePayNowTransaction();
|
|
140
|
+
}}
|
|
141
|
+
>
|
|
142
|
+
{errMsg || config?.btnName}
|
|
143
|
+
</Button>
|
|
144
|
+
);
|
|
145
|
+
};
|