@0xsequence/kit-checkout

Sequence Kit Checkout

Checkout modal for Sequence Kit. Displays a list a summary of collectibles to be purchased

Installing the module

First install the package:

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

Then the wallet provider module must placed below the Sequence Kit Core provider.

import { KitCheckoutProvider } from '@0xsequence/kit-checkout'


const App = () => {
  return (
    <WagmiConfig config={config}>
      <QueryClientProvider client={queryClient}> 
        <KitProvider>
          <KitCheckoutProvider>
            <Page />
          </KitCheckoutProvider>
        </KitProvider>
      </QueryClientProvider>
    </WagmiConfig>
  )
}

Open the checkout modal

The useCheckoutModal hook must be used to open the modal. Furthermore, it is necessary to pass a settings object.

  import { useCheckoutModal } from '@0xsequence/kit-checkout'


  const MyComponent = () => {
    const { triggerCheckout } = useCheckoutModal()
  
    const onClick = () => {
      const checkoutSettings = {...}
      triggerCheckout(checkoutSettings)
    }

    return (
      <button onClick={onClick}>checkout</button>
    )
  }

Configuration

The react example has an example configuration for setting up the checkout.

Example settings

const checkoutSettings = {
  cryptoCheckout: {...},
  orderSummaryItems: {...}
}

cryptoCheckout

The cryptoCheckout specifies settings regarding checking out with crypto. An example usecase might be interacting with a minting contract.

The actual cryptoTransaction must be passed down to the triggerTransaction field.

const checkoutConfig = {
  {...},
  cryptoCheckout: {
    chainId: 137,
    triggerTransaction: async () => { console.log('triggered transaction') },
    coinQuantity: {
      contractAddress: '0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174',
      amountRequiredRaw: '10000000000'
    },
  },
}

orderSummaryItems

This field specific the list of collectibles that will show up in the order summary.

    orderSummaryItems: [
      {
        contractAddress: '0x631998e91476da5b870d741192fc5cbc55f5a52e',
        tokenId: '66597',
        quantityRaw: '100'
      },
    ]

Adding Funds with a Credit Card

Kit allows users to buy cryptocurrencies using credit card. Calling the triggerAddFunds function will cause a modal to appear.

  import { useAddFundsModal } from '@0xsequence/kit-checkout'

  const MyComponent = () => {
    const { triggerAddFunds } = useAddFundsModal()

    const onClick = () => {
      triggerAddFunds({
        walletAddress: recipientAddress,
      })
    }

    return (
      <button onClick={onClick}>Add Funds</button>
    )
  }