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

​
インポート

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

​
返却型：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[]対応するクレジットカードプロバイダーのリスト（例：‘sardine’, ‘transak’）
transakConfigobjectTransak連携用の設定
copyrightTextstringモーダル内に表示する著作権テキスト
onSuccess(txnHash: string) => voidトランザクションが成功した際のコールバック
onError(error: Error) => voidエラー発生時のコールバック
onClose() => voidモーダルが閉じられたときのコールバック
txDatastring購入用のエンコード済みトランザクションデータ

​
closeSelectPaymentModal

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

​
selectPaymentSettings

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

​
補足

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