@0xsequence/kit-checkout v2.4.2
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.
cons 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'
},
]
4 days ago
5 days ago
4 days ago
12 days ago
13 days ago
14 days ago
18 days ago
19 days ago
21 days ago
21 days ago
24 days ago
24 days ago
25 days ago
25 days ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
5 months ago
5 months ago
5 months ago
6 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago