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

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

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

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

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

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

1

`@0xsequence/checkout`ライブラリをインストールします：

npm install @0xsequence/checkout

# or

pnpm install @0xsequence/checkout

# or

yarn add @0xsequence/checkout
2

アプリ内でSequenceConnect Providerの下に`SequenceCheckoutProvider`を配置します：

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

import { SequenceConnect } from '@0xsequence/connect'

import { config } from './config'



const App = () => {

  return (

    <SequenceConnect config={config}>

      <SequenceCheckoutProvider>

        <Page />

      </SequenceCheckoutProvider>

    </SequenceConnect>

  )

}

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

​
ERC1155トークンでのチェックアウト

ERC1155トークン用の便利なユーティリティ関数があり、チェックアウトモーダルの設定が簡単にできます。

以下はサンプル変数を使った設定例です：

  import { useERC1155SaleContractCheckout } from "@0xsequence/checkout";

  import { useAccount } from "wagmi";



  const MyComponent = () => {

    const { address: userAddress } = useAccount();

    const { openCheckoutModal } = useERC1155SaleContractCheckout({

      chain: 80002, // chainId of the chain the collectible is on

      contractAddress: "0x0327b2f274e04d292e74a06809bcd687c63a4ba4", // address of the contract handling the minting function

      wallet: userAddress!, // address of the recipient

      collectionAddress: "0x888a322db4b8033bac3ff84412738c096f87f9d0", // address of the collection contract

      items: [

        // array of collectibles to purchase

        {

          tokenId: "0",

          quantity: "1",

        },

      ],

      onSuccess: (txnHash: string) => {

        console.log("success!", txnHash);

      },

      onError: (error: Error) => {

        console.error(error);

      },

    });



    const onClick = () => {

      if (!userAddress) {

        return;

      }

      openCheckoutModal();

    };



    return <button onClick={onClick}>Buy ERC-1155 collectible!</button>;

  };

​
カスタムコントラクト

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

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: ['sardine'],

            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でチェックアウトモーダルを使う方法が習得できました。