How to Build a USDC Payment Experience with Wagmi and Programmable Wallets

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.

Create a `config` folder in the parent directory, then move and modify the `wagmi.ts` file accordingly.

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.