useCreditCardCheckoutModal.mdx

title	useCreditCardCheckoutModal
description	Hook para gestionar el flujo de pago con tarjeta de crédito
sidebarTitle	useCreditCardCheckoutModal

Importar

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

Uso

import { useCreditCardCheckoutModal } from '@0xsequence/checkout'
import { polygon } from 'viem/chains'
import { useAccount } from 'wagmi'

function Home() {
  const { address } = useAccount()
  const { initiateCreditCardCheckout, closeCreditCardCheckout, settings } = useCheckoutModal()

  const handleCheckout = () => {
    // NFT purchase settings
    const chainId = polygon.id
    const orderbookAddress = '0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712'
    const nftQuantity = '1'
    const tokenContractAddress = '0xabcdef...' // NFT contract address
    const tokenId = '123' // NFT token ID

    initiateCreditCardCheckout({
      chainId,
      contractAddress: orderbookAddress,
      recipientAddress: address || '',
      currencyQuantity: '100000',
      currencySymbol: 'USDC',
      currencyAddress: '0x3c499c542cef5e3811e1192ce70d8cc03d5c3359',
      currencyDecimals: '6',
      nftId: tokenId,
      nftAddress: tokenContractAddress,
      nftQuantity,
      approvedSpenderAddress: orderbookAddress,
      calldata: "0x...",
      onSuccess: (txHash) => console.log('Success!', txHash)
    })
  }

  return (
    <button onClick={handleCheckout}>
      Checkout
    </button>
  )
}

export default Home

Propiedades

initiateCreditCardCheckout

(settings: CreditCardCheckoutSettings) => void

Abre el modal de pago con tarjeta de crédito con los parámetros especificados.

Parámetros:

El objeto settings puede incluir las siguientes propiedades:

Parámetro	Tipo	Descripción
chainId	number	El ID de la red blockchain
contractAddress	string	La dirección del contrato con el que interactuar
recipientAddress	string	La dirección que recibirá el artículo comprado
currencyQuantity	string	La cantidad de moneda a usar para el pago
currencySymbol	string	El símbolo de la moneda (por ejemplo, 'USDC')
currencyAddress	string	La dirección del contrato del token de la moneda
currencyDecimals	string	El número de decimales de la moneda
nftId	string	El ID del NFT que se está comprando
nftAddress	string	La dirección del contrato NFT
nftQuantity	string	La cantidad de NFTs a comprar
approvedSpenderAddress	string	La dirección autorizada para gastar tokens
calldata	string	Los datos codificados de la llamada a función para la transacción
onSuccess	(txHash: string) => void	Callback cuando la transacción es exitosa

closeCreditCardCheckout

() => void

Cierra el modal de pago con tarjeta de crédito.

settings

CreditCardCheckoutSettings | undefined

La configuración actual para el modal de pago con tarjeta de crédito.

Notas

Este hook proporciona métodos para controlar el modal de pago con tarjeta de crédito que permite a los usuarios completar compras usando una tarjeta de crédito.