Aiminaabee

Checkout Step 1: Enter Email

Set the customer email on the cart.

On this page

In this guide, you'll learn how to add an email step to the checkout flow. This is step 1 of the five-step checkout. Keep the order in Checkout Overview. On Next.js, update the cart from a server action using _aiminaabee_cart_id.

When the user enters their email, use the Update Cart API route to update the cart with the email.

Tip: If the customer is logged-in, you can pre-fill the email with the customer's email.

For example:

Tip: - This example uses the useCart hook defined in the Cart React Context guide.

React

tsx

tsxCopy
"use client" // include with Next.js 13+


  import { useEffect, useState } from "react"
  import { useCart } from "@/providers/cart"
  import { sdk } from "@/lib/sdk"


  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)


      sdk.store.cart.update("us", cart.id, {
        email,
      })
      .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>
    )
  }

JS SDK

ts

tsCopy
sdk.store.cart.update(storeCode, cart.id, {
    email,
  })
  .then(({ cart }) => {
    // use cart...
    console.log(cart)
  })

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. Redirecting to another page is not covered in this guide as this depends on the storefront framework you're using.