Skip to main content

useCheckout

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

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.