> 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[​](#import "Direct link to Import")

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

```

### Usage[​](#usage "Direct link to Usage")

```
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[​](#return-type "Direct link to Return type")

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

```

#### `loading`[​](#loading "Direct link to loading")

`boolean`

Whether the checkout process is in progress.

#### `error`[​](#error "Direct link to error")

`Web3AuthError | null`

error that occurred during the checkout process.

#### `showCheckout`[​](#showcheckout "Direct link to showcheckout")

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

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