How to Build a USDC Payment Experience
In e-commerce, providing a seamless payment experience is crucial for both merchants and customers. In this post, we’ll explore how integrating USDC payments can provide a globally accessible alternative payment method for your online store and accelerate your cash flow with near-instant settlement. By leveraging Circle’s Programmable Wallets* and the popular Wagmi TypeScript library, you can build front-ends to receive USDC transfers in dedicated treasury wallets, while providing a simple payment experience to your customers.
How It Works
When a customer initiates a payment, they’ll connect their wallet and send USDC directly to a wallet address you’ve created specifically for your business with Programmable Wallets. This wallet is generated automatically through a script, ensuring that every transaction is secure and organized.
Step 1: Create a New Wagmi Project
We’ll begin with building the front-end by creating a new Wagmi project using TypeScript. Open your terminal and run the following command:
npm create wagmi@latest
This command will scaffold a new Wagmi project with the necessary configurations.
Step 2: Install Required Dependencies
Navigate to your project directory and install the required dependencies by running:
npm install
Step 3: Configure Your Project Files
Now, let’s set up the necessary files in your project folder structure.
1. Create Chain Config (`wagmi.ts`)Create a `config` folder in the parent directory, then move and modify the `wagmi.ts` file accordingly.
2. Wrap App in Context Provider (`providers.tsx`)Create a new file named `providers.tsx` in the `src` directory and add the following code:
Step 4: Create Components
Create a components folder in your project directory and add the following files:
1. PayButton.tsx
Create a new file named PayButton.tsx in the components folder and add the following code:
2. ProductCard.tsx
Create a new file named ProductCard.tsx in the components folder and add the following code:
Step 5: Create the Landing Page
Create a new file named page.tsx in the src/pages directory and add the following code. This will import and render the ProductCard component:
Step 6: Add External API Calls
Now it’s time to use Programmable Wallets. First, create a new file named createWallet.js in the src/pages/api directory and add the following code to handle external API calls for creating a wallet:
Step 7: Configure Environment Variables
Create a .env file in the root of your project and add your Circle Web3 Services credentials:
CIRCLE_API_KEY=
CIRCLE_ENTITY_SECRET=
Step 8: Run the Application
Start the development server with the following command:
npm run dev
Step 9: Access the Application
Open your browser and navigate to http://localhost:3000 to see your application in action.
Conclusion
Programmable Wallets simplifies the process of embedding wallet functionality into apps, making it easy to accept USDC as a payment method for your business. By leveraging the createWallet.js script and the PayButton.tsx component, you can offer seamless payment experiences for your global customers with near-instant settlement.
*Circle Technology Services, LLC (“CTS”) is a software provider and does not provide regulated financial or advisory services. You are solely responsible for services you provide to users, including obtaining any necessary licenses or approvals and otherwise complying with applicable laws. For additional details, please click here to see the Circle Developer terms of service.