Saltar al contenido principal

​
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: ['sardine', 'transak'],
            transakConfig: {
                contractId: 'your-contract-id',
                apiKey: 'your-api-key'
            },
            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
Modal de Selección de Pago

​
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ámetroTypeDescription
collectiblesArray<{tokenId: string, quantity: string}>Lista de coleccionables a comprar
chainnumberID de la red blockchain
pricestringPrecio en la unidad más pequeña de la moneda
targetContractAddressstringDirección del contrato con el que interactuar
recipientAddressstringDirección que recibirá los artículos comprados
currencyAddressstringDirección del contrato del token de la moneda
collectionAddressstringDirección del contrato de la colección NFT
creditCardProvidersstring[]Lista de proveedores de tarjeta de crédito soportados (por ejemplo, ‘sardine’, ‘transak’)
transakConfigobjectConfiguración para la integración con Transak
copyrightTextstringTexto de derechos de autor para mostrar en el modal
onSuccess(txnHash: string) => voidCallback cuando la transacción es exitosa
onError(error: Error) => voidCallback cuando ocurre un error
onClose() => voidCallback cuando se cierra el modal
txDatastringDatos 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