useSelectPaymentModal

Import

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

Usage

[abis/mintFunctionAbi.ts]

const mintFunctionAbi = {
        type: 'function',
        name: 'mint',
        inputs: [
            {
                name: 'to',
                type: 'address',
                internalType: 'address'
            },
            {
                name: 'tokenIds',
                type: 'uint256[]',
                internalType: 'uint256[]'
            },
            {
                name: 'amounts',
                type: 'uint256[]',
                internalType: 'uint256[]'
            },
            {
                name: 'data',
                type: 'bytes',
                internalType: 'bytes'
            },
            {
                name: 'expectedPaymentToken',
                type: 'address',
                internalType: 'address'
            },
            {
                name: 'maxTotal',
                type: 'uint256',
                internalType: 'uint256'
            },
            {
                name: 'proof',
                type: 'bytes32[]',
                internalType: 'bytes32[]'
            }
        ],
        outputs: [],
        stateMutability: 'payable'
    }

[components/BuyNFT.tsx]

import { useSelectPaymentModal } from '@0xsequence/checkout'
import { encodeFunctionData, toHex } from 'viem'
import { useAccount } from 'wagmi'
import { mintFunctionAbi } from '../abis/erc1155'

function BuyNFT() {
    const { address } = useAccount()
    const { openSelectPaymentModal } = useSelectPaymentModal()

    const handleCheckout = () => {
        if (!address) return

        // ERC-20 payment settings
        const currencyAddress = '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359' // USDC on Polygon
        const salesContractAddress = '0xe65b75eb7c58ffc0bf0e671d64d0e1c6cd0d3e5b'
        const collectionAddress = '0xdeb398f41ccd290ee5114df7e498cf04fac916cb'
        const price = '20000' // Price in smallest unit (0.02 USDC)
        const chainId = 137 // Polygon

        // NFT details
        const collectibles = [
            {
                tokenId: '1',
                quantity: '1'
            }
        ]

        // Transaction data for the ERC-1155 mint function
        const purchaseTransactionData = encodeFunctionData({
            abi: [mintFunctionAbi],
            functionName: 'mint',
            args: [
                address,
                collectibles.map(c => BigInt(c.tokenId)),
                collectibles.map(c => BigInt(c.quantity)),
                toHex(0),
                currencyAddress,
                price,
                [toHex(0, { size: 32 })]
            ]
        })

        // Open the payment selection modal
        openSelectPaymentModal({
            collectibles,
            chain: chainId,
            price,
            targetContractAddress: salesContractAddress,
            recipientAddress: address,
            currencyAddress,
            collectionAddress,
            creditCardProviders: ['transak'],
            onSuccess: (txnHash: string) => {
                console.log('success!', txnHash)
            },
            onError: (error: Error) => {
                console.error(error)
            },
            onClose: () => {
                console.log('modal closed!')
            },
            txData: purchaseTransactionData
        })
    }

    return (
        <button onClick={handleCheckout}>
            Buy NFT with multiple payment options
        </button>
    )
}

export default BuyNFT

Return Type: `UseSelectPaymentModalReturnType`

The hook returns an object with the following properties:

type UseSelectPaymentModalReturnType = {
  openSelectPaymentModal: (settings: SelectPaymentSettings) => void
  closeSelectPaymentModal: () => void
  selectPaymentSettings: SelectPaymentSettings | undefined
}

Properties

openSelectPaymentModal

(settings: SelectPaymentSettings) => void Function to open the Payment Selection modal with the specified settings. Parameters: The settings object can include the following properties:

Parameter	Type	Description
`collectibles`	`Array<{tokenId: string, quantity: string}>`	Array of collectibles to purchase
`chain`	`number`	Blockchain network ID
`price`	`string`	Price in smallest unit of the currency
`targetContractAddress`	`string`	Address of the contract to interact with
`recipientAddress`	`string`	Address to receive the purchased items
`currencyAddress`	`string`	Address of the currency token contract
`collectionAddress`	`string`	Address of the NFT collection contract
`creditCardProviders`	`string[]`	List of supported credit card providers (e.g., ‘transak’)
`copyrightText`	`string`	Copyright text to display in the modal
`onSuccess`	`(txnHash: string) => void`	Callback when transaction succeeds
`onError`	`(error: Error) => void`	Callback when an error occurs
`onClose`	`() => void`	Callback when the modal is closed
`txData`	`string`	Encoded transaction data for the purchase
`forteConfig`	`object`	Forte configuration

forteConfig

The forteConfig object must be provided to enable Forte payments. The protocol must be set to either custom_evm_call or mint depending on whether the transaction is a mint or a general transaction. Furthermore, a sellerAddress string must be provided, indicating the address of the seller in the case of a transaction or the address of the contract in the case of a mint The calldata can be either a string with the calldata (the same as the txData already provided) or a structured calldata object, detailing the function name and the arguments. Crucially, the structured calldata requires a receiver address to be specified as shown in the example below.

const structuredCalldata = {
    functionName: 'mint',
    arguments: [
    {
        type: 'address',
        value: '${receiver_address}' // The address of the receiver of the minted NFTs
    },
    {
        type: 'uint256[]',
        value: ['1']
    },
    {
        type: 'uint256[]',
        value: ['1']
    },
    {
        type: 'bytes',
        value: toHex(0)
    },
    {
        type: 'address',
        value: currencyAddress
    },
    {
        type: 'uint256',
        value: price
    },
    {
        type: 'bytes32[]',
        value: [toHex(0, { size: 32 })]
    }
    ]
}

forteConfig: {
    protocol: 'custom_evm_call',
    calldata: structuredCalldata,
    sellerAddress: '0x184D4F89ad34bb0491563787ca28118273402986'
}

closeSelectPaymentModal

() => void Function to close the Payment Selection modal.

selectPaymentSettings

SelectPaymentSettings | undefined The current settings configuration for the Payment Selection modal.

Notes

This hook provides methods to control the Payment Selection modal that allows users to purchase digital assets with multiple payment options. The modal offers various payment methods including:

Pay with cryptocurrency from the user’s wallet
Swap tokens to pay with a different cryptocurrency
Pay with credit/debit card
Receive funds from another wallet

Web SDKs

Game Engine SDKs

Mobile

Other SDKs

Import

Usage

Return Type: `UseSelectPaymentModalReturnType`

Properties

openSelectPaymentModal

forteConfig

closeSelectPaymentModal

selectPaymentSettings

Notes

​Import

​Usage

​Return Type: UseSelectPaymentModalReturnType

​Properties

​openSelectPaymentModal

​forteConfig

​closeSelectPaymentModal

​selectPaymentSettings

​Notes

Import

Usage

Return Type: `UseSelectPaymentModalReturnType`

Properties

openSelectPaymentModal

forteConfig

closeSelectPaymentModal

selectPaymentSettings

Notes