Merge pull request #26 from brandeddavid/card-checkout

Card checkout Functionality

next.config.js

@@ -22,6 +22,10 @@ const nextConfig = {
 	env: {
 		API_HOST: process.env.API_HOST,
 		HOME: process.env.HOME || "/form",
+		CLIENT_EMAIL: process.env.CLIENT_EMAIL,
+		CLIENT_ID: process.env.CLIENT_ID,
+		CLIENT_SECRET: process.env.CLIENT_SECRET,
+
 	},
 };
 

src/api/getAuthToken.ts

@@ -0,0 +1,31 @@
+import axios from "axios";
+import "dotenv/config";
+
+const getAuthToken = async () => {
+  const headersList = {
+    Accept: "application/json",
+    "Content-Type": "application/json",
+  };
+
+  let reqOptions = {
+    url: "https://sbkltest.finsprint.io/api/v1/token",
+    method: "POST",
+    headers: headersList,
+    data: JSON.stringify(
+        {
+        email: process.env.CLIENT_EMAIL,
+        client_id: process.env.CLIENT_ID,
+        client_secret: process.env.CLIENT_SECRET,
+      }
+    ),
+  };
+  try {
+    const response = await axios.request(reqOptions);
+
+    return response;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export default getAuthToken;

src/api/proceedCheckout.ts

@@ -0,0 +1,44 @@
+import axios from "axios";
+
+const proceedCheckout = async ({ phoneNumber, email, amount , accessToken}: any) => {
+  const headersList = {
+    Accept: "application/json",
+    "Content-Type": "application/json",
+     Authorization: `Bearer ${accessToken}`,
+  };
+
+  let reqOptions = {
+    url: "https://sbkltest.finsprint.io/api/v1/invoices/checkout",
+    method: "POST",
+    headers: headersList,
+    data: JSON.stringify({
+      credit_account_number: "1115510052653",
+      merchant_name: "Redcross",
+      merchant_logo:
+        "https://www.redcross.or.ke/wp-content/uploads/2023/03/logo-203x114-1.png",
+      currency: "KES",
+      amount: amount,
+      result_url: "https://fulgence.free.beeceptor.com",
+      reference_id: "60987RED",
+      remarks: "string",
+      email: email ,
+      phone: phoneNumber,
+      gateways: "mpesa",
+      notification_channels: "sms",
+    }),
+  };
+
+  console.log("request body", { reqOptions });
+
+  try {
+    const response = await axios.request(reqOptions);
+
+    console.log("response", { response });
+
+    return response;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export default proceedCheckout;

src/app/page.tsx

@@ -10,10 +10,11 @@ import DonationForm from "../components/DonationForm";
 import { ThemeProvider } from "@mui/material";
 import { theme } from "../theme/theme";
 import { RedcrossCausesContext } from "../context/redcrossCausesContext";
-import { DonationFormContext } from "../context/donationFormContext";
+import { DonationFormContext, AuthDetailsContext } from "../context/donationFormContext";
 import InvisibleForm from "../components/InvisibleForm";
 import onSubmit from "../api/submitForm";
 import getImageBase from "../helpers/getImageBase";
+import proceedCheckout from "@/api/proceedCheckout";
 
 const Home = () => {
 	const baseImageUrl = getImageBase();
@@ -38,6 +39,11 @@ const Home = () => {
 		onRedCrossCauseSelect(event.target.value);
 	};
 
+
+	const {  handleCheckout} = useContext(AuthDetailsContext);
+
+
+
 	const handleContinue = async () => {
 		if (
 			(step >= 0 && step < 2) ||
@@ -67,11 +73,13 @@ const Home = () => {
 				}
 
 				if (donationFormDetails?.paymentOption === "Card") {
-					if (donationFormDetails?.donationOption === "donate-now") {
-						setCardToken(response);
-					} else {
-						push(`/status?id=${referenceId}`);
-					}
+					// alert("Card Checkout")
+					handleCheckout();
+					// if (donationFormDetails?.donationOption === "donate-now") {
+					// 	setCardToken(response);
+					// } else {
+					// 	push(`/status?id=${referenceId}`);
+					// }
 				}
 			} catch (error) {
 				console.error(error);

src/components/CardCheckout.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+type Props ={
+  handleClick : ()=> void;
+
+}
+
+function CardCheckout({handleClick}: Props) {
+
+  return (
+      <div className="flex items-center p-4 border border-gray-200 rounded" onClick={handleClick}>
+        <input
+          id="bordered-radio-1"
+          type="radio"
+          value=""
+          name="bordered-radio"
+          className="w-4 h-4 text-primary bg-gray-100 border-gray-300 focus:ring-red-500  focus:ring-2 "
+        />
+        <label
+          htmlFor="bordered-radio-1"
+          className="w-full py-4 ms-2 text-sm font-medium text-gray-900"
+        >
+          Click to initiate card payment
+        </label>
+      </div>
+
+  );
+}
+
+export default CardCheckout;

src/components/DonationForm.tsx

@@ -24,6 +24,8 @@ type Props = {
 const steps = ["Cause", "Amount", "Donate", "Pay"];
 
 const DonationForm = ({ step, onContinue, onBack }: Props) => {
+
+
 	const { donationFormDetails } = useContext(DonationFormContext);
 	const { selectedCause } = useContext(RedcrossCausesContext);
 	const [disabled, setDisabled] = useState(false);
@@ -108,7 +110,7 @@ const DonationForm = ({ step, onContinue, onBack }: Props) => {
 			<div className="">
 				{step === 1 && <DonationFormAmount />}
 				{step === 2 && <DonationFormPersonalDetails />}
-				{step === 3 && <DonationFormPayment />}
+				{step === 3 && <DonationFormPayment/>}
 			</div>
 			<div className="sticky bottom-0 z-50 bg-white">
 				<Divider />
@@ -163,12 +165,14 @@ const DonationForm = ({ step, onContinue, onBack }: Props) => {
 												? donationFormDetails?.totalDonationAmount
 												: donationFormDetails?.donationAmount
 										} pledge`}
-									{step === 3 &&
+									{step === 3 && donationFormDetails?.paymentOption === "Mpesa" && 
 										`Donate ${donationFormDetails?.selectedCurrency} ${
 											donationFormDetails?.handleProcessingFee
 												? donationFormDetails?.totalDonationAmount
 												: donationFormDetails?.donationAmount
 										}`}
+
+										{step === 3 && donationFormDetails?.paymentOption === "Card" && "Proceed to Checkout"}
 								</Button>
 							</div>
 						</div>