useSelectPaymentModal

Hook para abrir el modal de selección de pago

​

Importar

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

​

Uso

[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

​

Tipo de retorno: UseSelectPaymentModalReturnType

El hook retorna un objeto con las siguientes propiedades:

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

​

Propiedades

​

openSelectPaymentModal

(settings: SelectPaymentSettings) => void

Función para abrir el modal de Selección de Pago con la configuración especificada.

Parámetros:

El objeto settings puede incluir las siguientes propiedades:

Parámetro	Tipo	Descripción
collectibles	Array<{tokenId: string, quantity: string}>	Lista de coleccionables a comprar
chain	number	ID de la red blockchain
price	string	Precio en la unidad más pequeña de la moneda
targetContractAddress	string	Dirección del contrato con el que interactuar
recipientAddress	string	Dirección que recibirá los artículos comprados
currencyAddress	string	Dirección del contrato del token de la moneda
collectionAddress	string	Dirección del contrato de la colección NFT
creditCardProviders	string[]	Lista de proveedores de tarjetas de crédito compatibles (por ejemplo, ‘transak’)
copyrightText	string	Texto de derechos de autor para mostrar en el modal
onSuccess	(txnHash: string) => void	Callback cuando la transacción es exitosa
onError	(error: Error) => void	Callback cuando ocurre un error
onClose	() => void	Callback cuando se cierra el modal
txData	string	Datos de transacción codificados para la compra
forteConfig	object	Configuración de Forte

​

forteConfig

Debe proporcionar el objeto forteConfig para habilitar los pagos con Forte.

El protocolo debe establecerse como custom_evm_call o mint, según si la transacción es un minteo o una transacción general. Además, se debe proporcionar una cadena sellerAddress, que indica la dirección del vendedor en el caso de una transacción o la dirección del contrato en el caso de un minteo.

El calldata puede ser una cadena con el calldata (igual que el txData ya proporcionado) o un objeto calldata estructurado, que detalla el nombre de la función y los argumentos. Es fundamental que el calldata estructurado incluya una dirección de receptor, como se muestra en el siguiente ejemplo.

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

Función para cerrar el modal de Selección de Pago.

​

selectPaymentSettings

SelectPaymentSettings | undefined

La configuración actual para el modal de Selección de Pago.

​

Notas

Este hook proporciona métodos para controlar el modal de Selección de Pago, que permite a los usuarios comprar activos digitales con múltiples opciones de pago. El modal ofrece varios métodos de pago, incluyendo:

• Pagar con criptomonedas desde la wallet del usuario
• Intercambiar tokens para pagar con otra criptomoneda
• Pagar con tarjeta de crédito/débito
• Recibir fondos desde otra wallet