> ## 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.

# チェックアウトモーダル

> チェックアウトモーダルは、暗号資産決済を簡単に実装できる開発者向けの機能です。

Sequence Checkoutを使うと、ユーザーはマーケットプレイスなどの一次・二次販売コントラクトで、ERC721またはERC1155トークンを以下の方法で簡単に購入できます：

* ウォレット内の任意の暗号資産で購入
* 他のウォレットからSequenceウォレットに資金を受け取り、そのまま購入
* クレジットカードやデビットカードで支払い（地域・チェーン・通貨ごとに最適なプロバイダーを自動判別）
* ウォレット内の他の暗号資産を自動スワップして購入

専用ライブラリ`@0xsequence/checkout`をインストールし、`@0xsequence/connect`と組み合わせて使うことで、統合されたチェックアウトフローを利用できます。

<Frame>
  <img src="https://mintcdn.com/sequence-0fb8d9e6/Wpr3jlEJhh_VDIM-/images/kit/checkout-modal.png?fit=max&auto=format&n=Wpr3jlEJhh_VDIM-&q=85&s=744cd625dfc35d59578c7e586d50336d" alt="" width="427" height="812" data-path="images/kit/checkout-modal.png" />
</Frame>

<Note>
  チェックアウトでクレジットカード決済を有効にするには、Sequenceチームまでご連絡ください。コントラクトアドレスの許可リスト登録と、組織のKYB手続きが必要です。クレジットカード決済は一部ネットワークのメインネットのみ対応しています。
</Note>

# インストールとセットアップ

チェックアウト機能を統合するには、以下の手順に従ってください：

<Steps>
  <Step title="`@0xsequence/checkout`ライブラリをインストールします：">
    ```bash theme={null}
    npm install @0xsequence/checkout
    # or
    pnpm install @0xsequence/checkout
    # or
    yarn add @0xsequence/checkout
    ```
  </Step>

  <Step title="アプリ内でSequenceConnect Providerの下に`SequenceCheckoutProvider`を配置します：">
    ```jsx theme={null}
    import { SequenceCheckoutProvider } from '@0xsequence/checkout'
    import { SequenceConnect } from '@0xsequence/connect'
    import { config } from './config'

    const App = () => {
      return (
        <SequenceConnect config={config}>
          <SequenceCheckoutProvider>
            <Page />
          </SequenceCheckoutProvider>
        </SequenceConnect>
      )
    }
    ```
  </Step>
</Steps>

セットアップが完了したら、さまざまなユースケースでチェックアウトモーダルを使う方法を見てみましょう。

## カスタムコントラクト

`useSelectPaymentModal`フックを使ってチェックアウトモーダルを開き、設定オブジェクトを渡します。カスタムコントラクトの場合は、コントラクトABIやコールデータのエンコードも指定できます（この例では`ethers`や`viem`の`encodeFunctionData`ユーティリティを使用）。

```tsx theme={null}
import { useAccount } from 'wagmi'
import { useSelectPaymentModal, type SelectPaymentSettings } from '@0xsequence/checkout'
import { toHex } from 'viem'
import { encodeFunctionData } from 'viem'

const MyComponent = () => {
    const { address } = useAccount()
    const { openSelectPaymentModal } = useSelectPaymentModal()

    const onClick = () => {
        if (!address) {
            return
        }

        const currencyAddress = '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359'
        const salesContractAddress = '0xe65b75eb7c58ffc0bf0e671d64d0e1c6cd0d3e5b'
        const collectionAddress = '0xdeb398f41ccd290ee5114df7e498cf04fac916cb'
        const price = '20000'

        const chainId = 137

        const erc1155SalesContractAbi = [
            {
                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'
            }
        ]

        const collectibles = [
            {
                tokenId: '1',
                quantity: '1'
            }
        ]

        const purchaseTransactionData = encodeFunctionData({
            abi: erc1155SalesContractAbi,
            functionName: 'mint',
            args: [
                address,
                collectibles.map(c => BigInt(c.tokenId)),
                collectibles.map(c => BigInt(c.quantity)),
                toHex(0),
                currencyAddress,
                price,
                [toHex(0, { size: 32 })]
            ]
        })

        const selectPaymentModalSettings: SelectPaymentSettings = {
            collectibles: [
                {
                    tokenId: '1',
                    quantity: '1'
                }
            ],
            chain: chainId,
            price,
            targetContractAddress: salesContractAddress,
            recipientAddress: address,
            currencyAddress,
            collectionAddress,
            creditCardProviders: ['transak'],
            copyrightText: 'ⓒ2024 Sequence',
            onSuccess: (txnHash: string) => {
                console.log('success!', txnHash)
            },
            onError: (error: Error) => {
                console.error(error)
            },
            txData: purchaseTransactionData,
        }

        openSelectPaymentModal(selectPaymentModalSettings)
    }

    return <button onClick={onClick}>Buy ERC-1155 collectble!</button>
}
```

おめでとうございます！これでWeb SDKでチェックアウトモーダルを使う方法が習得できました。