メインコンテンツへスキップ

​
インポート

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

​
使い方

[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
支払い方法選択モーダル

​
返却型：UseSelectPaymentModalReturnType

このフックは以下のプロパティを持つオブジェクトを返します。 
type UseSelectPaymentModalReturnType = {
  openSelectPaymentModal: (settings: SelectPaymentSettings) => void
  closeSelectPaymentModal: () => void
  selectPaymentSettings: SelectPaymentSettings | undefined
}

​
プロパティ

​
openSelectPaymentModal

(settings: SelectPaymentSettings) => void 指定した設定で支払い選択モーダルを開く関数です。 パラメータ： settingsオブジェクトには以下のプロパティを含めることができます:
パラメータ型説明
collectiblesArray<{tokenId: string, quantity: string}>購入対象のコレクティブルの配列
chainnumberブロックチェーンネットワークID
pricestring通貨の最小単位での価格
targetContractAddressstring操作対象となるコントラクトのアドレス
recipientAddressstring購入したアイテムの受取先アドレス
currencyAddressstring通貨トークンコントラクトのアドレス
collectionAddressstringNFTコレクションコントラクトのアドレス
creditCardProvidersstring[]対応しているクレジットカードプロバイダー一覧（例：‘transak’）
copyrightTextstringモーダル内に表示する著作権テキスト
onSuccess(txnHash: string) => voidトランザクションが成功した際のコールバック
onError(error: Error) => voidエラー発生時のコールバック
onClose() => voidモーダルが閉じられたときのコールバック
txDatastring購入用のエンコード済みトランザクションデータ
forteConfigobjectForteの設定

​
forteConfig

Forte決済を有効にするには、forteConfigオブジェクトの指定が必要です。 プロトコルは、トランザクションがミントか一般的なトランザクションかによって、custom_evm_call または mint のいずれかに設定する必要があります。 さらに、トランザクションの場合は販売者のアドレス、ミントの場合はコントラクトのアドレスを示すsellerAddress文字列を指定してください。 calldataは、（すでに指定されているtxDataと同じ）calldataの文字列、または関数名と引数を詳細に記述した構造化calldataオブジェクトのいずれかを指定できます。特に、構造化calldataの場合は、下記の例のように受取人アドレス（receiver address）の指定が必須です。 
const structuredCalldata = {
    functionName: 'mint',
    arguments: [
    {
        type: 'address',
        value: '${receiver_address}' // The address of the receiver of the minted NFTs
    },
    {
        type: 'uint256[]',
        value: ['1']
    },
    {
        type: 'uint256[]',
        value: ['1']
    },
    {
        type: 'bytes',
        value: toHex(0)
    },
    {
        type: 'address',
        value: currencyAddress
    },
    {
        type: 'uint256',
        value: price
    },
    {
        type: 'bytes32[]',
        value: [toHex(0, { size: 32 })]
    }
    ]
}

forteConfig: {
    protocol: 'custom_evm_call',
    calldata: structuredCalldata,
    sellerAddress: '0x184D4F89ad34bb0491563787ca28118273402986'
}

​
closeSelectPaymentModal

() => void 支払い選択モーダルを閉じる関数です。

​
selectPaymentSettings

SelectPaymentSettings | undefined 支払い選択モーダルの現在の設定内容

​
補足

このフックは、ユーザーが複数の支払い方法でデジタル資産を購入できる支払い選択モーダルの制御メソッドを提供します。モーダルでは以下の支払い方法が利用可能です：
  • ユーザーのウォレットから暗号資産で支払う
  • 異なる暗号資産にスワップして支払う
  • クレジット／デビットカードで支払う
  • 他のウォレットから資金を受け取る