11. Checkout

Collect email, address, shipping, and payment, then place the order.

On this page

In this step, you'll create a checkout screen where users enter their address, choose shipping and payment methods, and place their order.

The checkout screen will have three steps:

Delivery: Enter shipping and billing addresses.
Shipping: Choose a shipping method.
Payment: Choose a payment method.

You'll implement first the three steps components, including their components and utilities, then the main checkout screen and navigation.

Add Address Form Component

First, you'll create an address form component to collect shipping and billing addresses.

Create the file components/checkout/address-form.tsx with the following content:

tsx

tsxCopy

1import { IconSymbol } from "@/components/ui/icon-symbol"
2import { Colors } from "@/constants/theme"
3import { useColorScheme } from "@/hooks/use-color-scheme"
4import type { HttpTypes } from "@aiminaabeejs/types"
5import { Picker } from "@react-native-picker/picker"
6import React, { useRef, useState } from "react"
7import {
8  Modal,
9  Platform,
10  StyleSheet,
11  Text,
12  TextInput,
13  TouchableOpacity,
14  View,
15} from "react-native"
16
17interface AddressFormProps {
18  firstName: string;
19  lastName: string;
20  address: string;
21  city: string;
22  postalCode: string;
23  countryCode: string;
24  phone: string;
25  countries: HttpTypes.StoreRegionCountry[];
26  onFirstNameChange: (value: string) => void;
27  onLastNameChange: (value: string) => void;
28  onAddressChange: (value: string) => void;
29  onCityChange: (value: string) => void;
30  onPostalCodeChange: (value: string) => void;
31  onCountryCodeChange: (value: string) => void;
32  onPhoneChange: (value: string) => void;
33}
34
35export function AddressForm({
36  firstName,
37  lastName,
38  address,
39  city,
40  postalCode,
41  countryCode,
42  phone,
43  countries,
44  onFirstNameChange,
45  onLastNameChange,
46  onAddressChange,
47  onCityChange,
48  onPostalCodeChange,
49  onCountryCodeChange,
50  onPhoneChange,
51}: AddressFormProps) {
52  const colorScheme = useColorScheme()
53  const colors = Colors[colorScheme ?? "light"]
54  const [showPicker, setShowPicker] = useState(false)
55  const [tempCountryCode, setTempCountryCode] = useState(countryCode)
56
57  // Create refs for each input field
58  const lastNameRef = useRef<TextInput>(null)
59  const addressRef = useRef<TextInput>(null)
60  const cityRef = useRef<TextInput>(null)
61  const postalCodeRef = useRef<TextInput>(null)
62  const phoneRef = useRef<TextInput>(null)
63
64  const selectedCountry = countries.find(
65    (c) => (c.iso_2 || c.id) === countryCode
66  )
67  const selectedCountryName = selectedCountry
68    ? selectedCountry.display_name || selectedCountry.name || selectedCountry.iso_2 || selectedCountry.id
69    : "Select Country"
70
71  const handleDone = () => {
72    onCountryCodeChange(tempCountryCode)
73    setShowPicker(false)
74    // Focus phone field after country selection
75    setTimeout(() => phoneRef.current?.focus(), 100)
76  }
77
78  const handleCancel = () => {
79    setTempCountryCode(countryCode)
80    setShowPicker(false)
81  }
82
83  return (
84    <>
85      <View style={styles.row}>
86        <TextInput
87          style={[
88            styles.input,
89            styles.halfInput,
90            { color: colors.text, borderColor: colors.icon + "30" },
91          ]}
92          placeholder="First Name"
93          placeholderTextColor={colors.icon}
94          value={firstName}
95          onChangeText={onFirstNameChange}
96          returnKeyType="next"
97          onSubmitEditing={() => lastNameRef.current?.focus()}
98        />
99        <TextInput
100          ref={lastNameRef}
101          style={[
102            styles.input,
103            styles.halfInput,
104            { color: colors.text, borderColor: colors.icon + "30" },
105          ]}
106          placeholder="Last Name"
107          placeholderTextColor={colors.icon}
108          value={lastName}
109          onChangeText={onLastNameChange}
110          returnKeyType="next"
111          onSubmitEditing={() => addressRef.current?.focus()}
112        />
113      </View>
114
115      <TextInput
116        ref={addressRef}
117        style={[styles.input, { color: colors.text, borderColor: colors.icon + "30" }]}
118        placeholder="Address"
119        placeholderTextColor={colors.icon}
120        value={address}
121        onChangeText={onAddressChange}
122        returnKeyType="next"
123        onSubmitEditing={() => cityRef.current?.focus()}
124      />
125
126      <View style={styles.row}>
127        <TextInput
128          ref={cityRef}
129          style={[
130            styles.input,
131            styles.halfInput,
132            { color: colors.text, borderColor: colors.icon + "30" },
133          ]}
134          placeholder="City"
135          placeholderTextColor={colors.icon}
136          value={city}
137          onChangeText={onCityChange}
138          returnKeyType="next"
139          onSubmitEditing={() => postalCodeRef.current?.focus()}
140        />
141          <TextInput
142            ref={postalCodeRef}
143            style={[
144              styles.input,
145              styles.halfInput,
146              { color: colors.text, borderColor: colors.icon + "30" },
147            ]}
148            placeholder="Postal Code"
149            placeholderTextColor={colors.icon}
150            value={postalCode}
151            onChangeText={onPostalCodeChange}
152            returnKeyType="next"
153            onSubmitEditing={() => {
154              setTempCountryCode(countryCode)
155              setShowPicker(true)
156            }}
157          />
158      </View>
159
160      <TouchableOpacity
161        style={[
162          styles.input,
163          styles.pickerButton,
164          { borderColor: colors.icon + "30" },
165        ]}
166        onPress={() => {
167          setTempCountryCode(countryCode)
168          setShowPicker(true)
169        }}
170      >
171        <Text style={[styles.pickerButtonText, { color: countryCode ? colors.text : colors.icon }]}>
172          {selectedCountryName}
173        </Text>
174        <IconSymbol size={20} name="chevron.down" color={colors.icon} />
175      </TouchableOpacity>
176
177      <Modal
178        visible={showPicker}
179        transparent={true}
180        animationType="none"
181        onRequestClose={handleCancel}
182      >
183        <TouchableOpacity
184          style={styles.modalOverlay}
185          activeOpacity={1}
186          onPress={handleCancel}
187        >
188          <TouchableOpacity
189            activeOpacity={1}
190            style={[styles.modalContent, { backgroundColor: colors.background }]}
191            onPress={(e) => e.stopPropagation()}
192          >
193            <View style={[styles.modalHeader, { borderBottomColor: colors.icon + "30" }]}>
194              <TouchableOpacity onPress={handleCancel}>
195                <Text style={[styles.modalButton, { color: colors.tint }]}>Cancel</Text>
196              </TouchableOpacity>
197              <Text style={[styles.modalTitle, { color: colors.text }]}>Select Country</Text>
198              <TouchableOpacity onPress={handleDone}>
199                <Text style={[styles.modalButton, { color: colors.tint }]}>Done</Text>
200              </TouchableOpacity>
201            </View>
202            <Picker
203              selectedValue={tempCountryCode}
204              onValueChange={(value) => {
205                setTempCountryCode(value)
206                if (Platform.OS === "android") {
207                  onCountryCodeChange(value)
208                  setShowPicker(false)
209                  // Focus phone field after country selection on Android
210                  setTimeout(() => phoneRef.current?.focus(), 100)
211                }
212              }}
213              style={[styles.picker, Platform.OS === "android" && { color: colors.text }]}
214              itemStyle={Platform.OS === "ios" ? styles.pickerItemIOS : undefined}
215            >
216              <Picker.Item label="Select Country" value="" enabled={false} />
217              {countries.map((country) => {
218                const code = country.iso_2 || country.id
219                const name = country.display_name || country.name || country.iso_2 || country.id
220                return <Picker.Item key={code} label={name} value={code} />
221              })}
222            </Picker>
223          </TouchableOpacity>
224        </TouchableOpacity>
225      </Modal>
226
227      <TextInput
228        ref={phoneRef}
229        style={[styles.input, { color: colors.text, borderColor: colors.icon + "30" }]}
230        placeholder="Phone Number"
231        placeholderTextColor={colors.icon}
232        value={phone}
233        onChangeText={onPhoneChange}
234        keyboardType="phone-pad"
235        returnKeyType="done"
236      />
237    </>
238  )
239}
240
241const styles = StyleSheet.create({
242  input: {
243    borderWidth: 1,
244    borderRadius: 8,
245    padding: 12,
246    fontSize: 16,
247    marginBottom: 12,
248  },
249  row: {
250    flexDirection: "row",
251    gap: 12,
252  },
253  halfInput: {
254    flex: 1,
255  },
256  pickerButton: {
257    flexDirection: "row",
258    justifyContent: "space-between",
259    alignItems: "center",
260  },
261  pickerButtonText: {
262    fontSize: 16,
263    flex: 1,
264  },
265  modalOverlay: {
266    flex: 1,
267    backgroundColor: "rgba(0, 0, 0, 0.5)",
268    justifyContent: "flex-end",
269  },
270  modalContent: {
271    borderTopLeftRadius: 20,
272    borderTopRightRadius: 20,
273    maxHeight: "50%",
274  },
275  modalHeader: {
276    flexDirection: "row",
277    justifyContent: "space-between",
278    alignItems: "center",
279    padding: 16,
280    borderBottomWidth: 1,
281  },
282  modalTitle: {
283    fontSize: 18,
284    fontWeight: "600",
285  },
286  modalButton: {
287    fontSize: 16,
288    fontWeight: "600",
289  },
290  picker: {
291    width: "100%",
292    height: Platform.OS === "ios" ? 250 : 48,
293  },
294  pickerItemIOS: {
295    height: 200,
296  },
297})

The AddressForm component receives various props for the address fields and their change handlers. It also receives a list of countries to populate the country picker.

The component renders input fields for the address and a modal picker for selecting the country. It handles input focus and country selection appropriately.

Add Delivery Step Component

Next, you'll create the delivery step component for the checkout process. It will use the AddressForm component to collect shipping and billing addresses.

Create the file components/checkout/delivery-step.tsx with the following content:

tsx

tsxCopy

1import { AddressForm } from "@/components/checkout/address-form"
2import { Button } from "@/components/ui/button"
3import { Colors } from "@/constants/theme"
4import { useRegion } from "@/context/region-context"
5import { useColorScheme } from "@/hooks/use-color-scheme"
6import React, { useEffect, useRef, useState } from "react"
7import {
8  Keyboard,
9  KeyboardAvoidingView,
10  Platform,
11  ScrollView,
12  StyleSheet,
13  Switch,
14  Text,
15  TextInput,
16  View,
17} from "react-native"
18
19interface Address {
20  firstName: string;
21  lastName: string;
22  address: string;
23  city: string;
24  postalCode: string;
25  countryCode: string;
26  phone: string;
27}
28
29interface DeliveryStepProps {
30  email: string;
31  shippingAddress: Address;
32  billingAddress: Address;
33  useSameForBilling: boolean;
34  loading: boolean;
35  onEmailChange: (value: string) => void;
36  onShippingAddressChange: (field: keyof Address, value: string) => void;
37  onBillingAddressChange: (field: keyof Address, value: string) => void;
38  onUseSameForBillingChange: (value: boolean) => void;
39  onNext: () => void;
40}
41
42export function DeliveryStep({
43  email,
44  shippingAddress,
45  billingAddress,
46  useSameForBilling,
47  loading,
48  onEmailChange,
49  onShippingAddressChange,
50  onBillingAddressChange,
51  onUseSameForBillingChange,
52  onNext,
53}: DeliveryStepProps) {
54  const colorScheme = useColorScheme()
55  const colors = Colors[colorScheme ?? "light"]
56  const { selectedRegion } = useRegion()
57  const scrollViewRef = useRef<ScrollView>(null)
58  const [isKeyboardVisible, setKeyboardVisible] = useState(false)
59
60  const countries = selectedRegion?.countries || []
61
62  useEffect(() => {
63    const keyboardWillShowListener = Keyboard.addListener(
64      Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow",
65      () => setKeyboardVisible(true)
66    )
67    const keyboardWillHideListener = Keyboard.addListener(
68      Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide",
69      () => setKeyboardVisible(false)
70    )
71
72    return () => {
73      keyboardWillShowListener.remove()
74      keyboardWillHideListener.remove()
75    }
76  }, [])
77
78  return (
79    <KeyboardAvoidingView
80      style={styles.container}
81      behavior={Platform.OS === "ios" ? "padding" : "height"}
82      keyboardVerticalOffset={Platform.OS === "ios" ? 90 : 0}
83    >
84      <ScrollView
85        ref={scrollViewRef}
86        style={styles.scrollView}
87        contentContainerStyle={[
88          styles.scrollContent,
89          isKeyboardVisible && styles.scrollContentKeyboard,
90        ]}
91        keyboardShouldPersistTaps="handled"
92        keyboardDismissMode="on-drag"
93        showsVerticalScrollIndicator={true}
94        automaticallyAdjustKeyboardInsets={true}
95      >
96        <View style={styles.section}>
97          <Text style={[styles.sectionTitle, { color: colors.text }]}>
98            Contact Information
99          </Text>
100
101          <TextInput
102            style={[styles.input, { color: colors.text, borderColor: colors.icon + "30" }]}
103            placeholder="Email"
104            placeholderTextColor={colors.icon}
105            value={email}
106            onChangeText={onEmailChange}
107            keyboardType="email-address"
108            autoCapitalize="none"
109            returnKeyType="next"
110          />
111
112          <Text style={[styles.sectionTitle, { color: colors.text, marginTop: 20 }]}>
113            Shipping Address
114          </Text>
115
116          <AddressForm
117            firstName={shippingAddress.firstName}
118            lastName={shippingAddress.lastName}
119            address={shippingAddress.address}
120            city={shippingAddress.city}
121            postalCode={shippingAddress.postalCode}
122            countryCode={shippingAddress.countryCode}
123            phone={shippingAddress.phone}
124            countries={countries}
125            onFirstNameChange={(value) => onShippingAddressChange("firstName", value)}
126            onLastNameChange={(value) => onShippingAddressChange("lastName", value)}
127            onAddressChange={(value) => onShippingAddressChange("address", value)}
128            onCityChange={(value) => onShippingAddressChange("city", value)}
129            onPostalCodeChange={(value) => onShippingAddressChange("postalCode", value)}
130            onCountryCodeChange={(value) => onShippingAddressChange("countryCode", value)}
131            onPhoneChange={(value) => onShippingAddressChange("phone", value)}
132          />
133
134          <View style={styles.switchContainer}>
135            <Text style={[styles.switchLabel, { color: colors.text }]}>
136              Use same address for billing
137            </Text>
138            <Switch
139              value={useSameForBilling}
140              onValueChange={onUseSameForBillingChange}
141            />
142          </View>
143
144          {!useSameForBilling && (
145            <>
146              <Text style={[styles.sectionTitle, { color: colors.text, marginTop: 20 }]}>
147                Billing Address
148              </Text>
149
150              <AddressForm
151                firstName={billingAddress.firstName}
152                lastName={billingAddress.lastName}
153                address={billingAddress.address}
154                city={billingAddress.city}
155                postalCode={billingAddress.postalCode}
156                countryCode={billingAddress.countryCode}
157                phone={billingAddress.phone}
158                countries={countries}
159                onFirstNameChange={(value) => onBillingAddressChange("firstName", value)}
160                onLastNameChange={(value) => onBillingAddressChange("lastName", value)}
161                onAddressChange={(value) => onBillingAddressChange("address", value)}
162                onCityChange={(value) => onBillingAddressChange("city", value)}
163                onPostalCodeChange={(value) => onBillingAddressChange("postalCode", value)}
164                onCountryCodeChange={(value) => onBillingAddressChange("countryCode", value)}
165                onPhoneChange={(value) => onBillingAddressChange("phone", value)}
166              />
167            </>
168          )}
169        </View>
170
171        {/* Button moved inside ScrollView for consistent behavior */}
172        <View style={[styles.buttonContainer, { backgroundColor: colors.background }]}>
173          <Button
174            title="Continue"
175            onPress={onNext}
176            loading={loading}
177            style={styles.button}
178          />
179        </View>
180      </ScrollView>
181    </KeyboardAvoidingView>
182  )
183}
184
185const styles = StyleSheet.create({
186  container: {
187    flex: 1,
188  },
189  scrollView: {
190    flex: 1,
191  },
192  scrollContent: {
193    flexGrow: 1,
194    paddingBottom: 20,
195  },
196  scrollContentKeyboard: {
197    paddingBottom: Platform.OS === "ios" ? 300 : 320,
198  },
199  section: {
200    padding: 20,
201  },
202  buttonContainer: {
203    padding: 20,
204    paddingTop: 10,
205    paddingBottom: 30,
206  },
207  sectionTitle: {
208    fontSize: 20,
209    fontWeight: "700",
210    marginBottom: 20,
211  },
212  input: {
213    borderWidth: 1,
214    borderRadius: 8,
215    padding: 12,
216    fontSize: 16,
217    marginBottom: 12,
218  },
219  switchContainer: {
220    flexDirection: "row",
221    alignItems: "center",
222    justifyContent: "space-between",
223    marginVertical: 16,
224  },
225  switchLabel: {
226    fontSize: 16,
227    flex: 1,
228  },
229  button: {
230    marginTop: 8,
231  },
232})

The DeliveryStep component receives the following props:

email: The email address associated with the cart.
shippingAddress: The shipping address details of the cart.
billingAddress: The billing address details of the cart.
useSameForBilling: A boolean indicating whether to use the shipping address for billing.
loading: A boolean indicating whether the form is in a loading state.
onEmailChange: Callback to update the email address.
onShippingAddressChange: Callback to update the shipping address fields.
onBillingAddressChange: Callback to update the billing address fields.
onUseSameForBillingChange: Callback to toggle the use of the same address for billing.
onNext: Callback to proceed to the next step.

The component renders an email input field and uses the AddressForm component to collect shipping and billing addresses. A switch is provided to toggle whether to use the same address for billing.

Add Shipping Step Component

Next, you'll create the shipping step component for the checkout process. This step allows users to select a shipping method.

Create the file components/checkout/shipping-step.tsx with the following content:

tsx

tsxCopy

1import { Loading } from "@/components/loading"
2import { Button } from "@/components/ui/button"
3import { Colors } from "@/constants/theme"
4import { useColorScheme } from "@/hooks/use-color-scheme"
5import { formatPrice } from "@/lib/format-price"
6import type { HttpTypes } from "@aiminaabeejs/types"
7import React from "react"
8import { StyleSheet, Text, TouchableOpacity, View } from "react-native"
9
10interface ShippingStepProps {
11  shippingOptions: HttpTypes.StoreCartShippingOption[];
12  selectedShippingOption: string | null;
13  currencyCode?: string;
14  loading: boolean;
15  onSelectOption: (optionId: string) => void;
16  onBack: () => void;
17  onNext: () => void;
18}
19
20export function ShippingStep({
21  shippingOptions,
22  selectedShippingOption,
23  currencyCode,
24  loading,
25  onSelectOption,
26  onBack,
27  onNext,
28}: ShippingStepProps) {
29  const colorScheme = useColorScheme()
30  const colors = Colors[colorScheme ?? "light"]
31
32  return (
33    <View style={styles.container}>
34      <View style={styles.contentWrapper}>
35        <View style={styles.section}>
36      <Text style={[styles.sectionTitle, { color: colors.text }]}>
37        Select Shipping Method
38      </Text>
39
40      {loading ? (
41        <Loading />
42      ) : shippingOptions.length === 0 ? (
43        <Text style={[styles.emptyText, { color: colors.icon }]}>
44          No shipping options available
45        </Text>
46      ) : (
47        shippingOptions.map((option) => (
48          <TouchableOpacity
49            key={option.id}
50            style={[
51              styles.optionCard,
52              {
53                backgroundColor:
54                  selectedShippingOption === option.id
55                    ? colors.tint + "20"
56                    : "transparent",
57                borderColor:
58                  selectedShippingOption === option.id
59                    ? colors.tint
60                    : colors.icon + "30",
61              },
62            ]}
63            onPress={() => onSelectOption(option.id)}
64          >
65            <View style={styles.optionInfo}>
66              <Text
67                style={[
68                  styles.optionTitle,
69                  {
70                    color:
71                      selectedShippingOption === option.id
72                        ? colors.tint
73                        : colors.text,
74                  },
75                ]}
76              >
77                {option.name}
78              </Text>
79              <Text style={[styles.optionPrice, { color: colors.text }]}>
80                {formatPrice(option.amount, currencyCode)}
81              </Text>
82            </View>
83            {selectedShippingOption === option.id && (
84              <Text style={{ color: colors.tint, fontSize: 20 }}>✓</Text>
85            )}
86          </TouchableOpacity>
87        ))
88      )}
89        </View>
90      </View>
91
92      <View style={[styles.buttonContainer, { backgroundColor: colors.background, borderTopColor: colors.icon + "30" }]}>
93        <View style={styles.buttonRow}>
94          <Button
95            title="Back"
96            variant="secondary"
97            onPress={onBack}
98            style={styles.halfButton}
99          />
100          <Button
101            title="Continue"
102            onPress={onNext}
103            loading={loading}
104            disabled={!selectedShippingOption}
105            style={styles.halfButton}
106          />
107        </View>
108      </View>
109    </View>
110  )
111}
112
113const styles = StyleSheet.create({
114  container: {
115    flex: 1,
116  },
117  contentWrapper: {
118    flex: 1,
119  },
120  section: {
121    padding: 20,
122  },
123  buttonContainer: {
124    padding: 20,
125    paddingBottom: 30,
126    borderTopWidth: 1,
127  },
128  sectionTitle: {
129    fontSize: 20,
130    fontWeight: "700",
131    marginBottom: 20,
132  },
133  optionCard: {
134    flexDirection: "row",
135    justifyContent: "space-between",
136    alignItems: "center",
137    padding: 16,
138    borderRadius: 8,
139    borderWidth: 1,
140    marginBottom: 12,
141  },
142  optionInfo: {
143    flex: 1,
144  },
145  optionTitle: {
146    fontSize: 16,
147    fontWeight: "600",
148    marginBottom: 4,
149  },
150  optionPrice: {
151    fontSize: 14,
152  },
153  emptyText: {
154    fontSize: 16,
155    textAlign: "center",
156    padding: 20,
157  },
158  buttonRow: {
159    flexDirection: "row",
160    gap: 12,
161  },
162  halfButton: {
163    flex: 1,
164  },
165})

The ShippingStep component receives the following props:

shippingOptions: An array of available shipping options.
selectedShippingOption: The ID of the currently selected shipping option.
currencyCode: The currency code for formatting prices.
loading: A boolean indicating whether the shipping options are being loaded.
onSelectOption: Callback to select a shipping option.
onBack: Callback to go back to the previous step.
onNext: Callback to proceed to the next step.

The component renders a list of shipping options with their names and prices. The selected option is highlighted.

Add Payment Provider Utility

Before creating the payment step component, you'll add a utility function that maps payment provider IDs to their display information.

Create the file lib/payment-providers.ts with the following content:

tsCopy

1/**
2 * Information about a payment provider for display purposes
3 */
4export interface PaymentProviderInfo {
5  icon: string;
6  title: string;
7}
8
9/**
10 * Get display information for a payment provider based on its ID
11 * Returns an icon name and formatted title for the payment provider
12 */
13export function getPaymentProviderInfo(providerId: string): PaymentProviderInfo {
14  switch (providerId) {
15    case "pp_system_default":
16      return {
17        icon: "creditcard",
18        title: "Manual Payment",
19      }
20    default:
21      return {
22        icon: "creditcard",
23        title: providerId.replace("pp_", "").replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()),
24      }
25  }
26}

The getPaymentProviderInfo function takes a payment provider ID and returns an object containing an icon name and a formatted title for display purposes.

The function only handles Aiminaabee's built-in manual payment provider pp_system_default. You can expand it later to include more providers that you integrate.

Add Payment Step Component

You'll now create the payment step component for the checkout process. This step allows users to select a payment method, and shows the cart's summary before placing the order.

This step will not handle actual payment processing. Instead, it will just allow users to select a payment method and place the order. If you integrate real payment providers later, you'll need to handle their specific payment flows.

Create the file components/checkout/payment-step.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 { useColorScheme } from "@/hooks/use-color-scheme"
6import { formatPrice } from "@/lib/format-price"
7import { getPaymentProviderInfo } from "@/lib/payment-providers"
8import type { HttpTypes } from "@aiminaabeejs/types"
9import React from "react"
10import { StyleSheet, Text, TouchableOpacity, View } from "react-native"
11
12interface PaymentStepProps {
13  cart: HttpTypes.StoreCart;
14  paymentProviders: HttpTypes.StorePaymentProvider[];
15  selectedPaymentProvider: string | null;
16  loading: boolean;
17  onSelectProvider: (providerId: string) => void;
18  onBack: () => void;
19  onPlaceOrder: () => void;
20}
21
22export function PaymentStep({
23  cart,
24  paymentProviders,
25  selectedPaymentProvider,
26  loading,
27  onSelectProvider,
28  onBack,
29  onPlaceOrder,
30}: PaymentStepProps) {
31  const colorScheme = useColorScheme()
32  const colors = Colors[colorScheme ?? "light"]
33
34  return (
35    <View style={styles.container}>
36      <View style={styles.contentWrapper}>
37        <View style={styles.section}>
38      <Text style={[styles.sectionTitle, { color: colors.text }]}>
39        Select Payment Method
40      </Text>
41
42      {loading ? (
43        <Loading />
44      ) : paymentProviders.length === 0 ? (
45        <Text style={[styles.emptyText, { color: colors.icon }]}>
46          No payment providers available
47        </Text>
48      ) : (
49        paymentProviders.map((provider) => {
50          const providerInfo = getPaymentProviderInfo(provider.id)
51          const isSelected = selectedPaymentProvider === provider.id
52
53          return (
54            <TouchableOpacity
55              key={provider.id}
56              style={[
57                styles.optionCard,
58                {
59                  backgroundColor: isSelected ? colors.tint + "20" : "transparent",
60                  borderColor: isSelected ? colors.tint : colors.icon + "30",
61                },
62              ]}
63              onPress={() => onSelectProvider(provider.id)}
64            >
65              <View style={styles.optionContent}>
66                <IconSymbol
67                  size={24}
68                  name={providerInfo.icon as any}
69                  color={isSelected ? colors.tint : colors.icon}
70                />
71                <Text
72                  style={[
73                    styles.optionTitle,
74                    {
75                      color: isSelected ? colors.tint : colors.text,
76                    },
77                  ]}
78                >
79                  {providerInfo.title}
80                </Text>
81              </View>
82              {isSelected && (
83                <Text style={{ color: colors.tint, fontSize: 20 }}>✓</Text>
84              )}
85            </TouchableOpacity>
86          )
87        })
88      )}
89
90      <View style={[styles.summary, { borderColor: colors.icon + "30" }]}>
91        <Text style={[styles.summaryTitle, { color: colors.text }]}>
92          Order Summary
93        </Text>
94        <View style={styles.summaryRow}>
95          <Text style={[styles.summaryLabel, { color: colors.text }]}>Subtotal</Text>
96          <Text style={[styles.summaryValue, { color: colors.text }]}>
97            {formatPrice(cart.item_subtotal || 0, cart.currency_code)}
98          </Text>
99        </View>
100        <View style={styles.summaryRow}>
101          <Text style={[styles.summaryLabel, { color: colors.text }]}>Discount</Text>
102          <Text style={[styles.summaryValue, { color: colors.text }]}>
103            {(cart.discount_total || 0) > 0 ? "-" : ""}{formatPrice(cart.discount_total || 0, cart.currency_code)}
104          </Text>
105        </View>
106        <View style={styles.summaryRow}>
107          <Text style={[styles.summaryLabel, { color: colors.text }]}>Shipping</Text>
108          <Text style={[styles.summaryValue, { color: colors.text }]}>
109            {formatPrice(cart.shipping_total || 0, cart.currency_code)}
110          </Text>
111        </View>
112        <View style={styles.summaryRow}>
113          <Text style={[styles.summaryLabel, { color: colors.text }]}>Tax</Text>
114          <Text style={[styles.summaryValue, { color: colors.text }]}>
115            {formatPrice(cart.tax_total || 0, cart.currency_code)}
116          </Text>
117        </View>
118        <View style={[styles.summaryRow, styles.totalRow, { borderTopColor: colors.border }]}>
119          <Text style={[styles.totalLabel, { color: colors.text }]}>Total</Text>
120          <Text style={[styles.totalValue, { color: colors.tint }]}>
121            {formatPrice(cart.total, cart.currency_code)}
122          </Text>
123        </View>
124      </View>
125        </View>
126      </View>
127
128      <View style={[styles.buttonContainer, { backgroundColor: colors.background, borderTopColor: colors.icon + "30" }]}>
129        <View style={styles.buttonRow}>
130          <Button
131            title="Back"
132            variant="secondary"
133            onPress={onBack}
134            style={styles.halfButton}
135          />
136          <Button
137            title="Place Order"
138            onPress={onPlaceOrder}
139            loading={loading}
140            disabled={!selectedPaymentProvider}
141            style={styles.halfButton}
142          />
143        </View>
144      </View>
145    </View>
146  )
147}
148
149const styles = StyleSheet.create({
150  container: {
151    flex: 1,
152  },
153  contentWrapper: {
154    flex: 1,
155  },
156  section: {
157    padding: 20,
158  },
159  buttonContainer: {
160    padding: 20,
161    paddingBottom: 30,
162    borderTopWidth: 1,
163  },
164  sectionTitle: {
165    fontSize: 20,
166    fontWeight: "700",
167    marginBottom: 20,
168  },
169  optionCard: {
170    flexDirection: "row",
171    justifyContent: "space-between",
172    alignItems: "center",
173    padding: 16,
174    borderRadius: 8,
175    borderWidth: 1,
176    marginBottom: 12,
177  },
178  optionContent: {
179    flexDirection: "row",
180    alignItems: "center",
181    gap: 12,
182    flex: 1,
183  },
184  optionTitle: {
185    fontSize: 16,
186    fontWeight: "600",
187  },
188  emptyText: {
189    fontSize: 16,
190    textAlign: "center",
191    padding: 20,
192  },
193  summary: {
194    borderWidth: 1,
195    borderRadius: 8,
196    padding: 16,
197    marginTop: 20,
198    marginBottom: 20,
199  },
200  summaryTitle: {
201    fontSize: 18,
202    fontWeight: "700",
203    marginBottom: 12,
204  },
205  summaryRow: {
206    flexDirection: "row",
207    justifyContent: "space-between",
208    marginBottom: 8,
209  },
210  summaryLabel: {
211    fontSize: 14,
212  },
213  summaryValue: {
214    fontSize: 14,
215    fontWeight: "500",
216  },
217  totalRow: {
218    marginTop: 12,
219    paddingTop: 12,
220    borderTopWidth: 1,
221  },
222  totalLabel: {
223    fontSize: 18,
224    fontWeight: "700",
225  },
226  totalValue: {
227    fontSize: 20,
228    fontWeight: "700",
229  },
230  buttonRow: {
231    flexDirection: "row",
232    gap: 12,
233  },
234  halfButton: {
235    flex: 1,
236  },
237})

The PaymentStep component receives the following props:

cart: The current cart object containing pricing details.
paymentProviders: An array of available payment providers.
selectedPaymentProvider: The ID of the currently selected payment provider.
loading: A boolean indicating whether the payment providers are being loaded.
onSelectProvider: Callback to select a payment provider.
onBack: Callback to go back to the previous step.
onPlaceOrder: Callback to place the order.

The component renders a list of payment providers with their icons and titles. The selected provider is highlighted.

A summary of the cart's pricing details is displayed, including subtotal, discounts, shipping, tax, and total amount.

Add Checkout Screen Component

Finally, you'll create the main checkout screen that manages the multi-step checkout process. It will use the previously created step components to guide users through entering their information, selecting shipping and payment methods, and placing their order.

Create the file app/checkout.tsx with the following content:

tsx

tsxCopy

1import { DeliveryStep } from "@/components/checkout/delivery-step"
2import { PaymentStep } from "@/components/checkout/payment-step"
3import { ShippingStep } from "@/components/checkout/shipping-step"
4import { Colors } from "@/constants/theme"
5import { useCart } from "@/context/cart-context"
6import { useColorScheme } from "@/hooks/use-color-scheme"
7import { sdk } from "@/lib/sdk"
8import type { HttpTypes } from "@aiminaabeejs/types"
9import React, { useCallback, useEffect, useState } from "react"
10import { Alert, StyleSheet, Text, View } from "react-native"
11
12type CheckoutStep = "delivery" | "shipping" | "payment";
13
14export default function CheckoutScreen() {
15  const colorScheme = useColorScheme()
16  const colors = Colors[colorScheme ?? "light"]
17  const { cart, refreshCart } = useCart()
18
19  const [currentStep, setCurrentStep] = useState<CheckoutStep>("delivery")
20  const [loading, setLoading] = useState(false)
21
22  // Contact & Address state
23  const [email, setEmail] = useState("")
24  const [shippingAddress, setShippingAddress] = useState({
25    firstName: "",
26    lastName: "",
27    address: "",
28    city: "",
29    postalCode: "",
30    countryCode: "",
31    phone: "",
32  })
33  const [useSameForBilling, setUseSameForBilling] = useState(true)
34  const [billingAddress, setBillingAddress] = useState({
35    firstName: "",
36    lastName: "",
37    address: "",
38    city: "",
39    postalCode: "",
40    countryCode: "",
41    phone: "",
42  })
43
44  // Shipping step
45  const [shippingOptions, setShippingOptions] = useState<HttpTypes.StoreCartShippingOption[]>([])
46  const [selectedShippingOption, setSelectedShippingOption] = useState<string | null>(null)
47
48  // Payment step
49  const [paymentProviders, setPaymentProviders] = useState<HttpTypes.StorePaymentProvider[]>([])
50  const [selectedPaymentProvider, setSelectedPaymentProvider] = useState<string | null>(null)
51
52  // TODO update state when cart changes
53}
54
55const styles = StyleSheet.create({
56  container: {
57    flex: 1,
58  },
59  centerContainer: {
60    flex: 1,
61    justifyContent: "center",
62    alignItems: "center",
63    padding: 20,
64  },
65  steps: {
66    flexDirection: "row",
67    justifyContent: "space-around",
68    padding: 20,
69    borderBottomWidth: 1,
70  },
71  stepIndicator: {
72    alignItems: "center",
73  },
74  stepCircle: {
75    width: 36,
76    height: 36,
77    borderRadius: 18,
78    alignItems: "center",
79    justifyContent: "center",
80    marginBottom: 8,
81  },
82  stepNumber: {
83    fontSize: 16,
84    fontWeight: "600",
85  },
86  stepLabel: {
87    fontSize: 12,
88  },
89  content: {
90    flex: 1,
91  },
92  errorText: {
93    fontSize: 16,
94    textAlign: "center",
95  },
96})

The CheckoutScreen component includes the following state variables:

currentStep: The current step in the checkout process.
loading: A boolean indicating whether an operation is in progress.
Contact and address fields for shipping and billing.
Shipping options and the selected shipping option.
Payment providers and the selected payment provider.

Next, you'll handle updating the state variables when the cart changes. Replace the // TODO update state when cart changes comment with the following:

tsx

tsxCopy

1useEffect(() => {
2  // Populate form with existing cart data or reset to empty values
3  setEmail(cart?.email || "")
4  setShippingAddress({
5    firstName: cart?.shipping_address?.first_name || "",
6    lastName: cart?.shipping_address?.last_name || "",
7    address: cart?.shipping_address?.address_1 || "",
8    city: cart?.shipping_address?.city || "",
9    postalCode: cart?.shipping_address?.postal_code || "",
10    countryCode: cart?.shipping_address?.country_code || "",
11    phone: cart?.shipping_address?.phone || "",
12  })
13
14  // Billing address - check if different from shipping
15  const hasDifferentBilling = cart?.billing_address &&
16    (cart.billing_address.address_1 !== cart.shipping_address?.address_1 ||
17      cart.billing_address.city !== cart.shipping_address?.city)
18
19  setUseSameForBilling(!hasDifferentBilling)
20  setBillingAddress({
21    firstName: cart?.billing_address?.first_name || "",
22    lastName: cart?.billing_address?.last_name || "",
23    address: cart?.billing_address?.address_1 || "",
24    city: cart?.billing_address?.city || "",
25    postalCode: cart?.billing_address?.postal_code || "",
26    countryCode: cart?.billing_address?.country_code || "",
27    phone: cart?.billing_address?.phone || "",
28  })
29
30  // Reset selections when cart is null
31  if (!cart) {
32    setSelectedShippingOption(null)
33    setSelectedPaymentProvider(null)
34    setCurrentStep("delivery")
35  }
36}, [cart])
37
38// TODO fetch shipping options and payment providers

A useEffect hook populates the form fields with existing cart data when the cart changes.

Next, you'll fetch the available shipping options and payment providers when the user reaches the respective steps. Replace the // TODO fetch shipping options and payment providers comment with the following:

tsx

tsxCopy

1const fetchShippingOptions = useCallback(async () => {
2  if (!cart) {return}
3
4  try {
5    setLoading(true)
6    const { shipping_options } = await sdk.store.fulfillment.listCartOptions("us", {
7      cart_id: cart.id,
8    })
9    setShippingOptions(shipping_options || [])
10  } catch (err) {
11    console.error("Failed to fetch shipping options:", err)
12    Alert.alert("Error", "Failed to load shipping options")
13  } finally {
14    setLoading(false)
15  }
16}, [cart])
17
18const fetchPaymentProviders = useCallback(async () => {
19  if (!cart) {return}
20
21  try {
22    setLoading(true)
23    const { payment_providers } = await sdk.store.payment.listPaymentProviders("us", {
24      region_id: cart.region_id || "",
25    })
26    setPaymentProviders(payment_providers || [])
27  } catch (err) {
28    console.error("Failed to fetch payment providers:", err)
29    Alert.alert("Error", "Failed to load payment providers")
30  } finally {
31    setLoading(false)
32  }
33}, [cart])
34
35useEffect(() => {
36  if (currentStep === "shipping") {
37    fetchShippingOptions()
38  } else if (currentStep === "payment") {
39    fetchPaymentProviders()
40  }
41}, [currentStep, fetchShippingOptions, fetchPaymentProviders])
42
43// TODO handle step transitions and order placement

You add a fetchShippingOptions function that retrieves shipping options, and a fetchPaymentProviders function that retrieves payment providers from the Aiminaabee backend.

You also add a useEffect hook that calls these functions when the user navigates to the shipping or payment steps.

Next, you'll add functions that handle moving between steps and placing the order. Replace the // TODO handle step transitions and order placement comment with the following:

tsx

tsxCopy

1const handleDeliveryNext = async () => {
2  // Validate shipping address
3  if (!email || !shippingAddress.firstName || !shippingAddress.lastName ||
4      !shippingAddress.address || !shippingAddress.city || !shippingAddress.postalCode ||
5      !shippingAddress.countryCode || !shippingAddress.phone) {
6    Alert.alert("Error", "Please fill in all shipping address fields")
7    return
8  }
9
10  // Validate billing address if different
11  if (!useSameForBilling) {
12    if (!billingAddress.firstName || !billingAddress.lastName || !billingAddress.address ||
13        !billingAddress.city || !billingAddress.postalCode || !billingAddress.countryCode ||
14        !billingAddress.phone) {
15      Alert.alert("Error", "Please fill in all billing address fields")
16      return
17    }
18  }
19
20  if (!cart) {return}
21
22  try {
23    setLoading(true)
24    const shippingAddressData = {
25      first_name: shippingAddress.firstName,
26      last_name: shippingAddress.lastName,
27      address_1: shippingAddress.address,
28      city: shippingAddress.city,
29      postal_code: shippingAddress.postalCode,
30      country_code: shippingAddress.countryCode,
31      phone: shippingAddress.phone,
32    }
33
34    const billingAddressData = useSameForBilling ? shippingAddressData : {
35      first_name: billingAddress.firstName,
36      last_name: billingAddress.lastName,
37      address_1: billingAddress.address,
38      city: billingAddress.city,
39      postal_code: billingAddress.postalCode,
40      country_code: billingAddress.countryCode,
41      phone: billingAddress.phone,
42    }
43
44    await sdk.store.cart.update("us", cart.id, {
45      email,
46      shipping_address: shippingAddressData,
47      billing_address: billingAddressData,
48    })
49
50    await refreshCart()
51    setCurrentStep("shipping")
52  } catch (err) {
53    console.error("Failed to update cart:", err)
54    Alert.alert("Error", "Failed to save delivery information")
55  } finally {
56    setLoading(false)
57  }
58}
59
60const handleShippingNext = async () => {
61  if (!selectedShippingOption || !cart) {
62    Alert.alert("Error", "Please select a shipping method")
63    return
64  }
65
66  try {
67    setLoading(true)
68
69    await sdk.store.cart.addShippingMethod("us", cart.id, {
70      option_id: selectedShippingOption,
71    })
72
73    await refreshCart()
74    setCurrentStep("payment")
75  } catch (err) {
76    console.error("Failed to add shipping method:", err)
77    Alert.alert("Error", "Failed to save shipping method")
78  } finally {
79    setLoading(false)
80  }
81}
82
83const handlePlaceOrder = async () => {
84  if (!selectedPaymentProvider || !cart) {
85    Alert.alert("Error", "Please select a payment provider")
86    return
87  }
88
89  try {
90    setLoading(true)
91
92    // Create payment session
93    await sdk.store.payment.initiatePaymentSession("us", cart, {
94      provider_id: selectedPaymentProvider,
95    })
96
97    // Complete cart (converts cart to order on backend)
98    const result = await sdk.store.cart.complete("us", cart.id)
99
100    if (result.type === "order") {
101      // Navigate to order confirmation first
102      // Cart will be cleared on the order confirmation page to prevent empty cart flash
103      // TODO navigate to order confirmation screen with order details
104    } else {
105      Alert.alert("Error", result.error?.message || "Failed to complete order")
106    }
107  } catch (err: any) {
108    console.error("Failed to complete order:", err)
109    Alert.alert("Error", err?.message || "Failed to complete order")
110  } finally {
111    setLoading(false)
112  }
113}
114
115// TODO render step components

The following functions are added:

handleDeliveryNext: Validates the delivery information, updates the cart with the email and addresses, and moves to the shipping step.
handleShippingNext: Validates the selected shipping option, adds it to the cart, and moves to the payment step.
handlePlaceOrder: Validates the selected payment provider, initiates the payment session, completes the cart, and handles the order confirmation. This function should also navigate to an order confirmation screen, which you'll implement later.

Finally, you'll render the appropriate step component based on the current step. Replace the // TODO render step components comment with the following:

tsx

tsxCopy

1if (!cart) {
2  return (
3    <View style={[styles.centerContainer, { backgroundColor: colors.background }]}>
4      <Text style={[styles.errorText, { color: colors.text }]}>
5        No cart found. Please add items to your cart first.
6      </Text>
7    </View>
8  )
9}
10
11// Active step uses inverted colors: white bg with dark text in dark mode, tint bg with white text in light mode
12const activeStepBg = colorScheme === "dark" ? "#fff" : colors.tint
13const activeStepText = colorScheme === "dark" ? "#000" : "#fff"
14
15return (
16  <View style={[styles.container, { backgroundColor: colors.background }]}>
17    <View style={[styles.steps, { borderBottomColor: colors.border }]}>
18      {(["delivery", "shipping", "payment"] as CheckoutStep[]).map((step, index) => (
19        <View key={step} style={styles.stepIndicator}>
20          <View
21            style={[
22              styles.stepCircle,
23              {
24                backgroundColor:
25                  currentStep === step ? activeStepBg : colors.icon + "30",
26              },
27            ]}
28          >
29            <Text
30              style={[
31                styles.stepNumber,
32                { color: currentStep === step ? activeStepText : colors.icon },
33              ]}
34            >
35              {index + 1}
36            </Text>
37          </View>
38          <Text
39            style={[
40              styles.stepLabel,
41              {
42                color: currentStep === step ? colors.text : colors.icon,
43                fontWeight: currentStep === step ? "600" : "400",
44              },
45            ]}
46          >
47            {step.charAt(0).toUpperCase() + step.slice(1)}
48          </Text>
49        </View>
50      ))}
51    </View>
52
53    <View style={styles.content}>
54      {currentStep === "delivery" && (
55        <DeliveryStep
56          email={email}
57          shippingAddress={shippingAddress}
58          billingAddress={billingAddress}
59          useSameForBilling={useSameForBilling}
60          loading={loading}
61          onEmailChange={setEmail}
62          onShippingAddressChange={(field, value) =>
63            setShippingAddress((prev) => ({ ...prev, [field]: value }))
64          }
65          onBillingAddressChange={(field, value) =>
66            setBillingAddress((prev) => ({ ...prev, [field]: value }))
67          }
68          onUseSameForBillingChange={setUseSameForBilling}
69          onNext={handleDeliveryNext}
70        />
71      )}
72
73      {currentStep === "shipping" && (
74        <ShippingStep
75          shippingOptions={shippingOptions}
76          selectedShippingOption={selectedShippingOption}
77          currencyCode={cart.currency_code}
78          loading={loading}
79          onSelectOption={setSelectedShippingOption}
80          onBack={() => setCurrentStep("delivery")}
81          onNext={handleShippingNext}
82        />
83      )}
84
85      {currentStep === "payment" && (
86        <PaymentStep
87          cart={cart}
88          paymentProviders={paymentProviders}
89          selectedPaymentProvider={selectedPaymentProvider}
90          loading={loading}
91          onSelectProvider={setSelectedPaymentProvider}
92          onBack={() => setCurrentStep("shipping")}
93          onPlaceOrder={handlePlaceOrder}
94        />
95      )}
96    </View>
97  </View>
98)

If the cart isn't set, a message prompts the user to add items to their cart.

Otherwise, the step indicators are rendered at the top of the screen, and the current step's component is shown.

Add Checkout Screen to Navigation

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

In app/_layout.tsx, Replace the TODO: Add checkout and order confirmation screens comment with the following:

tsx

tsxCopy

1<Stack.Screen
2  name="checkout"
3  options={{
4    headerShown: true,
5    title: "Checkout",
6    presentation: "card",
7    headerBackButtonDisplayMode: "minimal",
8  }}
9/>

Update Cart Screen to Navigate to Checkout

Finally, you'll update the cart screen to navigate to the checkout screen when the user taps the "Proceed to Checkout" button.

In app/(drawer)/(tabs)/(cart)/index.tsx, find the Button at the end of the CartScreen component's return statement, and change the onPress prop to the following:

tsx

tsxCopy

1<Button
2  title="Proceed to Checkout"
3  onPress={() => router.push("/checkout")}
4  loading={loading}
5/>

If you get a type error regarding the /checkout route, the error will be resolved when you run the app.

Test the Checkout Flow

To test the checkout flow, run your Aiminaabee application and Expo app.

Then, in your Expo app, click on the "Proceed to Checkout" button in the cart screen. You should be taken to the checkout screen with the Delivery step as the current step.

In the Delivery step, fill in the email and address fields, then click "Continue" to proceed to the Shipping step.

Delivery step with address filled

Then, in the Shipping step, select a shipping method and click "Continue" to proceed to the Payment step.

Shipping step with shipping method selected

Finally, in the Payment step, select a payment provider. You currently can place an order, but there is no order confirmation screen yet. You'll add it in the next step.

Payment step with payment provider selected

Next: 12. Order confirmation