Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.sequence.xyz/llms.txt

Use this file to discover all available pages before exploring further.

​
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
Payment Selection Modal

​
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:
ParameterTypeDescription
collectiblesArray<{tokenId: string, quantity: string}>Array of collectibles to purchase
chainnumberBlockchain network ID
pricestringPrice in smallest unit of the currency
targetContractAddressstringAddress of the contract to interact with
recipientAddressstringAddress to receive the purchased items
currencyAddressstringAddress of the currency token contract
collectionAddressstringAddress of the NFT collection contract
creditCardProvidersstring[]List of supported credit card providers (e.g., ‘transak’)
copyrightTextstringCopyright text to display in the modal
onSuccess(txnHash: string) => voidCallback when transaction succeeds
onError(error: Error) => voidCallback when an error occurs
onClose() => voidCallback when the modal is closed
txDatastringEncoded transaction data for the purchase

​
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