Introduction This comprehensive tutorial guides you through the process of building a decentralized e-commerce platform on the Internet Computer that can accept Ethereum (ETH) payments, handle withdrawals, and manage a digital storefront. Starting from a basic template, we’ll incrementally add features to create a robust, cross-chain solution. Why I Made This Tutorial? This tutorial is a hands-on guide designed for developers new to the Internet Computer blockchain. I’ve created a set of libraries to make development easier and more enjoyable, and this tutorial walks you through the process of building a decentralized ETH payment system using these libraries. We’ll explore key features like HTTP outcalls and stable memory, providing a solid foundation for anyone looking to bring their dream project to life on the Internet Computer. Although this tutorial uses my specific set of methods and libraries, there are many other tools and techniques you could use. For example, you could integrate the ic-eth-rpc package for Ethereum RPC calls or accept ckETH as a payment method. The main goal here is to demonstrate the Internet Computer’s flexibility and ease of use, especially when it comes to confirming transactions on-chain. Objective The goal of this tutorial is to create a fully functional decentralized e-commerce platform that: Accepts ETH as payment for digital items Integrates with Ethereum smart contracts for payment processing. Verifies transactions on-chain for added security Allows for the withdrawal of ETH to an Ethereum address Utilizes stable memory to keep track of transactions and items. Manages a digital storefront with items for sale Implements access control to secure sensitive operations Final Product(YouTube Video) [Fully on-chain ETH payment on Internet computer] Prerequisites DFINITY Canister SDK Node.js Rust Basic understanding of Ethereum and smart contracts

Hello everyone, I wanted to let you all know that I’ve made some significant updates to the eth_payment_tutorial project. The recent pull request includes: Refactoring: Cleaned up the codebase for better readability and maintainability. New Features: Integrated the use of the EVM RPC canister instead of HTTP outcall, thanks to @Stephen-Kimoi for the contribution. Dependency Updates: Updated all dependencies to their latest versions to ensure compatibility and security. Integration with @ic-reactor/react: Incorporated the ic-reactor/react library, simplifying authentication and canister interaction in React applications. Simplified Steps: Streamlined the tutorial steps to make it easier for developers to follow along and implement the features. Thank you for your continued support and contributions!

Step 13: Frontend Integration for Shop and Item Purchase In this step, we’ll integrate the frontend to display a shop and handle item purchases. Shop Component Create a new file Shop.tsx inside the src/components directory and add the following code: import { useEffect } from "react" import { useActorMethod } from "service/hello" import Item from "./Item" interface ShopProps {} const Shop: React.FC = ({}) => { const { data: items, loading, call } = useActorMethod("get_items") useEffect(() => { call() }, []) return ( {loading ? ( Loading... ) : ( items?.map(([name, price]) => { return }) )} ) } export default Shop This component fetches the list of items from the backend and displays them in a grid layout. Item Component Create a new file Item.tsx inside the src/components directory and add the following code: import { useEffect } from "react" import helperAbi from "service/abi.json" import { useActorMethod } from "service/hello" import { formatEther } from "viem" import { useContractWrite } from "wagmi" import Confirmation from "./Confirmation" interface ItemProps { name: string price: bigint } const Item: React.FC = ({ name, price }) => { const { data: canisterDepositAddress, call } = useActorMethod( "canister_deposit_principal" ) useEffect(() => { call() }, []) const { data, isLoading, write } = useContractWrite({ address: "0xb44B5e756A894775FC32EDdf3314Bb1B1944dC34", abi: helperAbi, functionName: "deposit", value: price, args: [canisterDepositAddress] }) if (isLoading) { return Buying {name}… } else if (data?.hash) { return } else { return ( {name} {formatEther(price).toString()} ETH write()}>Buy {name} ) } } export default Item This component handles the purchase of individual items. It uses the canister_deposit_principal and deposit methods to handle the transaction. Confirmation Component Edit the existing Confirmation.tsx file to add the item prop: import { Hash } from "viem" import { useWaitForTransaction } from "wagmi" import VerifyTransaction from "./VerifyTransaction" interface ConfirmationProps { item: string hash: Hash } const Confirmation: React.FC = ({ item, hash }) => { const { data, isError, error, isLoading } = useWaitForTransaction({ hash, confirmations: 6 }) if (isError && error) { return Transaction error {error.toString()} } else if (isLoading) { return Waiting for confirmation on Ethereum… } else if (data) { return } else { return null } } export default Confirmation This component waits for the Ethereum transaction to be confirmed and then triggers the on-chain verification on the Internet Computer. Verify Transaction Component Edit the existing VerifyTransaction.tsx file to add the item prop and work with the new buy_item method: import { useEffect } from "react" import { useActorMethod } from "service/hello" interface VerifyTransactionProps { item: string hash: string } const VerifyTransaction: React.FC = ({ item, hash }) => { const { loading, error, data, call } = useActorMethod("buy_item") useEffect(() => { call(item, hash) }, [hash]) if (loading) { return Processing Purchase on ICP... } else if (error) { return {error.toString()} } else if (data) { return ( {item} bought! Purchase ID: {data.toString()} ) } else { return null } } export default VerifyTransaction This component calls the buy_item method on the backend to finalize the purchase and display a purchase ID. Update Wallet Component In your Wallet.tsx, replace with . Testing Local Testing: Run yarn dev to test the application locally. Deploy to Mainnet: Run yarn deploy --network=ic to deploy the application to the Internet Computer mainnet. Live Example: The live example can be accessed at https://uu4vt-kqaaa-aaaap-abmia-cai.icp0.io/. Thank you for taking the time to explore this tutorial. I hope it serves as a helpful starting point for your journey into the Internet Computer ecosystem. If you’d like to dive deeper, you can clone the project and test it out yourself. Here’s the GitHub repository for direct cloning: eth_payment_tutorial. Happy coding!

Great question! You can integrate with shipping services using another HTTP outcall. By sending a request to the shipping service’s API, you can easily handle shipping logistics right from your canister. This way, you can automate the entire process from payment to shipping.

[image] b3hr4d: Check Alchemy Logs: Open your Alchemy dashboard to check the logs. You should see 13 different calls to the JSON-RPC, which collect consensus on the result and then send it to your canister. This ensures that you can trust the whole process as a successful payment. :fire: One of the most fascinating sections in this tutorial is where we dive into the JSON-RPC calls. You’ll see 13 different calls to the JSON-RPC, each collecting consensus on the result before sending it to your canister. This ensures unparalleled trust in the entire payment process. :point_right: This level of trust and security is hard to achieve outside of the Internet Computer ecosystem. And the best part? It’s at least 1000x cheaper than running similar operations on AWS!

Wow. What a thoughtful guide. Thank you for creating it. :pray: Hope it is also ingested into the dev LLM model.

[image] Entrepreneurship groups for finding the right people to work with General Posting years late, but who knows. I have a good sized ecommerce store I would like on the IC. I have a very long history and have pretty good success selling over nearly 25 years now. Anyone interested in helping develop an online store with 8,500 products from a legit business? I just want to do it, I don’t think I’m going to make money, but I’d like to be part of the move. My hosting costs 20,000/y through Bigcommerce as of now.

Hey, I don’t think there would be any problem with using Motoko, especially considering the availability of tools like the EVM RPC client. The only challenge you might face is the lack of certain conversion libraries in Motoko.

Hello, thanks for the guide. I’m trying to follow it. Update the Frontend Code Navigate to the frontend code where the useActorMethod hook is used. This is typically found in a component file. Change the method from "greet" to "deposit_principal": const { call, data, error, loading } = useActorMethod("deposit_principal") more has to be done here than shown - the service has to be updated. I’m trying this: from the JS service: import createReActor from "@re-actor/core" import { canisterId, hello, idlFactory, createActor } from "declarations/hello" export const { initialize, useActorMethod } = createReActor(() => createActor(canisterId, { agentOptions: { host: process.env.NEXT_PUBLIC_IC_HOST } }) ) and for the rust .did file - this did not regenerate when I ran deploy and the tutorial did not say to update this: cat hello/hello.did service : { deposit_principal : (text) -> (text) query } now when I run the code I get a “method deposit_principal not found” error in the UI, I think because the JS does not have the signature: grep -nr "greet" ./src/ ./src/declarations/hello/hello.did.d.ts:5:export interface _SERVICE { 'greet' : ActorMethod } ./src/declarations/hello/hello.did.js:2: return IDL.Service({ 'greet' : IDL.Func([IDL.Text], [IDL.Text], ['query']) }); ./src/components/Greeting.tsx:11: // functionName: "greet", as here it still has the greet reference, even after doing yarn build and npm run deploy hello. How do I compile the rust did into JS?

Hello @nolma, Thank you for reaching out and providing details on the challenges you’re facing while following the guide. Make sure you have ic_cdk::export_candid!(); at the end of your Rust code, then try to run this script: predeploy.sh. sh ./predeploy.sh It will generate the .did file automatically. These steps should align your frontend and backend services properly, resolving the “method not found” error you encountered. If you have further questions or need additional assistance, please feel free to ask.

Hi, thanks for the quick response. The predeploy script fixed the did generation. I mistakenly rmeoved the export_candid and readded, thanks. Now when I run, I enter the canister ID into the field and get a response “cyclic object value”. Is there some other frontend or backend change not shown in the tutorial? It seems the data is being updated with an object that cannot render cleanly.

Building a Cross-Chain ETH Payment and E-Commerce Platform on the Internet Computer: A Step-by-Step Tutorial

Developers Community Tutorials & Video

vdve1997 May 6, 2024, 11:19pm 20

Hey! Would there be any setbacks on doing this on a Motoko built dapp?

Help with cross-chain payments between **Internet Computer (ICP)** and **Ethereum (ETH)** to integrate with Fireblocks-based payment gateway

Topic		Replies	Views
Next Project Ideas, help! Developers	8	466	December 13, 2025
Closed: BNT-6 - Point-of-Sale Payment Dapp Bounties & RFPs	81	4073	February 21, 2024
ckETH: a canister-issued Ether twin token on the IC Developers	231	24766	May 19, 2025
Integrating with the Internet Computer ledger Developers	46	7567	June 11, 2022
Completed: ICDevs.org Bounty #27b - NoKeyWallet - Rust - up to $10k Bounties & RFPs Discussing	23	2816	December 19, 2022

Building a Cross-Chain ETH Payment and E-Commerce Platform on the Internet Computer: A Step-by-Step Tutorial

Related topics