useSelectPaymentModal - Sequence Docs

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

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

​Importar

​Uso

​Tipo de retorno: UseSelectPaymentModalReturnType

​Propiedades

​openSelectPaymentModal

​closeSelectPaymentModal

​selectPaymentSettings

​Notas