WalletConnect Pay — Bringing crypto payments to real-world experiences
Designing an end-to-end payment flow for in-store and onchain transactions.
Industry
Client
Year
Project Overview
WalletConnect Pay is a payment solution designed to enable seamless crypto transactions across real-world and digital environments.
The product explores how users can pay with crypto in a way that feels as simple and reliable as traditional payment systems, while handling the complexity of onchain interactions in the background.
At WalletConnect, I contributed to the design of the end-to-end payment experience, with a specific focus on the browser-based payment flow, enabling transactions for wallets that had not yet integrated the WalletConnect Pay SDK.
The Challenge
Fragmented wallet support
Not all wallets support native integrations, requiring alternative access points
High friction at checkout
Multiple steps (connect, approve, sign) increase drop-offs
Real-world constraints
Payments need to work in fast, unpredictable environments (e.g. in-store)
Trust & reliability
Users need reassurance when interacting with unfamiliar payment flows
Design Approach
The design focused on creating a reliable end-to-end payment flow that could work across different wallet capabilities and real-world contexts.
A key part of the work was designing a browser-based experience, allowing users to complete payments even when their wallet did not support native WalletConnect Pay integration.
Key decisions:
Bridge fragmented environments
Ensure continuity between merchant, browser, and wallet without breaking the flowReduce friction across steps
Minimize interruptions between payment request, review, and confirmationLeverage familiar payment patterns
Align the flow with traditional Web2 checkout models to reduce cognitive load and reinforce user mental modelsDesign for real-world reliability
Handle edge cases and errors carefully, providing clear recovery paths to avoid drop-offs during critical momentsAddress compliance constraints
Integrate user profiling steps within the flow to comply with regulations, without compromising the overall experience
Core Experience
Payment Initiation
The flow starts from the merchant, who initiates a payment request on a POS device, generating a unique QR code for the customer to scan.
Users can access the payment in two ways:
Via native camera
Scanning the QR code with the phone’s native camera opens the payment flow in the browser, triggering the gateway experienceVia wallet app
Users can open their mobile wallet and scan the QR code directly from within the app
If the wallet supports WalletConnect Pay, the payment flow is handled natively inside the wallet
Pay With
Users can choose between different payment methods to complete the transaction, depending on their preferences and available funds.
Wallets
Users can select from a list of supported wallets to complete the payment.
Once a wallet is chosen, the system triggers a deep link that adapts the experience based on the wallet’s capabilities:
if the wallet supports WalletConnect Pay SDK, the user is taken directly into the mobile wallet app to continue the payment natively
if the wallet does not support the SDK, the deep link opens the browser flow, where the user can continue the payment through the gateway experience
Exchange Balance
Alternatively, users can choose to pay using their balance on a supported exchange.
In this case, the user is redirected to the exchange platform, where they can log in and complete the payment using their available funds.
Choose Payment Token
The system fetches the user’s wallet balance and displays only the tokens supported by the merchant with sufficient funds to complete the payment.
This reduces decision complexity and ensures users only see valid options.
Each token is presented with relevant information—such as balance and network—allowing users to quickly identify the most suitable option.
Once a token is selected, the flow progresses to the next step, where the user is guided through self-identification for compliance requirements.
Review Payment
Before completing the transaction, users are presented with a clear payment summary, including amount, selected token, and relevant details.
The screen is designed to provide a final moment of verification, helping users feel in control before proceeding.
Once confirmed, the interface transitions into a “Waiting for approval” state.
At this point, the user is redirected to their wallet app, where they are asked to review and sign the transaction.
This transition connects the browser-based flow with the wallet environment, ensuring continuity while moving into the final authorization step.
Payment Completion
Once the transaction is signed, the payment enters a processing state across both devices.
As soon as the payment is confirmed onchain, both interfaces transition to a positive success state, providing immediate visual confirmation.
From the merchant side, the flow can then continue with post-payment actions, such as printing the receipt directly from the POS.
Closing
WalletConnect Pay represents a step toward making crypto payments usable in real-world contexts.
Designing across merchant, browser, and wallet environments required balancing technical constraints, compliance, and usability—turning a fragmented process into a coherent payment experience.
