Tool 08 · Payment Operations
Prototype a merchant Pay-by-Bank checkout flow across 5 screens, overlay conversion friction insights at each step, and share your prototype via URL. Client-side only.
What this tool does: This prototyper simulates a 5-screen merchant Pay-by-Bank checkout flow — Product → Payment Method → Bank Select → Bank Login → Success — and overlays conversion friction insights at each step based on A2A UX research. Merchant config (name, amount, colour, rail) is reflected live in the prototype. The full state is URL-encoded for sharing.
The 5-screen state machine:
1. Product Page — Baseline intent. Buyer sees product and initiates checkout.
2. Method Select — Critical drop-off point. Buyer chooses between card and Pay-by-Bank. Unfamiliar labels or missing trust signals cause ~22% abandonment here.
3. Bank Select — Navigation friction. Long bank lists without search cause ~15% drop-off. Coverage gaps (missing bank) cause hard exits.
4. Bank Login — Highest-friction step. Redirect to bank environment breaks context. Strong authentication adds 2–3 steps. ~28% of users who reach this screen do not complete login.
5. Success — Irrevocable settlement confirmation. FedNow/RTP settle in seconds; ACH shows pending state.
Conversion estimates (rule-based JS): The estimated conversion rate is calculated by applying step-specific friction multipliers to a 100% baseline: Method Select ×0.78, Bank Select ×0.85, Bank Login ×0.72, Success ×0.97. The final rate reflects the product of all friction points encountered. These multipliers are derived from open banking UX research (OBIE 2024, Plaid/MX conversion studies, FedNow pilot merchant data).
Friction overlay: The ⚡ overlay mode annotates each screen with the most significant friction points and their estimated impact on conversion. Overlays are static per screen — they do not change based on your config — as they reflect structural UX friction inherent to each step of the Pay-by-Bank journey regardless of merchant branding.
Sharing: The "Share Prototype" button encodes all merchant config (name, amount, product, colour, rail) into a ?s= URL parameter as a base64 JSON string. No data is sent to any server — the URL is decoded entirely in the recipient's browser. Sensitive config should not be shared via unsecured channels.
Data privacy: This tool runs entirely in your browser. No data is transmitted to any server. All processing happens locally on your device.
Source: Built by AINumbers.co · Tool 08 · MIT License.