Skip to main content

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 { useCheckout } from '@web3auth/modal/react'

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​

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.

On this page