fairsure-checkout-sdk 1.0.7 → 1.0.8
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/dist/components/PaystackCheckout.js +10 -5
- package/dist/components/TransferPayment.js +103 -22
- package/dist/components/usePaymentCheckout.js +11 -10
- package/package.json +9 -2
- package/src/components/PaystackCheckout.tsx +51 -45
- package/src/components/TransferPayment.tsx +118 -33
- package/src/components/usePaymentCheckout.ts +10 -9
|
@@ -74,13 +74,14 @@ export default function Checkout({ requestId, customerEmail, customerName, custo
|
|
|
74
74
|
<View style={styles.body}>
|
|
75
75
|
{/* Payment Method Selector */}
|
|
76
76
|
<PaymentMethodSelector methods={paymentMethods} selectedMethod={checkout.selectedMethod} onSelectMethod={checkout.setSelectedMethod}/>
|
|
77
|
+
<View style={styles.minHeight}>
|
|
78
|
+
{/* Payment Forms */}
|
|
79
|
+
{checkout.selectedMethod === "card" && (<CardPayment cardNumber={checkout.cardNumber} setCardNumber={checkout.setCardNumber} expiryDate={checkout.expiryDate} setExpiryDate={checkout.setExpiryDate} cvv={checkout.cvv} message={checkout.message} setCvv={checkout.setCvv} cardcontinue={checkout.cardcontinue} showOtp={checkout.showOtp} handleOTPComplete={(otp) => console.log(otp)} handleOTPChange={checkout.setOtp} handlePinChange={checkout.setPin} formatCardNumber={checkout.formatCardNumber} formatExpiry={checkout.formatExpiry}/>)}
|
|
77
80
|
|
|
78
|
-
|
|
79
|
-
{checkout.selectedMethod === "card" && (<CardPayment cardNumber={checkout.cardNumber} setCardNumber={checkout.setCardNumber} expiryDate={checkout.expiryDate} setExpiryDate={checkout.setExpiryDate} cvv={checkout.cvv} message={checkout.message} setCvv={checkout.setCvv} cardcontinue={checkout.cardcontinue} showOtp={checkout.showOtp} handleOTPComplete={(otp) => console.log(otp)} handleOTPChange={checkout.setOtp} handlePinChange={checkout.setPin} formatCardNumber={checkout.formatCardNumber} formatExpiry={checkout.formatExpiry}/>)}
|
|
81
|
+
{checkout.selectedMethod === "transfer" && (<TransferPayment loading={checkout.loading || !checkout.transferDetail} amount={amount} transferDetail={checkout.transferDetail} timeLeft={checkout.timeLeft} copied={checkout.copied} handleCopy={checkout.handleCopy} formatAmount={checkout.formatAmount} formatTime={checkout.formatTime}/>)}
|
|
80
82
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
{checkout.selectedMethod === "ussd" && (<USSDPayment selectedBank={checkout.selectedBank} setSelectedBank={checkout.setSelectedBank} showBankDropdown={checkout.showBankDropdown} setShowBankDropdown={checkout.setShowBankDropdown} ussdBanks={checkout.ussdBanks} loading={checkout.loading} ussString={checkout.ussdBankResponse} copied={checkout.copied} handleCopy={checkout.handleCopy}/>)}
|
|
83
|
+
{checkout.selectedMethod === "ussd" && (<USSDPayment selectedBank={checkout.selectedBank} setSelectedBank={checkout.setSelectedBank} showBankDropdown={checkout.showBankDropdown} setShowBankDropdown={checkout.setShowBankDropdown} ussdBanks={checkout.ussdBanks} loading={checkout.loading} ussString={checkout.ussdBankResponse} copied={checkout.copied} handleCopy={checkout.handleCopy}/>)}
|
|
84
|
+
</View>
|
|
84
85
|
|
|
85
86
|
{/* Payment Button */}
|
|
86
87
|
<TouchableOpacity onPress={handlePayment} disabled={isButtonDisabled()} style={[
|
|
@@ -161,6 +162,9 @@ const styles = StyleSheet.create({
|
|
|
161
162
|
eyeText: {
|
|
162
163
|
color: "#007AFF",
|
|
163
164
|
},
|
|
165
|
+
minHeight: {
|
|
166
|
+
minHeight: "50%",
|
|
167
|
+
},
|
|
164
168
|
headerTop: {
|
|
165
169
|
flexDirection: "row",
|
|
166
170
|
justifyContent: "space-between",
|
|
@@ -187,6 +191,7 @@ const styles = StyleSheet.create({
|
|
|
187
191
|
backgroundColor: "white",
|
|
188
192
|
borderBottomLeftRadius: 20,
|
|
189
193
|
borderBottomRightRadius: 20,
|
|
194
|
+
minHeight: "100%",
|
|
190
195
|
},
|
|
191
196
|
paymentMethodsContainer: {
|
|
192
197
|
flexDirection: "row",
|
|
@@ -1,33 +1,63 @@
|
|
|
1
1
|
import { Ionicons } from "@expo/vector-icons";
|
|
2
2
|
import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View, } from "react-native";
|
|
3
3
|
export default function TransferPayment({ loading, amount, transferDetail, timeLeft, copied, handleCopy, formatAmount, formatTime, }) {
|
|
4
|
-
if (loading) {
|
|
5
|
-
|
|
6
|
-
}
|
|
4
|
+
// if (loading) {
|
|
5
|
+
// return <ActivityIndicator size="large" color="#4F46E5" />;
|
|
6
|
+
// }
|
|
7
7
|
return (<View>
|
|
8
|
-
<View style={styles.
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
<View style={styles.tipCard}>
|
|
9
|
+
<View style={styles.tipHeader}>
|
|
10
|
+
<Text style={styles.tipIcon}>💡</Text>
|
|
11
|
+
<Text style={styles.tipTitle}>Quick tip before you transfer</Text>
|
|
12
|
+
</View>
|
|
12
13
|
|
|
13
|
-
<View>
|
|
14
|
-
<
|
|
14
|
+
<View style={styles.tipStep}>
|
|
15
|
+
<Text style={styles.stepNumber}>1</Text>
|
|
16
|
+
<Text style={styles.stepText}>Copy the account details below</Text>
|
|
17
|
+
</View>
|
|
15
18
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
</TouchableOpacity>
|
|
25
|
-
</View>
|
|
26
|
-
</View>
|
|
19
|
+
<View style={styles.tipStep}>
|
|
20
|
+
<Text style={styles.stepNumber}>2</Text>
|
|
21
|
+
<Text style={styles.stepText}>
|
|
22
|
+
Open your banking app on{" "}
|
|
23
|
+
<Text style={{ fontWeight: "bold" }}>this or another device</Text>{" "}
|
|
24
|
+
and make the transfer
|
|
25
|
+
</Text>
|
|
26
|
+
</View>
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
<View style={styles.tipStep}>
|
|
29
|
+
<Text style={styles.stepNumber}>3</Text>
|
|
30
|
+
<Text style={styles.stepText}>
|
|
31
|
+
Come back here and tap{" "}
|
|
32
|
+
<Text style={{ fontWeight: "bold" }}>"I have sent the money"</Text>
|
|
33
|
+
</Text>
|
|
29
34
|
</View>
|
|
30
35
|
</View>
|
|
36
|
+
<View style={styles.transferBox}>
|
|
37
|
+
{loading || !transferDetail ? (<ActivityIndicator size="large" color="#4F46E5"/>) : (<View style={{ width: "100%" }}>
|
|
38
|
+
<Text style={styles.transferText}>
|
|
39
|
+
Transfer ₦{formatAmount(amount)} to the account below
|
|
40
|
+
</Text>
|
|
41
|
+
|
|
42
|
+
<View>
|
|
43
|
+
<TransferDetailItem label="Bank Name" value={transferDetail.bankName}/>
|
|
44
|
+
|
|
45
|
+
<View style={styles.transferDetail}>
|
|
46
|
+
<Text style={styles.transferLabel}>Account Number</Text>
|
|
47
|
+
<View style={styles.row}>
|
|
48
|
+
<Text style={styles.accountNumber}>
|
|
49
|
+
{transferDetail.accountNumber}
|
|
50
|
+
</Text>
|
|
51
|
+
<TouchableOpacity onPress={() => handleCopy(transferDetail.accountNumber)}>
|
|
52
|
+
<Ionicons name={copied ? "checkmark" : "copy-outline"} size={20} color="#4F46E5"/>
|
|
53
|
+
</TouchableOpacity>
|
|
54
|
+
</View>
|
|
55
|
+
</View>
|
|
56
|
+
|
|
57
|
+
<TransferDetailItem label="Account Name" value={transferDetail.accountName}/>
|
|
58
|
+
</View>
|
|
59
|
+
</View>)}
|
|
60
|
+
</View>
|
|
31
61
|
|
|
32
62
|
<View style={styles.transferNote}>
|
|
33
63
|
<Text style={styles.transferNoteText}>
|
|
@@ -169,7 +199,12 @@ const styles = StyleSheet.create({
|
|
|
169
199
|
borderColor: "#BFDBFE",
|
|
170
200
|
borderRadius: 12,
|
|
171
201
|
padding: 8,
|
|
172
|
-
|
|
202
|
+
minHeight: 150,
|
|
203
|
+
display: "flex",
|
|
204
|
+
flexDirection: "column",
|
|
205
|
+
justifyContent: "center",
|
|
206
|
+
alignItems: "center",
|
|
207
|
+
marginBottom: 4,
|
|
173
208
|
},
|
|
174
209
|
transferText: {
|
|
175
210
|
fontSize: 14,
|
|
@@ -198,6 +233,7 @@ const styles = StyleSheet.create({
|
|
|
198
233
|
borderColor: "#FDE68A",
|
|
199
234
|
borderRadius: 12,
|
|
200
235
|
padding: 8,
|
|
236
|
+
marginBottom: 4,
|
|
201
237
|
},
|
|
202
238
|
transferNoteText: { fontSize: 14, color: "#78350F" },
|
|
203
239
|
dropdown: {
|
|
@@ -308,4 +344,49 @@ const styles = StyleSheet.create({
|
|
|
308
344
|
fontSize: 14, // text-sm
|
|
309
345
|
color: "#6B7280", // text-gray-500
|
|
310
346
|
},
|
|
347
|
+
tipCard: {
|
|
348
|
+
backgroundColor: "#EEF2FF", // light indigo
|
|
349
|
+
borderRadius: 12,
|
|
350
|
+
padding: 16,
|
|
351
|
+
marginBottom: 16,
|
|
352
|
+
borderLeftWidth: 4,
|
|
353
|
+
borderLeftColor: "#4F46E5",
|
|
354
|
+
},
|
|
355
|
+
tipHeader: {
|
|
356
|
+
flexDirection: "row",
|
|
357
|
+
alignItems: "center",
|
|
358
|
+
marginBottom: 12,
|
|
359
|
+
gap: 8,
|
|
360
|
+
},
|
|
361
|
+
tipIcon: {
|
|
362
|
+
fontSize: 18,
|
|
363
|
+
},
|
|
364
|
+
tipTitle: {
|
|
365
|
+
fontWeight: "700",
|
|
366
|
+
fontSize: 15,
|
|
367
|
+
color: "#3730A3",
|
|
368
|
+
},
|
|
369
|
+
tipStep: {
|
|
370
|
+
flexDirection: "row",
|
|
371
|
+
alignItems: "flex-start",
|
|
372
|
+
gap: 10,
|
|
373
|
+
marginBottom: 8,
|
|
374
|
+
},
|
|
375
|
+
stepNumber: {
|
|
376
|
+
backgroundColor: "#4F46E5",
|
|
377
|
+
color: "#fff",
|
|
378
|
+
borderRadius: 10,
|
|
379
|
+
width: 20,
|
|
380
|
+
height: 20,
|
|
381
|
+
textAlign: "center",
|
|
382
|
+
fontSize: 12,
|
|
383
|
+
fontWeight: "700",
|
|
384
|
+
lineHeight: 20,
|
|
385
|
+
},
|
|
386
|
+
stepText: {
|
|
387
|
+
flex: 1,
|
|
388
|
+
fontSize: 14,
|
|
389
|
+
color: "#374151",
|
|
390
|
+
lineHeight: 20,
|
|
391
|
+
},
|
|
311
392
|
});
|
|
@@ -42,7 +42,7 @@ export function usePaymentCheckout(amount, requestId, customerEmail, customerNam
|
|
|
42
42
|
if (transferDetail.validityPeriodMins > 0) {
|
|
43
43
|
setTimeLeft(transferDetail.validityPeriodMins * 60);
|
|
44
44
|
}
|
|
45
|
-
}, [transferDetail.validityPeriodMins]);
|
|
45
|
+
}, [transferDetail, transferDetail.validityPeriodMins]);
|
|
46
46
|
useEffect(() => {
|
|
47
47
|
if (timeLeft <= 0)
|
|
48
48
|
return;
|
|
@@ -67,7 +67,7 @@ export function usePaymentCheckout(amount, requestId, customerEmail, customerNam
|
|
|
67
67
|
}
|
|
68
68
|
}, [selectedMethod]);
|
|
69
69
|
const fetchTransferDetails = async () => {
|
|
70
|
-
var _a;
|
|
70
|
+
var _a, _b;
|
|
71
71
|
setLoading(true);
|
|
72
72
|
try {
|
|
73
73
|
const payload = {
|
|
@@ -76,7 +76,7 @@ export function usePaymentCheckout(amount, requestId, customerEmail, customerNam
|
|
|
76
76
|
isBill: true,
|
|
77
77
|
requestId,
|
|
78
78
|
};
|
|
79
|
-
const res = await axios.post("https://api.
|
|
79
|
+
const res = await axios.post("https://api.fairsurepay.com/api/pub/generate-account", payload, {
|
|
80
80
|
headers: {
|
|
81
81
|
Accept: "application/json",
|
|
82
82
|
"Content-Type": "application/json",
|
|
@@ -84,7 +84,8 @@ export function usePaymentCheckout(amount, requestId, customerEmail, customerNam
|
|
|
84
84
|
"User-Agent": "PostmanRuntime/7.51.0",
|
|
85
85
|
},
|
|
86
86
|
});
|
|
87
|
-
|
|
87
|
+
console.log("RESPONSE", (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data);
|
|
88
|
+
setTransferDetail((_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.data);
|
|
88
89
|
}
|
|
89
90
|
catch (error) {
|
|
90
91
|
console.log("FETCH ERROR:", error);
|
|
@@ -102,7 +103,7 @@ export function usePaymentCheckout(amount, requestId, customerEmail, customerNam
|
|
|
102
103
|
bankCode: selectedBank === null || selectedBank === void 0 ? void 0 : selectedBank.code,
|
|
103
104
|
};
|
|
104
105
|
try {
|
|
105
|
-
const res = await axios.post("https://api.
|
|
106
|
+
const res = await axios.post("https://api.fairsurepay.com/api/pub/generate-ussd", payload, {
|
|
106
107
|
headers: {
|
|
107
108
|
Accept: "application/json",
|
|
108
109
|
"Content-Type": "application/json",
|
|
@@ -154,7 +155,7 @@ export function usePaymentCheckout(amount, requestId, customerEmail, customerNam
|
|
|
154
155
|
setLoading(true);
|
|
155
156
|
try {
|
|
156
157
|
setLoading(true);
|
|
157
|
-
const res = await axios.get("https://api.
|
|
158
|
+
const res = await axios.get("https://api.fairsurepay.com/api/pub/list-ussd-banks", {
|
|
158
159
|
timeout: 15000,
|
|
159
160
|
headers: {
|
|
160
161
|
Accept: "application/json",
|
|
@@ -242,7 +243,7 @@ export function usePaymentCheckout(amount, requestId, customerEmail, customerNam
|
|
|
242
243
|
httpBrowserTimeDifference: `${-new Date().getTimezoneOffset()}`,
|
|
243
244
|
},
|
|
244
245
|
};
|
|
245
|
-
const res = await axios.post("https://api.
|
|
246
|
+
const res = await axios.post("https://api.fairsurepay.com/api/pub/card-payment", payload, {
|
|
246
247
|
headers: {
|
|
247
248
|
Accept: "application/json",
|
|
248
249
|
"Content-Type": "application/json",
|
|
@@ -276,7 +277,7 @@ export function usePaymentCheckout(amount, requestId, customerEmail, customerNam
|
|
|
276
277
|
cvv,
|
|
277
278
|
pin,
|
|
278
279
|
};
|
|
279
|
-
const res = await axios.post("https://api.
|
|
280
|
+
const res = await axios.post("https://api.fairsurepay.com/api/pub/encrypt-test", payload, {
|
|
280
281
|
timeout: 15000,
|
|
281
282
|
headers: {
|
|
282
283
|
Accept: "application/json",
|
|
@@ -312,7 +313,7 @@ export function usePaymentCheckout(amount, requestId, customerEmail, customerNam
|
|
|
312
313
|
customerPhone,
|
|
313
314
|
customerEmail,
|
|
314
315
|
};
|
|
315
|
-
const res = await axios.post("https://api.
|
|
316
|
+
const res = await axios.post("https://api.fairsurepay.com/api/pub/submit-otp", payload, {
|
|
316
317
|
headers: {
|
|
317
318
|
Accept: "application/json",
|
|
318
319
|
"Content-Type": "application/json",
|
|
@@ -333,7 +334,7 @@ export function usePaymentCheckout(amount, requestId, customerEmail, customerNam
|
|
|
333
334
|
var _a;
|
|
334
335
|
setLoading(true);
|
|
335
336
|
try {
|
|
336
|
-
const res = await axios.get(`https://api.
|
|
337
|
+
const res = await axios.get(`https://api.fairsurepay.com/api/pub/transfer-status?transactionReference=${transferDetail === null || transferDetail === void 0 ? void 0 : transferDetail.transactionReference}`, {
|
|
337
338
|
timeout: 15000,
|
|
338
339
|
headers: {
|
|
339
340
|
Accept: "application/json",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fairsure-checkout-sdk",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"files": [
|
|
@@ -14,7 +14,13 @@
|
|
|
14
14
|
},
|
|
15
15
|
"scripts": {
|
|
16
16
|
"build": "tsc",
|
|
17
|
-
"pack": "npm pack"
|
|
17
|
+
"pack": "npm pack",
|
|
18
|
+
"dev": "tsc --watch",
|
|
19
|
+
"publish:local": "npm run build && yalc push",
|
|
20
|
+
"dev:push": "nodemon --watch src --ext ts,tsx --exec \"npm run build && yalc push\"",
|
|
21
|
+
"release:patch": "npm version patch && npm run build && npm publish",
|
|
22
|
+
"release:minor": "npm version minor && npm run build && npm publish",
|
|
23
|
+
"release:major": "npm version major && npm run build && npm publish"
|
|
18
24
|
},
|
|
19
25
|
"dependencies": {
|
|
20
26
|
"@expo/vector-icons": "^15.0.3",
|
|
@@ -23,6 +29,7 @@
|
|
|
23
29
|
},
|
|
24
30
|
"devDependencies": {
|
|
25
31
|
"@types/react": "^19.2.10",
|
|
32
|
+
"nodemon": "^3.1.14",
|
|
26
33
|
"typescript": "^5.9.3"
|
|
27
34
|
}
|
|
28
35
|
}
|
|
@@ -129,53 +129,54 @@ export default function Checkout({
|
|
|
129
129
|
selectedMethod={checkout.selectedMethod}
|
|
130
130
|
onSelectMethod={checkout.setSelectedMethod}
|
|
131
131
|
/>
|
|
132
|
+
<View style={styles.minHeight}>
|
|
133
|
+
{/* Payment Forms */}
|
|
134
|
+
{checkout.selectedMethod === "card" && (
|
|
135
|
+
<CardPayment
|
|
136
|
+
cardNumber={checkout.cardNumber}
|
|
137
|
+
setCardNumber={checkout.setCardNumber}
|
|
138
|
+
expiryDate={checkout.expiryDate}
|
|
139
|
+
setExpiryDate={checkout.setExpiryDate}
|
|
140
|
+
cvv={checkout.cvv}
|
|
141
|
+
message={checkout.message}
|
|
142
|
+
setCvv={checkout.setCvv}
|
|
143
|
+
cardcontinue={checkout.cardcontinue}
|
|
144
|
+
showOtp={checkout.showOtp}
|
|
145
|
+
handleOTPComplete={(otp) => console.log(otp)}
|
|
146
|
+
handleOTPChange={checkout.setOtp}
|
|
147
|
+
handlePinChange={checkout.setPin}
|
|
148
|
+
formatCardNumber={checkout.formatCardNumber}
|
|
149
|
+
formatExpiry={checkout.formatExpiry}
|
|
150
|
+
/>
|
|
151
|
+
)}
|
|
132
152
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
handleOTPComplete={(otp) => console.log(otp)}
|
|
146
|
-
handleOTPChange={checkout.setOtp}
|
|
147
|
-
handlePinChange={checkout.setPin}
|
|
148
|
-
formatCardNumber={checkout.formatCardNumber}
|
|
149
|
-
formatExpiry={checkout.formatExpiry}
|
|
150
|
-
/>
|
|
151
|
-
)}
|
|
152
|
-
|
|
153
|
-
{checkout.selectedMethod === "transfer" && (
|
|
154
|
-
<TransferPayment
|
|
155
|
-
loading={checkout.loading}
|
|
156
|
-
amount={amount}
|
|
157
|
-
transferDetail={checkout.transferDetail}
|
|
158
|
-
timeLeft={checkout.timeLeft}
|
|
159
|
-
copied={checkout.copied}
|
|
160
|
-
handleCopy={checkout.handleCopy}
|
|
161
|
-
formatAmount={checkout.formatAmount}
|
|
162
|
-
formatTime={checkout.formatTime}
|
|
163
|
-
/>
|
|
164
|
-
)}
|
|
153
|
+
{checkout.selectedMethod === "transfer" && (
|
|
154
|
+
<TransferPayment
|
|
155
|
+
loading={checkout.loading || !checkout.transferDetail}
|
|
156
|
+
amount={amount}
|
|
157
|
+
transferDetail={checkout.transferDetail}
|
|
158
|
+
timeLeft={checkout.timeLeft}
|
|
159
|
+
copied={checkout.copied}
|
|
160
|
+
handleCopy={checkout.handleCopy}
|
|
161
|
+
formatAmount={checkout.formatAmount}
|
|
162
|
+
formatTime={checkout.formatTime}
|
|
163
|
+
/>
|
|
164
|
+
)}
|
|
165
165
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
166
|
+
{checkout.selectedMethod === "ussd" && (
|
|
167
|
+
<USSDPayment
|
|
168
|
+
selectedBank={checkout.selectedBank}
|
|
169
|
+
setSelectedBank={checkout.setSelectedBank}
|
|
170
|
+
showBankDropdown={checkout.showBankDropdown}
|
|
171
|
+
setShowBankDropdown={checkout.setShowBankDropdown}
|
|
172
|
+
ussdBanks={checkout.ussdBanks}
|
|
173
|
+
loading={checkout.loading}
|
|
174
|
+
ussString={checkout.ussdBankResponse}
|
|
175
|
+
copied={checkout.copied}
|
|
176
|
+
handleCopy={checkout.handleCopy}
|
|
177
|
+
/>
|
|
178
|
+
)}
|
|
179
|
+
</View>
|
|
179
180
|
|
|
180
181
|
{/* Payment Button */}
|
|
181
182
|
<TouchableOpacity
|
|
@@ -281,6 +282,10 @@ const styles = StyleSheet.create({
|
|
|
281
282
|
color: "#007AFF",
|
|
282
283
|
},
|
|
283
284
|
|
|
285
|
+
minHeight: {
|
|
286
|
+
minHeight: "50%",
|
|
287
|
+
},
|
|
288
|
+
|
|
284
289
|
headerTop: {
|
|
285
290
|
flexDirection: "row",
|
|
286
291
|
justifyContent: "space-between",
|
|
@@ -307,6 +312,7 @@ const styles = StyleSheet.create({
|
|
|
307
312
|
backgroundColor: "white",
|
|
308
313
|
borderBottomLeftRadius: 20,
|
|
309
314
|
borderBottomRightRadius: 20,
|
|
315
|
+
minHeight: "100%",
|
|
310
316
|
},
|
|
311
317
|
paymentMethodsContainer: {
|
|
312
318
|
flexDirection: "row",
|
|
@@ -32,46 +32,80 @@ export default function TransferPayment({
|
|
|
32
32
|
formatAmount,
|
|
33
33
|
formatTime,
|
|
34
34
|
}: TransferPaymentProps) {
|
|
35
|
-
if (loading) {
|
|
36
|
-
|
|
37
|
-
}
|
|
35
|
+
// if (loading) {
|
|
36
|
+
// return <ActivityIndicator size="large" color="#4F46E5" />;
|
|
37
|
+
// }
|
|
38
38
|
|
|
39
39
|
return (
|
|
40
40
|
<View>
|
|
41
|
+
<View style={styles.tipCard}>
|
|
42
|
+
<View style={styles.tipHeader}>
|
|
43
|
+
<Text style={styles.tipIcon}>💡</Text>
|
|
44
|
+
<Text style={styles.tipTitle}>Quick tip before you transfer</Text>
|
|
45
|
+
</View>
|
|
46
|
+
|
|
47
|
+
<View style={styles.tipStep}>
|
|
48
|
+
<Text style={styles.stepNumber}>1</Text>
|
|
49
|
+
<Text style={styles.stepText}>Copy the account details below</Text>
|
|
50
|
+
</View>
|
|
51
|
+
|
|
52
|
+
<View style={styles.tipStep}>
|
|
53
|
+
<Text style={styles.stepNumber}>2</Text>
|
|
54
|
+
<Text style={styles.stepText}>
|
|
55
|
+
Open your banking app on{" "}
|
|
56
|
+
<Text style={{ fontWeight: "bold" }}>this or another device</Text>{" "}
|
|
57
|
+
and make the transfer
|
|
58
|
+
</Text>
|
|
59
|
+
</View>
|
|
60
|
+
|
|
61
|
+
<View style={styles.tipStep}>
|
|
62
|
+
<Text style={styles.stepNumber}>3</Text>
|
|
63
|
+
<Text style={styles.stepText}>
|
|
64
|
+
Come back here and tap{" "}
|
|
65
|
+
<Text style={{ fontWeight: "bold" }}>"I have sent the money"</Text>
|
|
66
|
+
</Text>
|
|
67
|
+
</View>
|
|
68
|
+
</View>
|
|
41
69
|
<View style={styles.transferBox}>
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
70
|
+
{loading || !transferDetail ? (
|
|
71
|
+
<ActivityIndicator size="large" color="#4F46E5" />
|
|
72
|
+
) : (
|
|
73
|
+
<View style={{ width: "100%" }}>
|
|
74
|
+
<Text style={styles.transferText}>
|
|
75
|
+
Transfer ₦{formatAmount(amount)} to the account below
|
|
76
|
+
</Text>
|
|
77
|
+
|
|
78
|
+
<View>
|
|
79
|
+
<TransferDetailItem
|
|
80
|
+
label="Bank Name"
|
|
81
|
+
value={transferDetail.bankName}
|
|
82
|
+
/>
|
|
45
83
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
84
|
+
<View style={styles.transferDetail}>
|
|
85
|
+
<Text style={styles.transferLabel}>Account Number</Text>
|
|
86
|
+
<View style={styles.row}>
|
|
87
|
+
<Text style={styles.accountNumber}>
|
|
88
|
+
{transferDetail.accountNumber}
|
|
89
|
+
</Text>
|
|
90
|
+
<TouchableOpacity
|
|
91
|
+
onPress={() => handleCopy(transferDetail.accountNumber)}
|
|
92
|
+
>
|
|
93
|
+
<Ionicons
|
|
94
|
+
name={copied ? "checkmark" : "copy-outline"}
|
|
95
|
+
size={20}
|
|
96
|
+
color="#4F46E5"
|
|
97
|
+
/>
|
|
98
|
+
</TouchableOpacity>
|
|
99
|
+
</View>
|
|
100
|
+
</View>
|
|
51
101
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
{transferDetail.accountNumber}
|
|
57
|
-
</Text>
|
|
58
|
-
<TouchableOpacity
|
|
59
|
-
onPress={() => handleCopy(transferDetail.accountNumber)}
|
|
60
|
-
>
|
|
61
|
-
<Ionicons
|
|
62
|
-
name={copied ? "checkmark" : "copy-outline"}
|
|
63
|
-
size={20}
|
|
64
|
-
color="#4F46E5"
|
|
65
|
-
/>
|
|
66
|
-
</TouchableOpacity>
|
|
102
|
+
<TransferDetailItem
|
|
103
|
+
label="Account Name"
|
|
104
|
+
value={transferDetail.accountName}
|
|
105
|
+
/>
|
|
67
106
|
</View>
|
|
68
107
|
</View>
|
|
69
|
-
|
|
70
|
-
<TransferDetailItem
|
|
71
|
-
label="Account Name"
|
|
72
|
-
value={transferDetail.accountName}
|
|
73
|
-
/>
|
|
74
|
-
</View>
|
|
108
|
+
)}
|
|
75
109
|
</View>
|
|
76
110
|
|
|
77
111
|
<View style={styles.transferNote}>
|
|
@@ -229,7 +263,12 @@ const styles = StyleSheet.create({
|
|
|
229
263
|
borderColor: "#BFDBFE",
|
|
230
264
|
borderRadius: 12,
|
|
231
265
|
padding: 8,
|
|
232
|
-
|
|
266
|
+
minHeight: 150,
|
|
267
|
+
display: "flex",
|
|
268
|
+
flexDirection: "column",
|
|
269
|
+
justifyContent: "center",
|
|
270
|
+
alignItems: "center",
|
|
271
|
+
marginBottom: 4,
|
|
233
272
|
},
|
|
234
273
|
transferText: {
|
|
235
274
|
fontSize: 14,
|
|
@@ -258,6 +297,7 @@ const styles = StyleSheet.create({
|
|
|
258
297
|
borderColor: "#FDE68A",
|
|
259
298
|
borderRadius: 12,
|
|
260
299
|
padding: 8,
|
|
300
|
+
marginBottom: 4,
|
|
261
301
|
},
|
|
262
302
|
transferNoteText: { fontSize: 14, color: "#78350F" },
|
|
263
303
|
dropdown: {
|
|
@@ -369,4 +409,49 @@ const styles = StyleSheet.create({
|
|
|
369
409
|
fontSize: 14, // text-sm
|
|
370
410
|
color: "#6B7280", // text-gray-500
|
|
371
411
|
},
|
|
412
|
+
tipCard: {
|
|
413
|
+
backgroundColor: "#EEF2FF", // light indigo
|
|
414
|
+
borderRadius: 12,
|
|
415
|
+
padding: 16,
|
|
416
|
+
marginBottom: 16,
|
|
417
|
+
borderLeftWidth: 4,
|
|
418
|
+
borderLeftColor: "#4F46E5",
|
|
419
|
+
},
|
|
420
|
+
tipHeader: {
|
|
421
|
+
flexDirection: "row",
|
|
422
|
+
alignItems: "center",
|
|
423
|
+
marginBottom: 12,
|
|
424
|
+
gap: 8,
|
|
425
|
+
},
|
|
426
|
+
tipIcon: {
|
|
427
|
+
fontSize: 18,
|
|
428
|
+
},
|
|
429
|
+
tipTitle: {
|
|
430
|
+
fontWeight: "700",
|
|
431
|
+
fontSize: 15,
|
|
432
|
+
color: "#3730A3",
|
|
433
|
+
},
|
|
434
|
+
tipStep: {
|
|
435
|
+
flexDirection: "row",
|
|
436
|
+
alignItems: "flex-start",
|
|
437
|
+
gap: 10,
|
|
438
|
+
marginBottom: 8,
|
|
439
|
+
},
|
|
440
|
+
stepNumber: {
|
|
441
|
+
backgroundColor: "#4F46E5",
|
|
442
|
+
color: "#fff",
|
|
443
|
+
borderRadius: 10,
|
|
444
|
+
width: 20,
|
|
445
|
+
height: 20,
|
|
446
|
+
textAlign: "center",
|
|
447
|
+
fontSize: 12,
|
|
448
|
+
fontWeight: "700",
|
|
449
|
+
lineHeight: 20,
|
|
450
|
+
},
|
|
451
|
+
stepText: {
|
|
452
|
+
flex: 1,
|
|
453
|
+
fontSize: 14,
|
|
454
|
+
color: "#374151",
|
|
455
|
+
lineHeight: 20,
|
|
456
|
+
},
|
|
372
457
|
});
|
|
@@ -56,7 +56,7 @@ export function usePaymentCheckout(
|
|
|
56
56
|
if (transferDetail.validityPeriodMins > 0) {
|
|
57
57
|
setTimeLeft(transferDetail.validityPeriodMins * 60);
|
|
58
58
|
}
|
|
59
|
-
}, [transferDetail.validityPeriodMins]);
|
|
59
|
+
}, [transferDetail, transferDetail.validityPeriodMins]);
|
|
60
60
|
|
|
61
61
|
useEffect(() => {
|
|
62
62
|
if (timeLeft <= 0) return;
|
|
@@ -92,9 +92,8 @@ export function usePaymentCheckout(
|
|
|
92
92
|
isBill: true,
|
|
93
93
|
requestId,
|
|
94
94
|
};
|
|
95
|
-
|
|
96
95
|
const res = await axios.post(
|
|
97
|
-
"https://api.
|
|
96
|
+
"https://api.fairsurepay.com/api/pub/generate-account",
|
|
98
97
|
payload,
|
|
99
98
|
{
|
|
100
99
|
headers: {
|
|
@@ -105,6 +104,8 @@ export function usePaymentCheckout(
|
|
|
105
104
|
},
|
|
106
105
|
},
|
|
107
106
|
);
|
|
107
|
+
console.log("RESPONSE", res?.data?.data);
|
|
108
|
+
|
|
108
109
|
setTransferDetail(res?.data?.data);
|
|
109
110
|
} catch (error) {
|
|
110
111
|
console.log("FETCH ERROR:", error);
|
|
@@ -123,7 +124,7 @@ export function usePaymentCheckout(
|
|
|
123
124
|
|
|
124
125
|
try {
|
|
125
126
|
const res = await axios.post(
|
|
126
|
-
"https://api.
|
|
127
|
+
"https://api.fairsurepay.com/api/pub/generate-ussd",
|
|
127
128
|
payload,
|
|
128
129
|
{
|
|
129
130
|
headers: {
|
|
@@ -181,7 +182,7 @@ export function usePaymentCheckout(
|
|
|
181
182
|
try {
|
|
182
183
|
setLoading(true);
|
|
183
184
|
const res = await axios.get(
|
|
184
|
-
"https://api.
|
|
185
|
+
"https://api.fairsurepay.com/api/pub/list-ussd-banks",
|
|
185
186
|
{
|
|
186
187
|
timeout: 15000,
|
|
187
188
|
headers: {
|
|
@@ -279,7 +280,7 @@ export function usePaymentCheckout(
|
|
|
279
280
|
},
|
|
280
281
|
};
|
|
281
282
|
const res = await axios.post(
|
|
282
|
-
"https://api.
|
|
283
|
+
"https://api.fairsurepay.com/api/pub/card-payment",
|
|
283
284
|
payload,
|
|
284
285
|
{
|
|
285
286
|
headers: {
|
|
@@ -316,7 +317,7 @@ export function usePaymentCheckout(
|
|
|
316
317
|
};
|
|
317
318
|
|
|
318
319
|
const res = await axios.post(
|
|
319
|
-
"https://api.
|
|
320
|
+
"https://api.fairsurepay.com/api/pub/encrypt-test",
|
|
320
321
|
payload,
|
|
321
322
|
{
|
|
322
323
|
timeout: 15000,
|
|
@@ -354,7 +355,7 @@ export function usePaymentCheckout(
|
|
|
354
355
|
customerEmail,
|
|
355
356
|
};
|
|
356
357
|
const res = await axios.post(
|
|
357
|
-
"https://api.
|
|
358
|
+
"https://api.fairsurepay.com/api/pub/submit-otp",
|
|
358
359
|
payload,
|
|
359
360
|
{
|
|
360
361
|
headers: {
|
|
@@ -377,7 +378,7 @@ export function usePaymentCheckout(
|
|
|
377
378
|
setLoading(true);
|
|
378
379
|
try {
|
|
379
380
|
const res = await axios.get(
|
|
380
|
-
`https://api.
|
|
381
|
+
`https://api.fairsurepay.com/api/pub/transfer-status?transactionReference=${transferDetail?.transactionReference}`,
|
|
381
382
|
{
|
|
382
383
|
timeout: 15000,
|
|
383
384
|
headers: {
|