Adds extra logic to CheckoutButton

lmac-1 · Feb 21, 2023 · 949fe39 · 949fe39 · vercel · Feb 23, 2023
1 parent 5f20a5a
commit 949fe39
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/components/CheckoutButton.js b/components/CheckoutButton.js
@@ -1,7 +1,16 @@
+import { useState } from "react";
+
 export default function CheckoutButton() {
+  const [status, setStatus] = useState("idle");
+
   return (
-    <button className="bg-emerald-50 mt-3 hover:bg-emerald-500 hover:text-white transition-colors duration-500 text-emerald-500 py-3 px-5 rounded-md w-100">
-      Proceed to checkout
-    </button>
+    <article className="mt-3 flex flex-col">
+      {/* <div className="text-red-700 text-xs mb-3 h-5 text-center">
+        Unable to connect to Stripe Checkout
+      </div> */}
+      <button className="bg-emerald-50 hover:bg-emerald-500 hover:text-white transition-colors duration-500 text-emerald-500 py-3 px-5 rounded-md w-100">
+        {status !== "loading" ? "Proceed to checkout" : "Loading..."}
+      </button>
+    </article>
   );
 }