Integrating USDC Payments with Wagmi and Programmable Wallets

Peter
Zhang

Aug
17,
2024
11:28

Learn
how
to
integrate
USDC
payments
into
your
e-commerce
platform
using
Wagmi
and
Circle’s
Programmable
Wallets
for
seamless
and
instant
transactions.

In
the
rapidly
evolving
world
of
e-commerce,
providing
a
seamless
payment
experience
is
crucial
for
both
merchants
and
customers.
According
to

Circle,
integrating
USD
Coin
(USDC)
payments
can
offer
a
globally
accessible
alternative
payment
method
for
online
stores,
accelerating
cash
flow
with
near-instant
settlement.

How
It
Works

When
a
customer
initiates
a
payment,
they
connect
their
wallet
and
send
USDC
directly
to
a
wallet
address
created
specifically
for
the
business
using
Programmable
Wallets.
This
wallet
is
generated
automatically
through
a
script,
ensuring
every
transaction
is
secure
and
organized.

Step-by-Step
Integration

Step
1:
Create
a
New
Wagmi
Project

To
start,
build
the
front-end
by
creating
a
new
Wagmi
project
using
TypeScript.
Open
your
terminal
and
run
the
command:

npm create wagmi@latest

This
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

Set
up
the
necessary
files
in
your
project
folder
structure.
Start
by
creating
a
`config`
folder
in
the
parent
directory
and
then
move
and
modify
the
`wagmi.ts`
file
accordingly.

Step
4:
Create
Components

In
your
project
directory,
create
a
components
folder
and
add
the
following
files:

• 
  PayButton.tsx:
  This
  will
  handle
  the
  payment
  button
  functionality.
• 
  ProductCard.tsx:
  This
  will
  display
  the
  product
  details.

Step
5:
Create
the
Landing
Page

Create
a
new
file
named
`page.tsx`
in
the
src/pages
directory
to
import
and
render
the
ProductCard
component,
providing
a
user
interface
for
customers.

Step
6:
Add
External
API
Calls

Utilize
Programmable
Wallets
by
creating
a
new
file
named
`createWallet.js`
in
the
src/pages/api
directory.
This
will
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

Circle’s
Programmable
Wallets
simplify
the
process
of
embedding
wallet
functionality
into
applications,
making
it
easy
to
accept
USDC
as
a
payment
method
for
businesses.
By
leveraging
the
createWallet.js
script
and
the
PayButton.tsx
component,
merchants
can
offer
seamless
payment
experiences
for
global
customers
with
near-instant
settlement.

Image
source:
Shutterstock