Skip to main content

useCheckout

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

info

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

Import​

import { useCheckout } from '@web3auth/modal/vue'

Usage​

<script setup lang="ts">
  import { useCheckout } from '@web3auth/modal/vue'

  const { showCheckout, loading, error } = useCheckout()
</script>

<template>
  <button @click="showCheckout" :disabled="loading">
    {{ loading ? "Opening Checkout..." : "Show Checkout" }}
  </button>
  <div v-if="error">Error: {{ error.message }}</div>
</template>

Return type​

import { type IUseCheckout } from '@web3auth/modal/vue'

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