useCheckoutModal

Hook for managing a simple checkout modal

Import

import { useCheckoutModal } from '@0xsequence/checkout'

Usage

import { useCheckoutModal } from '@0xsequence/checkout'
import { ChainId } from '@0xsequence/network'

function App() {
  const { address } = useAccount()
  const { triggerCheckout } = useCheckoutModal()
  
  const handleCheckout = () => {
    // NFT purchase settings
    const chainId = ChainId.POLYGON
    const orderbookAddress = '0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712'
    const nftQuantity = '1'
    const orderId = 'your-order-id'
    const tokenContractAddress = '0xabcdef...' // NFT contract address
    const tokenId = '123' // NFT token ID

    triggerCheckout({
      creditCardCheckout: {
        chainId,
        contractAddress: orderbookAddress,
        recipientAddress: address || '',
        currencyQuantity: '100000',
        currencySymbol: 'USDC',
        currencyAddress: '0x3c499c542cef5e3811e1192ce70d8cc03d5c3359',
        currencyDecimals: '6',
        nftId: tokenId,
        nftAddress: tokenContractAddress,
        nftQuantity,
        approvedSpenderAddress: orderbookAddress,
        calldata: "0x...",
        onSuccess: (txHash) => console.log('Success!', txHash)
      },
      orderSummaryItems: [
        {
          title: 'NFT #' + tokenId,
          subtitle: 'Your Collection',
          imageUrl: 'https://example.com/nft.png'
        }
      ]
    })
  }
  
  return (
    <button onClick={handleCheckout}>
      Checkout
    </button>
  )
}

Return Type: UseCheckoutModalReturnType

The hook returns an object with the following properties:

type UseCheckoutModalReturnType = {
  triggerCheckout: (settings: CheckoutSettings) => void
  closeCheckout: () => void
  settings: CheckoutSettings | undefined
}

Properties

triggerCheckout

(settings: CheckoutSettings) => void

Opens the Checkout modal with the specified parameters.

Parameters:

The settings object can include the following properties:

Property	Type	Description
creditCardCheckout	object	Settings for credit card checkout flow
orderSummaryItems	array	Items to display in the order summary

The creditCardCheckout object includes:

Parameter	Type	Description
chainId	number	The blockchain network ID
contractAddress	string	The address of the contract to interact with
recipientAddress	string	The address to receive the purchased item
currencyQuantity	string	The quantity of currency to use for payment
currencySymbol	string	The symbol of the currency (e.g., ‘USDC’)
currencyAddress	string	The address of the currency token contract
currencyDecimals	string	The number of decimals for the currency
nftId	string	The ID of the NFT being purchased
nftAddress	string	The address of the NFT contract
nftQuantity	string	The quantity of NFTs to purchase
approvedSpenderAddress	string	The address allowed to spend tokens
calldata	string	The encoded function call data for the transaction
onSuccess	(txHash: string) => void	Callback when transaction succeeds

The orderSummaryItems array contains objects with:

Parameter	Type	Description
title	string	The title of the item
subtitle	string	The subtitle of the item
imageUrl	string	URL of the item’s image

closeCheckout

() => void

Closes the Checkout modal.

settings

CheckoutSettings | undefined

The current settings configuration for the Checkout modal.

Notes

This hook provides methods to control the Checkout modal that allows users to complete purchases using various payment methods. Checkout supports credit card payments and crypto payments for purchasing digital assets.