fairsure-checkout-sdk 1.0.8 → 1.0.9

package/dist/components/PaystackCheckout.js

@@ -93,9 +93,11 @@ export default function Checkout({ requestId, customerEmail, customerName, custo
                 <Text style={styles.payButtonText}>{getButtonText()}</Text>
                 {checkout.loading && (<ActivityIndicator size="small" color="white"/>)}
               </TouchableOpacity>
-              {!checkout.loading && checkout.timeLeft <= 0 && (<TouchableOpacity>
-                  <Text>Resend</Text>
-                </TouchableOpacity>)}
+              {/* {!checkout.loading && checkout.timeLeft <= 0 && (
+          <TouchableOpacity>
+            <Text>Resend</Text>
+          </TouchableOpacity>
+        )} */}
 
               {/* Footer */}
               <View style={styles.footer}>

package/dist/components/USSDPayment.js

@@ -12,6 +12,18 @@ export default function USSDPayment({ selectedBank, setSelectedBank, showBankDro
           <Ionicons name="chevron-down" size={20} color="#9CA3AF"/>
         </TouchableOpacity>
 
+        {!showBankDropdown && !selectedBank && (<View style={styles.instructionContainer}>
+            <Text style={styles.instructionTitle}>How to pay with USSD</Text>
+
+            <Text style={styles.instructionText}>
+              1. Select your bank{"\n"}
+              2. Dial the generated USSD code{"\n"}
+              3. Follow the prompts on your phone{"\n"}
+              4. Authorize payment with your PIN{"\n"}
+              5. Click the "Confirm Payment" button.
+            </Text>
+          </View>)}
+
         {showBankDropdown && (<BankDropdown ussdBanks={ussdBanks} loading={loading} onSelectBank={(bank) => {
                 setSelectedBank(bank);
                 setShowBankDropdown(false);
@@ -51,12 +63,32 @@ function USSDInstructions({ ussdCode, copied, handleCopy, loading, }) {
         <Text style={styles.ussdStepsText}>
           1. Dial the USSD code on your phone{"\n"}
           2. Follow the prompts on your screen{"\n"}
-          3. Authorize payment with your bank PIN
+          3. Authorize payment with your bank PIN{"\n"}
+          4. Click the "Confirm Payment" button.
         </Text>
       </View>
     </View>);
 }
 const styles = StyleSheet.create({
+    instructionContainer: {
+        marginTop: 12,
+        padding: 16,
+        backgroundColor: "#F9FAFB",
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: "#E5E7EB",
+    },
+    instructionTitle: {
+        fontSize: 14,
+        fontWeight: "600",
+        color: "#111827",
+        marginBottom: 8,
+    },
+    instructionText: {
+        fontSize: 13,
+        lineHeight: 22,
+        color: "#6B7280",
+    },
     overlay: {
         flex: 1,
         backgroundColor: "rgba(0,0,0,0.5)",
@@ -250,8 +282,9 @@ const styles = StyleSheet.create({
     },
     ussdCodeContainer: {
         backgroundColor: "white", // bg-white
-        borderRadius: 12, // rounded-xl
-        padding: 12, // p-4
+        borderRadius: 8, // rounded-xl
+        paddingHorizontal: 12, // p-4
+        paddingTop: 12,
         marginBottom: 12, // mb-3
     },
     ussdCodeRow: {
@@ -277,6 +310,7 @@ const styles = StyleSheet.create({
     },
     ussdStepsText: {
         fontSize: 14, // text-sm
+        padding: 4, // px-2
         color: "#1E40AF", // text-indigo-800
     },
     payButton: {

package/dist/components/usePaymentCheckout.js

@@ -67,7 +67,7 @@ export function usePaymentCheckout(amount, requestId, customerEmail, customerNam
         }
     }, [selectedMethod]);
     const fetchTransferDetails = async () => {
-        var _a, _b;
+        var _a;
         setLoading(true);
         try {
             const payload = {
@@ -84,8 +84,7 @@ export function usePaymentCheckout(amount, requestId, customerEmail, customerNam
                     "User-Agent": "PostmanRuntime/7.51.0",
                 },
             });
-            console.log("RESPONSE", (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data);
-            setTransferDetail((_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.data);
+            setTransferDetail((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data);
         }
         catch (error) {
             console.log("FETCH ERROR:", error);
@@ -127,7 +126,7 @@ export function usePaymentCheckout(amount, requestId, customerEmail, customerNam
                 codeReference: ussdBankResponse === null || ussdBankResponse === void 0 ? void 0 : ussdBankResponse.codeRef,
                 amount: ussdBankResponse === null || ussdBankResponse === void 0 ? void 0 : ussdBankResponse.amount,
             };
-            const res = await axios.post("https://api.fairsurepayment.com.ng/api/pub/ussd-status", payload, {
+            const res = await axios.post("https://api.fairsurepay.com/api/pub/ussd-status", payload, {
                 headers: {
                     Accept: "application/json",
                     "Content-Type": "application/json",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fairsure-checkout-sdk",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [

package/src/components/PaystackCheckout.tsx

@@ -194,11 +194,11 @@ export default function Checkout({
                   <ActivityIndicator size="small" color="white" />
                 )}
               </TouchableOpacity>
-              {!checkout.loading && checkout.timeLeft <= 0 && (
+              {/* {!checkout.loading && checkout.timeLeft <= 0 && (
                 <TouchableOpacity>
                   <Text>Resend</Text>
                 </TouchableOpacity>
-              )}
+              )} */}
 
               {/* Footer */}
               <View style={styles.footer}>

package/src/components/USSDPayment.tsx

@@ -56,6 +56,20 @@ export default function USSDPayment({
           <Ionicons name="chevron-down" size={20} color="#9CA3AF" />
         </TouchableOpacity>
 
+        {!showBankDropdown && !selectedBank && (
+          <View style={styles.instructionContainer}>
+            <Text style={styles.instructionTitle}>How to pay with USSD</Text>
+
+            <Text style={styles.instructionText}>
+              1. Select your bank{"\n"}
+              2. Dial the generated USSD code{"\n"}
+              3. Follow the prompts on your phone{"\n"}
+              4. Authorize payment with your PIN{"\n"}
+              5. Click the "Confirm Payment" button.
+            </Text>
+          </View>
+        )}
+
         {showBankDropdown && (
           <BankDropdown
             ussdBanks={ussdBanks}
@@ -153,13 +167,35 @@ function USSDInstructions({
         <Text style={styles.ussdStepsText}>
           1. Dial the USSD code on your phone{"\n"}
           2. Follow the prompts on your screen{"\n"}
-          3. Authorize payment with your bank PIN
+          3. Authorize payment with your bank PIN{"\n"}
+          4. Click the "Confirm Payment" button.
         </Text>
       </View>
     </View>
   );
 }
 const styles = StyleSheet.create({
+  instructionContainer: {
+    marginTop: 12,
+    padding: 16,
+    backgroundColor: "#F9FAFB",
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "#E5E7EB",
+  },
+
+  instructionTitle: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#111827",
+    marginBottom: 8,
+  },
+
+  instructionText: {
+    fontSize: 13,
+    lineHeight: 22,
+    color: "#6B7280",
+  },
   overlay: {
     flex: 1,
     backgroundColor: "rgba(0,0,0,0.5)",
@@ -356,8 +392,9 @@ const styles = StyleSheet.create({
   },
   ussdCodeContainer: {
     backgroundColor: "white", // bg-white
-    borderRadius: 12, // rounded-xl
-    padding: 12, // p-4
+    borderRadius: 8, // rounded-xl
+    paddingHorizontal: 12, // p-4
+    paddingTop: 12,
     marginBottom: 12, // mb-3
   },
   ussdCodeRow: {
@@ -383,6 +420,7 @@ const styles = StyleSheet.create({
   },
   ussdStepsText: {
     fontSize: 14, // text-sm
+    padding: 4, // px-2
     color: "#1E40AF", // text-indigo-800
   },
   payButton: {

package/src/components/usePaymentCheckout.ts

@@ -104,8 +104,6 @@ export function usePaymentCheckout(
           },
         },
       );
-      console.log("RESPONSE", res?.data?.data);
-
       setTransferDetail(res?.data?.data);
     } catch (error) {
       console.log("FETCH ERROR:", error);
@@ -151,7 +149,7 @@ export function usePaymentCheckout(
         amount: ussdBankResponse?.amount,
       };
       const res = await axios.post(
-        "https://api.fairsurepayment.com.ng/api/pub/ussd-status",
+        "https://api.fairsurepay.com/api/pub/ussd-status",
         payload,
         {
           headers: {