> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stackfront.digital/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkout

# Checkout

The SDK uses Shopify's web checkout flow. Each cart has a `checkoutUrl` that opens Shopify's hosted checkout page.

## Getting the Checkout URL

```tsx theme={null}
import { useCheckout } from 'react-native-stackfront-sdk';

function CheckoutButton() {
  const { getCheckoutUrl } = useCheckout();
  const [loading, setLoading] = useState(false);

  const handleCheckout = async () => {
    setLoading(true);
    const url = await getCheckoutUrl();
    setLoading(false);

    if (url) {
      // Open in in-app browser
      await openBrowser(url);
    }
  };

  return (
    <Button title="Checkout" onPress={handleCheckout} disabled={loading} />
  );
}
```

## Hook API

```ts theme={null}
function useCheckout(): {
  getCheckoutUrl: () => Promise<string | null>;
}
```

Returns `null` if the cart is empty or doesn't exist.

## Alternative: From `useCart`

The checkout URL is also available through `useCart`:

```ts theme={null}
const { cart } = useCart();
// cart?.checkoutUrl — available directly from fetched cart
// Or use getCheckoutUrl() for a dedicated fetch
```

## Opening Checkout

Use `react-native-inappbrowser-reborn` to open the checkout URL:

```tsx theme={null}
import { InAppBrowser } from 'react-native-inappbrowser-reborn';

async function handleCheckout() {
  const { getCheckoutUrl } = useCheckout();
  const url = await getCheckoutUrl();
  if (url) {
    await InAppBrowser.open(url, {
      // iOS
      dismissButtonStyle: 'close',
      // Android
      showTitle: true,
      toolbarColor: '#6200ee',
    });
  }
}
```

## Checkout Flow

1. Build the cart with `addLines` and `updateBuyerIdentity`
2. Get the `checkoutUrl`
3. Open it in an in-app browser
4. Shopify handles the full checkout flow (address, shipping, payment)
5. After completion, Shopify redirects to your configured return URL
6. Clear the cart with `clearCart()` on return

> The `useCheckout` hook is a thin wrapper — it calls `useStackfront().cart.getCheckoutUrl()`. Use `useCart` directly if you already need cart state.