Sequence Checkout allows users to easily purchase an ERC721 or ERC1155 token with a primary or secondary sales contract such as a marketplace, with the following payment options:
  • Purchase with any cryptocurrency in the wallet.
  • Receive funds from another wallet to a Sequence wallet and purchase.
  • Pay using a credit or debit card which will intelligently detect the correct provider for each region, chain and currency.
  • Pay with another cryptocurrency in a wallet by doing an automated swap and purchase.
We have an integrated checkout flow that you can leverage by installing the dedicated library @0xsequence/checkout and using it in conjunction with @0xsequence/connect.
In order to enable credit card payments for checkout, please get in touch with the Sequence team as your contract address will need to be allowlisted and go through a KYB process for your organization. Credit card payments only work on various networks mainnets

​
Installation and Setup

To integrate the checkout feature, follow these steps:
1

Install the `@0xsequence/checkout` library:

npm install @0xsequence/checkout
# or
pnpm install @0xsequence/checkout
# or
yarn add @0xsequence/checkout
2

Place the `SequenceCheckoutProvider` below the SequenceConnect Provider in your App:

import { SequenceCheckoutProvider } from '@0xsequence/checkout'
import { SequenceConnect } from '@0xsequence/connect'
import { config } from './config'

const App = () => {
  return (
    <SequenceConnect config={config}>
      <SequenceCheckoutProvider>
        <Page />
      </SequenceCheckoutProvider>
    </SequenceConnect>
  )
}
Now we have the setup done, let’s see how to use the checkout modal for different use cases.

​
Checkout with an ERC1155 Token

We have convenient utility functions for ERC1155 tokens that make it easy to configure the checkout modal. Here’s a configuration with example variables: 
  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>;
  };

​
Custom Contract

We instantiate the useSelectPaymentModal hook to open the checkout modal and pass a settings object. In addition, for custom contracts, you can specify a contract ABI along with encoding the call data, in this case we are using ethers and viem’s encodeFunctionData utility. 
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>
}
Congratulations! You’ve just learned how to use the Checkout Modal with Web SDK.