From 1d023fd69b86b62527edb4c582562b244b79a037 Mon Sep 17 00:00:00 2001
From: Leon Xu <dcwinfield362@gmail.com>
Date: Sat, 7 May 2022 14:13:19 -0700
Subject: [PATCH] doc: add buy now button with conditional rendering and error
 conditional rendering

---
 src/Checkout/Payment/Payment.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/Checkout/Payment/Payment.js b/src/Checkout/Payment/Payment.js
index a605b6f..f5c3ebd 100644
--- a/src/Checkout/Payment/Payment.js
+++ b/src/Checkout/Payment/Payment.js
@@ -12,6 +12,8 @@ function Payment() {
   const stripe = useStripe();
   const elements = useElements();
 
+  const [succeeded, setSucceed] = useState(false);
+  const [processing, setProcessing] = useState("");
   const [error, setError] = useState(null);
   const [disabled, setDisabled] = useState(true);
 
@@ -70,7 +72,12 @@ function Payment() {
                   thousandSeparator={true}
                   prefix={"$"}
                 />
+                <button disabled={processing || disabled || succeeded}>
+                  <span>{processing ? <p>Processing...</p> : "Buy Now"}</span>
+                </button>
               </article>
+
+              {error && <article>{error}</article>}
             </form>
           </article>
         </article>