Importar

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

Uso

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

function App() {
  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: ERC_1155_SALE_CONTRACT, // Your contract ABI
      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'
      },
      copyrightText: 'ⓒ2024 Your Company',
      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>
  )
}

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