> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sequence.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# useSelectPaymentModal

> 支払い選択モーダルを開くためのフック

## インポート

```tsx theme={null}
import { useSelectPaymentModal } from '@0xsequence/checkout'
```

## 使い方

```typescript [abis/mintFunctionAbi.ts] theme={null}
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'
    }
```

```tsx [components/BuyNFT.tsx] theme={null}
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
```

<img src="https://mintcdn.com/sequence-0fb8d9e6/Tth5BgL8xCZWla4s/images/sdk/Checkout_SelectPaymentModal.png?fit=max&auto=format&n=Tth5BgL8xCZWla4s&q=85&s=9430ee5f2f6b8a6da16c8e0d1741f8cc" alt="支払い方法選択モーダル" height="200" className="rounded-lg" data-path="images/sdk/Checkout_SelectPaymentModal.png" />

## 返却型：`UseSelectPaymentModalReturnType`

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

```tsx theme={null}
type UseSelectPaymentModalReturnType = {
  openSelectPaymentModal: (settings: SelectPaymentSettings) => void
  closeSelectPaymentModal: () => void
  selectPaymentSettings: SelectPaymentSettings | undefined
}
```

### プロパティ

#### openSelectPaymentModal

`(settings: SelectPaymentSettings) => void`

指定した設定で支払い選択モーダルを開く関数です。

**パラメータ：**

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

| パラメータ                   | 型                                            | 説明                                  |
| ----------------------- | -------------------------------------------- | ----------------------------------- |
| `collectibles`          | `Array<{tokenId: string, quantity: string}>` | 購入対象のコレクティブルの配列                     |
| `chain`                 | `number`                                     | ブロックチェーンネットワークID                    |
| `price`                 | `string`                                     | 通貨の最小単位での価格                         |
| `targetContractAddress` | `string`                                     | 操作対象となるコントラクトのアドレス                  |
| `recipientAddress`      | `string`                                     | 購入したアイテムの受取先アドレス                    |
| `currencyAddress`       | `string`                                     | 通貨トークンコントラクトのアドレス                   |
| `collectionAddress`     | `string`                                     | NFTコレクションコントラクトのアドレス                |
| `creditCardProviders`   | `string[]`                                   | 対応しているクレジットカードプロバイダー一覧（例：'transak'） |
| `copyrightText`         | `string`                                     | モーダル内に表示する著作権テキスト                   |
| `onSuccess`             | `(txnHash: string) => void`                  | トランザクションが成功した際のコールバック               |
| `onError`               | `(error: Error) => void`                     | エラー発生時のコールバック                       |
| `onClose`               | `() => void`                                 | モーダルが閉じられたときのコールバック                 |
| `txData`                | `string`                                     | 購入用のエンコード済みトランザクションデータ              |

#### closeSelectPaymentModal

`() => void`

支払い選択モーダルを閉じる関数です。

#### selectPaymentSettings

`SelectPaymentSettings | undefined`

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

## 補足

このフックは、ユーザーが複数の支払い方法でデジタル資産を購入できる支払い選択モーダルの制御メソッドを提供します。モーダルでは以下の支払い方法が利用可能です：

* ユーザーのウォレットから暗号資産で支払う
* 異なる暗号資産にスワップして支払う
* クレジット／デビットカードで支払う
* 他のウォレットから資金を受け取る