· OnchainKit - Base Documentation">
One-click checkout for onchain commerce
Checkout
component provides a one-click checkout experience for onchain commerce - all for free.
Our all-in-one solution simplifies payment processing for onchain developers, removing complex integrations, high fees, and onboarding friction. Whether you’re selling digital goods, services, or in-game items, this tool is for you.
Checkout
button with just a few lines of code. No backend required.Checkout
component, ensure you’ve completed the Getting Started steps.
Checkout
component, you’ll need to provide a Client API Key in OnchainKitProvider
. You can get one following our Getting Started steps.create onchain
to scaffold your project.
Checkout
to an existing project, simply install OnchainKit.
<OnchainKitProvider />
around your app, following the steps in Getting Started.
Sign up for a Coinbase Commerce account
Create a product and copy the productId
productId
.Import the component
Sign up for a Coinbase Commerce account
Create a Coinbase Commerce API Key
Security
in Settings
.Set up a backend to create charges dynamically using the Coinbase Commerce API
Pass the chargeID into Checkout via the chargeHandler prop
productId
Checkout
component through the productId
prop.
chargeHandler
chargeHandler
prop.
This function must have the signature () => Promise<string>
and must return a valid chargeId created by the create charge endpoint.
productId
and chargeHandler
are mutually exclusive and only one can be provided as a prop to Checkout.
onStatus
prop to listen for the success
callback.
This callback will return a LifecycleStatusData object including the TransactionReceipt and chargeId
.
For idempotent actions, like rendering your own success screen, you can simply check that the statusName
is equal to success
.
For non-idempotent actions, like order fulfillment, we recommend one of the following approaches to verify a charge has been fully paid.
chargeId
using the Coinbase Commerce API.name
and logo
values inside OnchainKitProvider.
coinbaseBranded
prop on CheckoutButton
.
disabled
prop on CheckoutButton
.
text
prop on CheckoutButton
.
className
.
LifecycleStatus
and the onStatus
prop to listen to transaction states.
<Checkout />
- Sets the productId
or chargeHandler
prop.<CheckoutButton />
- Branding and customization of the payment button.<CheckoutStatus />
- The status of the payment.