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

​
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: 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/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.

Was this page helpful?

Suggest edits