Aiminaabee

11. Confirmation

Show order details after checkout completes.

On this page

After the customer places an order, you redirect them to a confirmation page that shows them their general order details. In this step, you'll create this confirmation page.

The confirmation page will receive the order's ID as a path parameter. Then, it'll retrieve the order's details from the Aiminaabee application and shows those details to the customer.

To create the confirmation page, create the file app/confirmation/[id]/page.tsx with the following content:

Directory structure after creating confirmation page file

tsx

tsxCopy
import { clx, Heading } from "@aiminaabeejs/admin-ui"
import { sdk } from "@/lib/sdk"


type Params = {
  params: Promise<{ id: string }>
}


export default async function ConfirmationPage({
  params,
}: Params) {
  const orderId = (await params).id


  const { order } = await sdk.store.order.retrieve("us", orderId)


  return (
    <div className={clx(
      "bg-ui-bg-base rounded-lg py-4 px-6 w-full",
      "flex gap-4 flex-col shadow-elevation-card-rest"
    )}>
      <Heading level="h2">Thank you, {order.shipping_address?.first_name}!</Heading>
      <p className="text-ui-fg-subtle">Your order has been placed. We are working to get it settled.</p>
      <hr className="bg-ui-bg-subtle" />
      <div className="flex gap-2 flex-col">
        <span className="flex gap-1">
          <span className="text-sm text-ui-fg-muted">Order number:</span>
          <span className="text-sm text-ui-fg-base">{order.display_id}</span>
        </span>
        <span className="flex gap-1">
          <span className="text-sm text-ui-fg-muted">Order date:</span>
          <span className="text-sm text-ui-fg-base">{
            order.created_at.toString()
          }</span>
        </span>
      </div>
    </div>
  )
}

The ConfirmationPage component receives the order ID as a path parameter. In the component, you retrieve the order's details from the Aiminaabee application using the JS SDK.

Then, you show the order's details, including the order number, order date, and a thank you message.

Test it Out

While both the Aiminaabee application and the Aiminaabee Next.js storefront template are running, either refresh the page you had open from the previous step, or restart the express checkout flow to place an order. You'll see the confirmation page showing the order's details.

Confirmation page showing the order's ID and date

Next: Next steps