Build a Checkout Flow

"use client"
import { useState } from "react"
import dash from "@/lib/dash"

export function CheckoutFlow() {
  const [step, setStep] = useState(1) // 1: info, 2: shipping, 3: payment
  const [email, setEmail] = useState("")
  const [shipping, setShipping] = useState({})
  const [otp, setOtp] = useState("")

  // Step 1: Start checkout
  async function handleStart() {
    await dash.checkout.start({ cartId: dash.cart.cartId, email })
    setStep(2)
  }

  // Step 2: Get shipping rates
  async function handleShipping(address) {
    setShipping(address)
    setStep(3)
  }

  // Step 3: Process payment
  async function handlePayment() {
    await dash.payment.load()
    const { token, descriptor } = await dash.payment.tokenize({
      cardNumber: "...", expDate: "...", cvv: "...",
    })

    const { order } = await dash.checkout.complete({
      cartId: dash.cart.cartId,
      email,
      code: otp,
      shipping,
      payment_token: { token, descriptor },
    })

    // Redirect to confirmation
    window.location.href = `/order-confirmation?id=${order.id}`
  }

  // Render steps...
}