Sign Up
Skip to content

Overview

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.
  • Transfer 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 within Sequence Kit that you can leverage by installing the dedicated sub-module kit-checkout.

Enable the checkout modal in Sequence Kit to onboard users using fiat currencies with a credit or debit card

Installation and Setup

To integrate the checkout feature, follow these steps:

Install the kit-checkout module:

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

Place the KitCheckoutProvider below the Sequence Kit Core Provider in your App:

import { KitCheckoutProvider } from '@0xsequence/kit-checkout'
 
const App = () => {
  return (
    <SequenceKit config={config}>
      <KitCheckoutProvider>
        <Page />
      </KitCheckoutProvider>
    </SequenceKit>
  )
}

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 varibles variables:

import { useERC1155SaleContractCheckout } from "@0xsequence/kit-checkout";
import { useAccount } from "wagmi";
 
const MyComponent = () => {
  const { address: userAddress } = useAccount();
  const { openCheckoutModal } = useERC1155SaleContractCheckout({
    chain: 80001, // 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/kit-checkout'
 
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 purchaseTransactionData = encodeFunctionData({
      abi: erc1155SalesContractAbi,
      functionName: 'mint',
      args: [
        recipientAddress,
        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,
      isDev: true,
      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>
}