docs: added checkout storefront guides (#7678)

* add first guides * added more guides * finished payment + added stripe * finished adding guides * updated generated sidebar
2024-06-12 19:46:06 +02:00
parent 7e7e6e3311
commit 85d487d90b
13 changed files with 1375 additions and 11 deletions
@@ -0,0 +1,122 @@
+import { CodeTabs, CodeTab } from "docs-ui"
+
+export const metadata = {
+  title: `Checkout Step 1: Enter Email`,
+}
+
+# {metadata.title}
+
+The first step of the checkout flow is to enter the customer's email. Then, use the [Update Cart API route](!api!/store#carts_postcartsid) to update the cart with the email.
+
+<Note title="Tip">
+
+If the customer is logged-in, you can pre-fill the email with the customer's email.
+
+</Note>
+
+For example:
+
+<CodeTabs group="store-request">
+  <CodeTab label="Fetch API" value="fetch">
+
+  ```ts
+  const cartId = localStorage.getItem("cart_id")
+
+  fetch(`http://localhost:9000/store/carts/${cartId}`, {
+    credentials: "include",
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      email
+    })
+  })
+  .then((res) => res.json())
+  .then(({ cart }) => {
+    // use cart...
+    console.log(cart)
+  })
+  ```
+
+  </CodeTab>
+  <CodeTab label="React" value="react">
+
+export const highlights = [
+  ["4", "useCart", "The `useCart` hook was defined in the Cart React Context documentation."],
+  ["13", "TODO", "Cart must have at least one item. If not, redirect to another page."],
+  ["27"], ["28"], ["29"], ["30"], ["31"], ["32"], ["33"], ["34"],
+  ["35"], ["36"], ["37"], ["38"], ["39"], ["40"]
+]
+
+  ```tsx highlights={highlights}
+  "use client" // include with Next.js 13+
+
+  import { useState } from "react"
+  import { useCart } from "../../../providers/cart"
+
+  export default function CheckoutEmailStep () {
+    const { cart, setCart } = useCart()
+    const [email, setEmail] = useState("")
+    const [loading, setLoading] = useState(false)
+
+    useEffect(() => {
+      if (cart && !cart.items?.length) {
+        // TODO redirect to another path
+      }
+    }, [cart])
+
+    const updateCartEmail = (
+      e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+    ) => {
+      if (!cart || !email.length) {
+        return
+      }
+
+      e.preventDefault()
+      setLoading(true)
+
+      fetch(`http://localhost:9000/store/carts/${cart.id}`, {
+        credentials: "include",
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          email
+        })
+      })
+      .then((res) => res.json())
+      .then(({ cart: updatedCart }) => {
+        setCart(updatedCart)
+      })
+      .finally(() => setLoading(false))
+    }
+
+    return (
+      <div>
+        {!cart && <span>Loading...</span>}
+        <input 
+          type="email" 
+          placeholder="Email" 
+          value={email} 
+          disabled={!cart}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <button
+          disabled={!cart || !email || loading}
+          onClick={updateCartEmail}
+        >
+          Set Email
+        </button>
+      </div>
+    )
+  }
+  ```
+
+  </CodeTab>
+</CodeTabs>
+
+After the customer enters and submits their email, you send a request to the Update Cart API route passing it the email in the request body.
+
+Notice that if the cart doesn't have items, you should redirect to another page as the checkout requires at least one item in the cart.