12. Order confirmation

Show the placed order after checkout completes.

On this page

The last step in this tutorial is to create an order confirmation screen that customers are taken to after successfully placing an order.

You'll implement the order confirmation screen, then add it to the navigation structure.

Create Order Confirmation Screen Component

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

tsx

tsxCopy

1import { Loading } from "@/components/loading"
2import { Button } from "@/components/ui/button"
3import { IconSymbol } from "@/components/ui/icon-symbol"
4import { Colors } from "@/constants/theme"
5import { useCart } from "@/context/cart-context"
6import { useColorScheme } from "@/hooks/use-color-scheme"
7import { formatPrice } from "@/lib/format-price"
8import { getPaymentProviderInfo } from "@/lib/payment-providers"
9import { sdk } from "@/lib/sdk"
10import type { HttpTypes } from "@aiminaabeejs/types"
11import { Image } from "expo-image"
12import { useLocalSearchParams, useRouter } from "expo-router"
13import React, { useCallback, useEffect, useRef, useState } from "react"
14import { ScrollView, StyleSheet, Text, View } from "react-native"
15
16export default function OrderConfirmationScreen() {
17  const { id } = useLocalSearchParams<{ id: string }>()
18  const router = useRouter()
19  const colorScheme = useColorScheme()
20  const colors = Colors[colorScheme ?? "light"]
21  const { clearCart } = useCart()
22
23  const [order, setOrder] = useState<HttpTypes.StoreOrder | null>(null)
24  const [loading, setLoading] = useState(true)
25  const [error, setError] = useState<string | null>(null)
26  const hasCleared = useRef(false)
27
28  // TODO fetch order details and clear cart
29}
30
31const styles = StyleSheet.create({
32  container: {
33    flex: 1,
34  },
35  centerContainer: {
36    flex: 1,
37    justifyContent: "center",
38    alignItems: "center",
39    padding: 20,
40  },
41  content: {
42    padding: 20,
43  },
44  successIcon: {
45    width: 80,
46    height: 80,
47    borderRadius: 40,
48    alignItems: "center",
49    justifyContent: "center",
50    alignSelf: "center",
51    marginBottom: 24,
52  },
53  checkmark: {
54    fontSize: 48,
55    color: "#fff",
56    fontWeight: "700",
57  },
58  title: {
59    fontSize: 28,
60    fontWeight: "700",
61    textAlign: "center",
62    marginBottom: 8,
63  },
64  subtitle: {
65    fontSize: 16,
66    textAlign: "center",
67    marginBottom: 32,
68  },
69  card: {
70    borderWidth: 1,
71    borderRadius: 12,
72    padding: 16,
73    marginBottom: 16,
74  },
75  cardTitle: {
76    fontSize: 18,
77    fontWeight: "700",
78    marginBottom: 16,
79  },
80  infoRow: {
81    flexDirection: "row",
82    justifyContent: "space-between",
83    marginBottom: 12,
84  },
85  label: {
86    fontSize: 14,
87  },
88  value: {
89    fontSize: 14,
90    fontWeight: "500",
91  },
92  sectionTitle: {
93    fontSize: 16,
94    fontWeight: "600",
95    marginTop: 16,
96    marginBottom: 8,
97  },
98  addressText: {
99    fontSize: 14,
100    marginBottom: 4,
101  },
102  paymentMethodRow: {
103    flexDirection: "row",
104    alignItems: "center",
105    marginBottom: 4,
106  },
107  itemRow: {
108    flexDirection: "row",
109    alignItems: "center",
110    marginBottom: 16,
111    paddingBottom: 16,
112    borderBottomWidth: 1,
113  },
114  lastItemRow: {
115    borderBottomWidth: 0,
116    marginBottom: 0,
117    paddingBottom: 0,
118  },
119  itemImage: {
120    width: 60,
121    height: 60,
122    borderRadius: 8,
123    marginRight: 12,
124  },
125  itemInfo: {
126    flex: 1,
127  },
128  itemTitle: {
129    fontSize: 14,
130    fontWeight: "600",
131    marginBottom: 4,
132  },
133  itemVariant: {
134    fontSize: 12,
135    marginBottom: 4,
136  },
137  itemQuantity: {
138    fontSize: 12,
139  },
140  itemPrice: {
141    fontSize: 14,
142    fontWeight: "600",
143    marginLeft: 12,
144  },
145  summaryRow: {
146    flexDirection: "row",
147    justifyContent: "space-between",
148    marginBottom: 12,
149  },
150  summaryLabel: {
151    fontSize: 14,
152  },
153  summaryValue: {
154    fontSize: 14,
155    fontWeight: "500",
156  },
157  totalRow: {
158    marginTop: 12,
159    paddingTop: 12,
160    borderTopWidth: 1,
161  },
162  totalLabel: {
163    fontSize: 18,
164    fontWeight: "700",
165  },
166  totalValue: {
167    fontSize: 20,
168    fontWeight: "700",
169  },
170  button: {
171    marginTop: 20,
172  },
173  continueButton: {
174    marginBottom: 24,
175  },
176  errorText: {
177    fontSize: 16,
178    textAlign: "center",
179    marginBottom: 20,
180  },
181})

The OrderConfirmationScreen component includes the following state variables:

order: The order details fetched from the backend.
loading: A boolean indicating whether the order details are being loaded.
error: An error message if fetching the order details fails.

Next, you'll fetch the order details using the order ID from the URL parameters, and clear the cart once the order is successfully placed. Replace the // TODO fetch order details and clear cart comment with the following:

tsx

tsxCopy

1const fetchOrder = useCallback(async () => {
2  try {
3    setLoading(true)
4    setError(null)
5
6    const { order: fetchedOrder } = await sdk.store.order.retrieve("us", id, {
7      fields: "*payment_collections.payments",
8    })
9    setOrder(fetchedOrder)
10  } catch (err) {
11    console.error("Failed to fetch order:", err)
12    setError("Failed to load order details")
13  } finally {
14    setLoading(false)
15  }
16}, [id])
17
18// Fetch order when id changes
19useEffect(() => {
20  if (id) {
21    fetchOrder()
22  }
23}, [id, fetchOrder])
24
25// Clear cart when order confirmation page loads (only once)
26useEffect(() => {
27  if (!hasCleared.current) {
28    hasCleared.current = true
29    clearCart()
30  }
31}, [clearCart])
32
33// TODO render order details

The fetchOrder function retrieves order details from the Aiminaabee backend using the order ID from the URL parameters.

Two useEffect hooks are added:

One calls fetchOrder when the order ID changes.
Another clears the cart when the order confirmation page loads, ensuring it runs only once.

Finally, you'll render the order details. Replace the // TODO render order details comment with the following:

tsx

tsxCopy

1if (loading) {
2  return <Loading message="Loading order details..." />
3}
4
5if (error || !order) {
6  return (
7    <View style={[styles.centerContainer, { backgroundColor: colors.background }]}>
8      <Text style={[styles.errorText, { color: colors.text }]}>
9        {error || "Order not found"}
10      </Text>
11      <Button
12        title="Go to Home"
13        onPress={() => {
14          // Reset to home screen and clear the navigation stack
15          router.dismissAll()
16          router.replace("/(drawer)/(tabs)/(home)")
17        }}
18        style={styles.button}
19      />
20    </View>
21  )
22}
23
24return (
25  <ScrollView style={[styles.container, { backgroundColor: colors.background }]}>
26    <View style={styles.content}>
27      <View style={[styles.successIcon, { backgroundColor: colors.success }]}>
28        <Text style={styles.checkmark}>✓</Text>
29      </View>
30
31      <Text style={[styles.title, { color: colors.text }]}>Order Confirmed!</Text>
32      <Text style={[styles.subtitle, { color: colors.icon }]}>
33        We have received your order and will process it as soon as possible.
34      </Text>
35
36      <Button
37        title="Continue Shopping"
38        onPress={() => {
39          // Reset to home screen and clear the navigation stack
40          router.dismissAll()
41          router.replace("/(drawer)/(tabs)/(home)")
42        }}
43        style={styles.continueButton}
44      />
45
46      <View style={[styles.card, { backgroundColor: colors.background, borderColor: colors.icon + "30" }]}>
47        <Text style={[styles.cardTitle, { color: colors.text }]}>Order Details</Text>
48
49        <View style={styles.infoRow}>
50          <Text style={[styles.label, { color: colors.icon }]}>Order ID</Text>
51          <Text style={[styles.value, { color: colors.text }]}>{order.display_id}</Text>
52        </View>
53
54        <View style={styles.infoRow}>
55          <Text style={[styles.label, { color: colors.icon }]}>Email</Text>
56          <Text style={[styles.value, { color: colors.text }]}>{order.email}</Text>
57        </View>
58      </View>
59
60      <View style={[styles.card, { backgroundColor: colors.background, borderColor: colors.icon + "30" }]}>
61        <Text style={[styles.cardTitle, { color: colors.text }]}>Order Items</Text>
62
63        {order.items?.map((item, index) => (
64          <View
65            key={item.id}
66            style={[
67              styles.itemRow,
68              index === order.items!.length - 1 && styles.lastItemRow,
69              { borderBottomColor: colors.icon + "30" },
70            ]}
71          >
72            <Image
73              source={{ uri: item.thumbnail || "https://placehold.co/60" }}
74              style={[styles.itemImage, { backgroundColor: colors.imagePlaceholder }]}
75              contentFit="cover"
76            />
77            <View style={styles.itemInfo}>
78              <Text style={[styles.itemTitle, { color: colors.text }]}>
79                {item.product_title || item.title}
80              </Text>
81              {item.variant_title && (
82                <Text style={[styles.itemVariant, { color: colors.icon }]}>
83                  {item.variant_title}
84                </Text>
85              )}
86              <Text style={[styles.itemQuantity, { color: colors.icon }]}>
87                Qty: {item.quantity}
88              </Text>
89            </View>
90            <Text style={[styles.itemPrice, { color: colors.text }]}>
91              {formatPrice(item.subtotal, order.currency_code)}
92            </Text>
93          </View>
94        ))}
95      </View>
96
97      <View style={[styles.card, { backgroundColor: colors.background, borderColor: colors.icon + "30" }]}>
98        <Text style={[styles.cardTitle, { color: colors.text }]}>Shipping</Text>
99
100        {order.shipping_address && (
101          <>
102            <Text style={[styles.sectionTitle, { color: colors.text }]}>
103              Shipping Address
104            </Text>
105            <Text style={[styles.addressText, { color: colors.text }]}>
106              {order.shipping_address.first_name} {order.shipping_address.last_name}
107            </Text>
108            <Text style={[styles.addressText, { color: colors.text }]}>
109              {order.shipping_address.address_1}
110            </Text>
111            <Text style={[styles.addressText, { color: colors.text }]}>
112              {order.shipping_address.city}, {order.shipping_address.postal_code}
113            </Text>
114            <Text style={[styles.addressText, { color: colors.text }]}>
115              {order.shipping_address.country_code?.toUpperCase()}
116            </Text>
117          </>
118        )}
119
120        {order.shipping_methods && order.shipping_methods.length > 0 && (
121          <>
122            <Text style={[styles.sectionTitle, { color: colors.text }]}>
123              Shipping Method
124            </Text>
125            {order.shipping_methods.map((method) => (
126              <Text key={method.id} style={[styles.addressText, { color: colors.text }]}>
127                {method.name} - {formatPrice(method.amount || 0, order.currency_code)}
128              </Text>
129            ))}
130          </>
131        )}
132      </View>
133
134      <View style={[styles.card, { backgroundColor: colors.background, borderColor: colors.icon + "30" }]}>
135        <Text style={[styles.cardTitle, { color: colors.text }]}>Payment</Text>
136
137        {order.payment_collections && order.payment_collections.length > 0 && (
138          <>
139            <Text style={[styles.sectionTitle, { color: colors.text }]}>
140              Payment Method
141            </Text>
142            {order.payment_collections[0].payments?.map((payment) => {
143              const providerInfo = getPaymentProviderInfo(payment.provider_id)
144              return (
145                <View key={payment.id} style={styles.paymentMethodRow}>
146                  <IconSymbol
147                    size={20}
148                    name={providerInfo.icon as any}
149                    color={colors.text}
150                  />
151                  <Text style={[styles.addressText, { color: colors.text, marginLeft: 8 }]}>
152                    {providerInfo.title}
153                  </Text>
154                </View>
155              )
156            })}
157          </>
158        )}
159
160        {order.billing_address && (
161          <>
162            <Text style={[styles.sectionTitle, { color: colors.text }]}>
163              Billing Address
164            </Text>
165            <Text style={[styles.addressText, { color: colors.text }]}>
166              {order.billing_address.first_name} {order.billing_address.last_name}
167            </Text>
168            <Text style={[styles.addressText, { color: colors.text }]}>
169              {order.billing_address.address_1}
170            </Text>
171            <Text style={[styles.addressText, { color: colors.text }]}>
172              {order.billing_address.city}, {order.billing_address.postal_code}
173            </Text>
174            <Text style={[styles.addressText, { color: colors.text }]}>
175              {order.billing_address.country_code?.toUpperCase()}
176            </Text>
177          </>
178        )}
179      </View>
180
181      <View style={[styles.card, { backgroundColor: colors.background, borderColor: colors.icon + "30" }]}>
182        <Text style={[styles.cardTitle, { color: colors.text }]}>Order Summary</Text>
183
184        <View style={styles.summaryRow}>
185          <Text style={[styles.summaryLabel, { color: colors.text }]}>Subtotal</Text>
186          <Text style={[styles.summaryValue, { color: colors.text }]}>
187            {formatPrice(order.item_subtotal || 0, order.currency_code)}
188          </Text>
189        </View>
190
191        <View style={styles.summaryRow}>
192          <Text style={[styles.summaryLabel, { color: colors.text }]}>Discount</Text>
193          <Text style={[styles.summaryValue, { color: colors.text }]}>
194            {(order.discount_total || 0) > 0 ? "-" : ""}{formatPrice(order.discount_total || 0, order.currency_code)}
195          </Text>
196        </View>
197
198        <View style={styles.summaryRow}>
199          <Text style={[styles.summaryLabel, { color: colors.text }]}>Shipping</Text>
200          <Text style={[styles.summaryValue, { color: colors.text }]}>
201            {formatPrice(order.shipping_total || 0, order.currency_code)}
202          </Text>
203        </View>
204
205        <View style={styles.summaryRow}>
206          <Text style={[styles.summaryLabel, { color: colors.text }]}>Tax</Text>
207          <Text style={[styles.summaryValue, { color: colors.text }]}>
208            {formatPrice(order.tax_total || 0, order.currency_code)}
209          </Text>
210        </View>
211
212        <View style={[styles.summaryRow, styles.totalRow, { borderTopColor: colors.border }]}>
213          <Text style={[styles.totalLabel, { color: colors.text }]}>Total</Text>
214          <Text style={[styles.totalValue, { color: colors.tint }]}>
215            {formatPrice(order.total, order.currency_code)}
216          </Text>
217        </View>
218      </View>
219    </View>
220  </ScrollView>
221)

Three states are handled in the render method:

Loading: Displays a loading indicator while the order details are being fetched.
Error: Displays an error message if fetching the order details fails.
Success: Displays the order confirmation details, including the order ID, items, shipping, and payment information.

Add Order Confirmation Screen to Navigation

Next, you'll add the order confirmation screen to the app's navigation structure. You'll add it as a top-level stack screen.

In app/_layout.tsx, add the following after the checkout screen you added earlier:

tsx

tsxCopy

1<Stack.Screen
2  name="order-confirmation/[id]"
3  options={{
4    headerShown: true,
5    title: "Order Confirmed",
6    headerLeft: () => null,
7    gestureEnabled: false,
8    headerBackVisible: false,
9  }}
10/>

Navigate to Order Confirmation After Placing Order

Finally, you'll update the checkout screen to navigate to the order confirmation screen after successfully placing an order.

In app/checkout.tsx, add the following import at the top of the file:

tsx

tsxCopy

1import { useRouter } from "expo-router"

Then, inside the CheckoutScreen component, initialize the router:

tsx

tsxCopy

1export default function CheckoutScreen() {
2  const router = useRouter()
3  // ...
4}

Finally, find the handlePlaceOrder function, and replace the // TODO navigate to order confirmation screen with order details comment with the following:

tsx

tsxCopy

1router.replace(`/order-confirmation/${result.order.id}`)

If you get a type error regarding the /order-confirmation/[id] route, the error will be resolved when you run the app.

Test the Order Confirmation Screen

To test the order confirmation screen, run your Aiminaabee application and Expo app.

Then, in your Expo app, go through the checkout flow as before. After selecting a payment provider and placing the order, you should be taken to the order confirmation screen displaying the order details.

Order confirmation screen

Next: Next steps