One-click checkout for onchain commerce
The 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.Before using the Checkout
component, ensure you’ve completed the Getting Started steps.
To use the Checkout
component, you’ll need to provide a Client API Key in OnchainKitProvider
. You can get one following our Getting Started steps.
If you’re starting a new project, we recommend using create onchain
to scaffold your project.
If you’re adding Checkout
to an existing project, simply install OnchainKit.
Wrap the <OnchainKitProvider />
around your app, following the steps in Getting Started.
Ideal for fixed-price items. Get started with minimal setup.
Sign up for a Coinbase Commerce account
Head to Coinbase Commerce and sign up. This is where you’ll manage transactions, view reports, and configure payments.
Create a product and copy the productId
In the Coinbase Commerce dashboard, create a new product and copy the productId
.
Import the component
For variable pricing, custom metadata, or multi-product checkouts, use backend-generated charges.
Sign up for a Coinbase Commerce account
Head to Coinbase Commerce and sign up. This is where you’ll manage transactions, view reports, and configure payments.
Create a Coinbase Commerce API Key
In the Coinbase Commerce dashboard, create a new API Key under Security
in Settings
.
Set up a backend to create charges dynamically using the Coinbase Commerce API
See Using chargeHandler for a code example.
Pass the chargeID into Checkout via the chargeHandler prop
That’s it! Start selling onchain with just a few lines of code.
productId
You can create products on the Coinbase Commerce Portal and use them in the Checkout
component through the productId
prop.
chargeHandler
Alternatively, you can create charges dynamically using the Coinbase Commerce API Create Charge endpoint by passing the chargeID into Checkout via the chargeHandler
prop.
This function must have the signature () => Promise<string>
and must return a valid chargeId created by the create charge endpoint.
To create charges, you’ll need a Coinbase Commerce API Key.
⚠️ Warning
You should protect your Coinbase Commerce API Key by only creating charges server-side.
Note that productId
and chargeHandler
are mutually exclusive and only one can be provided as a prop to Checkout.
To handle successful checkouts, use the 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.To verify charges, you’ll need a Coinbase Commerce API Key.
⚠️ Warning
You should protect your Coinbase Commerce API Key by verifying charges server-side. This client-side code is only provided as an example.
You can view successful checkouts on the Coinbase Commerce Merchant Dashboard.
To customize the name and logo of your application rendered in the popup, set the name
and logo
values inside OnchainKitProvider.
You can add Coinbase branding to the component by using the coinbaseBranded
prop on CheckoutButton
.
You can disable the button using the disabled
prop on CheckoutButton
.
You can customize the button text using the text
prop on CheckoutButton
.
We recommend style customization by setting a custom OnchainKit theme. You can also override individual component styles using className
.
You can use our Checkout LifecycleStatus
and the onStatus
prop to listen to transaction states.
The components are designed to work together hierarchically. For each component, ensure the following:
<Checkout />
- Sets the productId
or chargeHandler
prop.<CheckoutButton />
- Branding and customization of the payment button.<CheckoutStatus />
- The status of the payment.One-click checkout for onchain commerce
The 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.Before using the Checkout
component, ensure you’ve completed the Getting Started steps.
To use the Checkout
component, you’ll need to provide a Client API Key in OnchainKitProvider
. You can get one following our Getting Started steps.
If you’re starting a new project, we recommend using create onchain
to scaffold your project.
If you’re adding Checkout
to an existing project, simply install OnchainKit.
Wrap the <OnchainKitProvider />
around your app, following the steps in Getting Started.
Ideal for fixed-price items. Get started with minimal setup.
Sign up for a Coinbase Commerce account
Head to Coinbase Commerce and sign up. This is where you’ll manage transactions, view reports, and configure payments.
Create a product and copy the productId
In the Coinbase Commerce dashboard, create a new product and copy the productId
.
Import the component
For variable pricing, custom metadata, or multi-product checkouts, use backend-generated charges.
Sign up for a Coinbase Commerce account
Head to Coinbase Commerce and sign up. This is where you’ll manage transactions, view reports, and configure payments.
Create a Coinbase Commerce API Key
In the Coinbase Commerce dashboard, create a new API Key under Security
in Settings
.
Set up a backend to create charges dynamically using the Coinbase Commerce API
See Using chargeHandler for a code example.
Pass the chargeID into Checkout via the chargeHandler prop
That’s it! Start selling onchain with just a few lines of code.
productId
You can create products on the Coinbase Commerce Portal and use them in the Checkout
component through the productId
prop.
chargeHandler
Alternatively, you can create charges dynamically using the Coinbase Commerce API Create Charge endpoint by passing the chargeID into Checkout via the chargeHandler
prop.
This function must have the signature () => Promise<string>
and must return a valid chargeId created by the create charge endpoint.
To create charges, you’ll need a Coinbase Commerce API Key.
⚠️ Warning
You should protect your Coinbase Commerce API Key by only creating charges server-side.
Note that productId
and chargeHandler
are mutually exclusive and only one can be provided as a prop to Checkout.
To handle successful checkouts, use the 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.To verify charges, you’ll need a Coinbase Commerce API Key.
⚠️ Warning
You should protect your Coinbase Commerce API Key by verifying charges server-side. This client-side code is only provided as an example.
You can view successful checkouts on the Coinbase Commerce Merchant Dashboard.
To customize the name and logo of your application rendered in the popup, set the name
and logo
values inside OnchainKitProvider.
You can add Coinbase branding to the component by using the coinbaseBranded
prop on CheckoutButton
.
You can disable the button using the disabled
prop on CheckoutButton
.
You can customize the button text using the text
prop on CheckoutButton
.
We recommend style customization by setting a custom OnchainKit theme. You can also override individual component styles using className
.
You can use our Checkout LifecycleStatus
and the onStatus
prop to listen to transaction states.
The components are designed to work together hierarchically. For each component, ensure the following:
<Checkout />
- Sets the productId
or chargeHandler
prop.<CheckoutButton />
- Branding and customization of the payment button.<CheckoutStatus />
- The status of the payment.