Display payment error and success Message

bistro-boss-payment-client/src/pages/Dashboard/Payment/CheckoutForm.jsx

@@ -5,69 +5,70 @@ import useAxiosSecure from "../../../hooks/useAxiosSecure";
 import useAuth from "../../../hooks/useAuth";
 
 const CheckoutForm = ({ price }) => {
-  const { user } = useAuth();
   const stripe = useStripe();
   const elements = useElements();
-  const [cardError, setCardError] = useState("");
+  const { user } = useAuth();
   const [axiosSecure] = useAxiosSecure();
+  const [cardError, setCardError] = useState("");
   const [clientSecret, setClientSecret] = useState("");
+  const [processing, setProcessing] = useState(false);
+  const [transactionId, setTransactionId] = useState("");
 
   useEffect(() => {
-    // Create PaymentIntent as soon as the page loads
-    axiosSecure
-      .post("/create-payment-intent", { price })
-      .then((res) => {
-        console.log(res.data.clientSecret);
+    if (price > 0) {
+      axiosSecure.post("/create-payment-intent", { price }).then((res) => {
+        // console.log(res.data.clientSecret);
         setClientSecret(res.data.clientSecret);
-      })
-      .catch((err) => {
-        console.log(err);
       });
+    }
   }, [price, axiosSecure]);
 
   const handleSubmit = async (event) => {
     event.preventDefault();
 
     if (!stripe || !elements) {
-      // Stripe.js has not yet loaded.
-      // Make sure to disable form submission until Stripe.js has loaded.
       return;
     }
 
     const card = elements.getElement(CardElement);
     if (card === null) {
-      // Can't find a form element on the page.
       return;
     }
-    const { error, paymentMethod } = await stripe.createPaymentMethod({
+
+    const { error } = await stripe.createPaymentMethod({
       type: "card",
       card,
     });
+
     if (error) {
-      console.log("Error", error);
+      console.log("error", error);
       setCardError(error.message);
-    }
-    if (paymentMethod) {
+    } else {
       setCardError("");
-      console.log("PaymentMethod", paymentMethod);
+      // console.log('payment method', paymentMethod)
     }
+
+    setProcessing(true);
+
     const { paymentIntent, error: confirmError } =
       await stripe.confirmCardPayment(clientSecret, {
         payment_method: {
           card: card,
           billing_details: {
-            name: user?.displayName || "Annonymous",
-            email: user?.email || "Annonymous",
+            email: user?.email || "unknown",
+            name: user?.displayName || "anonymous",
           },
         },
       });
+
     if (confirmError) {
-      console.log("Error", confirmError);
-      setCardError(confirmError.message);
+      console.log(confirmError);
     }
-    if (paymentIntent) {
-      console.log("PaymentIntent", paymentIntent);
-      setCardError("");
+
+    console.log("payment intent", paymentIntent);
+    setProcessing(false);
+    if (paymentIntent.status === "succeeded") {
+      setTransactionId(paymentIntent.id);
     }
   };
 
@@ -93,14 +94,19 @@ const CheckoutForm = ({ price }) => {
         <button
           className="btn mt-6 btn-block"
           type="submit"
-          disabled={!stripe || !clientSecret}
+          disabled={!stripe || !clientSecret || processing}
         >
           Pay Now
         </button>
       </form>
       {cardError && (
         <p className="mt-6 text-center text-red-600">{cardError}</p>
       )}
+      {transactionId && (
+        <p className="text-green-500 text-center font-medium">
+          Transaction complete with transactionId: {transactionId}
+        </p>
+      )}
     </div>
   );
 };

bistro-boss-payment-client/src/pages/Dashboard/Payment/Payment.css

@@ -1,12 +1,3 @@
-form {
-    padding: 30px;
-    align-self: center;
-    box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
-        0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
-    border-radius: 7px;
-
-}
-
 
 #payment-message {
     color: rgb(18, 21, 26);
@@ -20,32 +11,6 @@ form {
     margin-bottom: 24px;
 }
 
-/* Buttons and links */
-button {
-    background: #5469d4;
-    font-family: Arial, sans-serif;
-    color: #ffffff;
-    border-radius: 4px;
-    border: 0;
-    padding: 12px 16px;
-    font-size: 16px;
-    font-weight: 600;
-    cursor: pointer;
-    display: block;
-    transition: all 0.2s ease;
-    box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
-    width: 100%;
-}
-
-button:hover {
-    filter: contrast(115%);
-}
-
-button:disabled {
-    opacity: 0.5;
-    cursor: default;
-}
-
 
 
 

bistro-boss-payment-server/index.js

@@ -221,10 +221,7 @@ async function run() {
         })
 
         // POST payment data on MongoDB:
-        app.post('/payments', async (req, res) => {
-            const payment = req.body;
-            const result = await paymentCollection.insertOne(payment);
-        })
+
 
         // Send a ping to confirm a successful connection
         await client.db("admin").command({ ping: 1 });