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.