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.

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. Credit card payments only work on mainnet.

​
Installation and Setup

To integrate the checkout feature, follow these steps:

1

Install the `kit-checkout` module:

npm install @0xsequence/kit-checkout

# or

pnpm install @0xsequence/kit-checkout

# or

yarn add @0xsequence/kit-checkout
2

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>

}

Was this page helpful?

Suggest edits
Custom ConnectorsSmart Swaps