> For the complete documentation index, see [llms.txt](/llms.txt).

# useCheckout

Hook to show the cryptocurrency checkout modal using Wallet Services plugin.

info

Please note that this hook doesn't work for external wallet logins. It only works for social login embedded wallets.

### Import

```tsx
import { useCheckout } from '@web3auth/modal/react'

```

### Usage

```tsx
import { useCheckout } from '@web3auth/modal/react'

function CheckoutButton() {
  const { showCheckout, loading, error } = useCheckout()

  return (
    <div>
      <button onClick={() => showCheckout()} disabled={loading}>
        {loading ? 'Opening Checkout...' : 'Show Checkout'}
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
}

```

### Return type

```tsx
import { type IUseCheckout } from '@web3auth/modal/react'

```

#### `loading`

`boolean`

Whether the checkout process is in progress.

#### `error`

`Web3AuthError | null`

error that occurred during the checkout process.

#### `showCheckout`

`(showCheckoutParams?: BaseEmbedControllerState["showCheckout"]) => Promise<void>`

Function to initiate the checkout modal. Optional `showCheckoutParams` can be passed to customize the modal.