Import

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

Usage

import { useERC1155SaleContractCheckout } from "@0xsequence/checkout"
import { useAccount } from "wagmi"

function App() {
  const { address: userAddress } = useAccount()
  const { openCheckoutModal } = useERC1155SaleContractCheckout({
    chain: 80001, // chainId of the chain the collectible is on
    contractAddress: "0x0327b2f274e04d292e74a06809bcd687c63a4ba4", // address of the contract handling the minting function
    wallet: userAddress!, // address of the recipient
    collectionAddress: "0x888a322db4b8033bac3ff84412738c096f87f9d0", // address of the collection contract
    items: [
      // array of collectibles to purchase
      {
        tokenId: "0",
        quantity: "1",
      },
    ],
    onSuccess: (txnHash: string) => {
      console.log("success!", txnHash)
    },
    onError: (error: Error) => {
      console.error(error)
    },
  })

  const onClick = () => {
    if (!userAddress) {
      return
    }
    openCheckoutModal()
  }

  return <button onClick={onClick}>Buy ERC-1155 collectible!</button>
}

Return Type: UseERC1155SaleContractCheckoutReturnType

The hook returns an object with the following properties:

interface UseERC1155SaleContractCheckoutReturnType {
  openCheckoutModal: () => void
  closeCheckoutModal: () => void
  selectPaymentSettings?: SelectPaymentSettings
  isLoading: boolean
  isError: boolean
}

Properties

openCheckoutModal

() => void

Function to open the checkout modal with the configured ERC-1155 purchase.

closeCheckoutModal

() => void

Function to close the checkout modal.

selectPaymentSettings

SelectPaymentSettings | undefined

export interface SelectPaymentSettings {
  collectibles: Collectible[]
  chain: number | string
  currencyAddress: string | Hex
  price: string
  targetContractAddress: string | Hex
  txData: Hex
  collectionAddress: string | Hex
  recipientAddress: string | Hex
  approvedSpenderAddress?: string
  transactionConfirmations?: number
  onSuccess?: (txHash: string) => void
  onError?: (error: Error) => void
  onClose?: () => void
  enableMainCurrencyPayment?: boolean
  enableSwapPayments?: boolean
  enableTransferFunds?: boolean
  creditCardProviders?: string[]
  copyrightText?: string
  transakConfig?: TransakConfig
  customProviderCallback?: (onSuccess: (txHash: string) => void, onError: (error: Error) => void, onClose: () => void) => void
  supplementaryAnalyticsInfo?: SupplementaryAnalyticsInfo
}

The current payment settings configuration for the modal.

isLoading

boolean

Whether the contract data is still loading.

isError

boolean

Whether there was an error loading the contract data.

Parameters

The hook accepts a configuration object with the following properties:

ParameterTypeDescription
chainnumberChain ID where the sale contract is deployed
contractAddressstringAddress of the ERC-1155 sale contract
walletstringAddress of the wallet that will receive the NFTs
collectionAddressstringAddress of the ERC-1155 token contract
itemsArray<{tokenId: string, quantity: string}>Array of token IDs and quantities to purchase
onSuccess(txnHash: string) => void(Optional) Callback function when the transaction is successful
onError(error: Error) => void(Optional) Callback function when an error occurs
onClose() => void(Optional) Callback function when the modal is closed

Notes

This hook simplifies the process of purchasing ERC-1155 tokens by automatically:

  • Fetching price information from the sale contract
  • Determining payment options (crypto, credit card, etc.)
  • Generating the proper transaction data
  • Opening and managing the checkout modal

Deprecation Notice

The useERC1155SaleContractPaymentModal hook is deprecated. Use useERC1155SaleContractCheckout instead.