Checkout Step 5: Complete Cart

Once you finish any required actions with the third-party payment provider, you can complete the cart and place the order.

To complete the cart, send a request to the Complete Cart API route.

For example:

Code
1fetch(2  `http://localhost:9000/store/carts/${cartId}/complete`,3  {4    credentials: "include",5    headers: {6      "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",7    },8    method: "POST",9  }10)11.then((res) => res.json())12.then(({ type, cart, order, error }) => {13  if (type === "cart" && cart) {14    // an error occured15    console.error(error)16  } else if (type === "order" && order) {17    // TODO redirect to order success page18    alert("Order placed.")19    console.log(order)20    // unset cart ID from local storage21    localStorage.removeItem("cart_id")22  }23})

In the response of the request, the type field determines whether the cart completion was successful:

• If the type is cart, it means the cart completion failed. The error response field holds the error details.
• If the type is order, it means the cart was completed and the order was placed successfully.

When the cart completion is successful, it's important to unset the cart ID from the localStorage, as the cart is no longer usable.

---

React Example with Default System Payment Provider#

For example, to complete the cart when the default system payment provider is used:

Code
1"use client" // include with Next.js 13+2
3import { useState } from "react"4import { useCart } from "../../providers/cart"5
6export default function SystemDefaultPayment() {7  const { cart, refreshCart } = useCart()8  const [loading, setLoading] = useState(false)9
10  const handlePayment = (11    e: React.MouseEvent<HTMLButtonElement, MouseEvent>12  ) => {13    e.preventDefault()14
15    if (!cart) {16      return17    }18
19    setLoading(true)20    21    // TODO perform any custom payment handling logic22    23    // complete the cart24    fetch(25      `http://localhost:9000/store/carts/${cart.id}/complete`,26      {27        credentials: "include",28        headers: {29          "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",30        },31        method: "POST",32      }33    )34    .then((res) => res.json())35    .then(({ type, cart, order, error }) => {36      if (type === "cart" && cart) {37        // an error occured38        console.error(error)39      } else if (type === "order" && order) {40        // TODO redirect to order success page41        alert("Order placed.")42        console.log(order)43        refreshCart()44      }45    })46    .finally(() => setLoading(false))47  }48
49  return (50    <button51      onClick={handlePayment}52      disabled={loading}53    >54      Place Order55    </button>56  )57}

In the example above, you create a handlePayment function in the payment component. In this function, you:

• Optionally perform any required actions with the third-party payment provider. For example, authorize the payment. For the default system payment provider, no actions are required.
• Send a request to the Complete Cart API route once all actions with the third-party payment provider are performed.
• In the received response of the request, if the type is cart, it means that the cart completion failed. The error is set in the error response field.
• If the type is order, it means the card was completed and the order was placed successfully. You can access the order in the order response field.
• When the order is placed, you must unset the cart_id from the localStorage. You can redirect the customer to an order success page at this point.

---

React Example with Third-Party Provider#

Refer to the Stripe guide for an example on integrating a third-party provider and implementing card completion.

Edit this page