Checkout screen

Installation

$ npx shadcn@latest add @goodui-native-pro/checkout-screen

Then run npx expo install --fix so react-native-svg match your Expo SDK. Files land in components/goodui-native/checkout-screen.

Pro screens install from the license-gated @goodui-native-pro registry. Setup: Pro access.

• •Wrap the app in GestureHandlerRootView and ThemeProvider (sheets and the success check render in its overlay layer).

Usage

// app/checkout.tsx
import { Stack, router } from "expo-router";
import { CheckoutScreen } from "@/components/goodui-native/checkout-screen/checkout-screen";
import { api, useCart, useProfile } from "@/lib/shop";

export default function CheckoutRoute() {
  const cart = useCart();
  const { addresses, cards } = useProfile();
  return (
    <>
      <Stack.Screen options={{ headerShown: false }} />
      <CheckoutScreen
        items={cart.items}
        discount={cart.discount}
        currency="EUR"
        addresses={addresses} // [{ id, label: "Home", name, line }]
        paymentMethods={cards.map((c) => ({ id: c.id, label: `${c.brand} •••• ${c.last4}`, description: `Expires ${c.exp}` }))}
        deliveryOptions={[
          { id: "standard", label: "Standard", description: "Thu 6 to Mon 10 Nov", price: 0 },
          { id: "express", label: "Express", description: "Arrives tomorrow", price: 9.9 },
        ]}
        onPay={(order) => api.placeOrder(order)} // resolve { orderNumber, arrives } or reject new Error("Card declined")
        onDone={(receipt) => router.replace(`/orders/${receipt?.orderNumber}`)}
        onBack={() => router.back()}
      />
    </>
  );
}

When to use

Examples

<CheckoutScreen onDone={() => router.replace("/orders")} />

<CheckoutScreen onPay={async (order) => { const r = await api.pay(order); if (!r.ok) throw new Error("Your bank declined the payment."); return { orderNumber: r.id }; }} />

API reference

Motion and haptics

• •Changing the delivery option rolls the delivery fee and the total, and the slider's 'Slide to pay' amount updates.
• •Slide to pay follows the finger 1:1, ticks at the point of no return, gathers into a spinner while onPay runs, then the success check springs in over the screen, draws its check and bursts confetti.
• •A rejection opens the slider into 'Declined' with a shake, springs the thumb back and slides the banner down.
• •Reduced motion: digits change in place, the slider's releases jump and its states crossfade, the check appears complete without ring or confetti physics, the banner fades.

• •Haptic: select when the slider crosses the point of no return; confirm or error when onPay settles (SwipeToConfirm)
• •Haptic: celebrate as the check lands with its confetti (SuccessCheck)
• •Haptic: select when a delivery row or a Select option is picked (ListRow, Select)
• •Haptic: error when the decline banner appears (Banner)

• •The slider and success check animate on the UI thread; Select sheets mount only while open; React renders on selection changes and payment results.

Accessibility

• •'Checkout' is the header; Back is a labelled icon button.
• •Address and payment are Select fields named by their labels ('Deliver to', 'Pay with') that open a sheet list with checks.
• •Delivery options are checkable rows (radio behaviour); picking one announces the option and the new total.
• •Slide to pay is one button: screen readers activate it with a double tap, the web with Enter or Space; the result is announced.
• •A declined payment shows a danger banner with the reason, announced when it appears. The success check is announced and closes on a tap or Escape.

Notes for AI

Related