インポート

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

使い方

import { useCheckoutModal } from '@0xsequence/checkout'
import { ChainId } from '@0xsequence/network'

function App() {
  const { address } = useAccount()
  const { triggerCheckout } = useCheckoutModal()
  
  const handleCheckout = () => {
    // NFT purchase settings
    const chainId = ChainId.POLYGON
    const orderbookAddress = '0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712'
    const nftQuantity = '1'
    const orderId = 'your-order-id'
    const tokenContractAddress = '0xabcdef...' // NFT contract address
    const tokenId = '123' // NFT token ID

    triggerCheckout({
      creditCardCheckout: {
        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)
      },
      orderSummaryItems: [
        {
          title: 'NFT #' + tokenId,
          subtitle: 'Your Collection',
          imageUrl: 'https://example.com/nft.png'
        }
      ]
    })
  }
  
  return (
    <button onClick={handleCheckout}>
      Checkout
    </button>
  )
}

返り値の型: UseCheckoutModalReturnType

このフックは以下のプロパティを持つオブジェクトを返します。

type UseCheckoutModalReturnType = {
  triggerCheckout: (settings: CheckoutSettings) => void
  closeCheckout: () => void
  settings: CheckoutSettings | undefined
}

プロパティ

triggerCheckout

(settings: CheckoutSettings) => void

指定したパラメータでチェックアウトモーダルを開きます。

パラメータ:

settingsオブジェクトには以下のプロパティを含めることができます:

プロパティ説明
creditCardCheckoutobjectクレジットカード決済フローの設定
orderSummaryItemsarray注文概要に表示するアイテム

creditCardCheckoutオブジェクトには次の内容が含まれます:

パラメータ説明
chainIdnumberブロックチェーンネットワークID
contractAddressstring操作対象となるコントラクトのアドレス
recipientAddressstring購入したアイテムの受取先アドレス
currencyQuantitystring支払いに使用する通貨の数量
currencySymbolstring通貨のシンボル(例: ‘USDC’)
currencyAddressstring通貨トークンコントラクトのアドレス
currencyDecimalsstring通貨の小数点以下の桁数
nftIdstring購入するNFTのID
nftAddressstringNFTコントラクトのアドレス
nftQuantitystring購入するNFTの数量
approvedSpenderAddressstringトークンの支払いを許可されたアドレス
calldatastringトランザクションのエンコード済み関数呼び出しデータ
onSuccess(txHash: string) => voidトランザクションが成功した際のコールバック

orderSummaryItems配列には以下のオブジェクトが含まれます:

パラメータ説明
titlestringアイテムのタイトル
subtitlestringアイテムのサブタイトル
imageUrlstringアイテム画像のURL

closeCheckout

() => void

チェックアウトモーダルを閉じます。

settings

CheckoutSettings | undefined

チェックアウトモーダルの現在の設定構成です。

補足

このフックは、さまざまな支払い方法で購入を完了できるチェックアウトモーダルを制御するためのメソッドを提供します。チェックアウトは、クレジットカード決済や暗号資産決済によるデジタル資産の購入に対応しています。