HP · Paymentdeep dive
← HP Access CatalogFeature deep dive

Payment & metering

A full e-commerce billing system — built to feel like nothing at all.

Built on HP’s existing payment back-end, so app costs routed to the right place invisibly — no employee ever stopping to “buy” a tool they need for their job. Setup happens once — an HP Web ID sign-in, account creation, terms, and a first billing method — so a purchase later is a single tap. The craft was in the parts users never think about: this, and everything that can go wrong.

HP Secure Pay — sign in / create account

HP Web ID
Sign in

Use your HP Web ID to continue your purchase.

Email
you@company.com
Password
••••••••••
Forgot password?
Sign in
Create account
By continuing you agree to the HP Terms of Use.
01The purchase

The happy path — and the spec behind it.

The purchase itself is deliberately unremarkable: confirm, done. What isn’t visible on the happy path is the full error-messaging spec sitting underneath it — every card and currency failure state, numbered and written, so nothing shipped as an afterthought.

the happy path — sign in → pay method → card → confirm → download

1Sign in
HP Web ID
Sign in

Use your HP Web ID to continue your purchase.

Email
you@company.com
Password
••••••••••
Forgot password?
Sign in
Create account
By continuing you agree to the HP Terms of Use.
2Payment method
Add payment
How would you like to pay?
💳
Credit or debit card
Visa, Mastercard, Amex
PayPal
Pay with your PayPal balance
Continue
3Card details
Add credit card
Cardholder name
John Doe
Card number
•••• •••• •••• 2342 💳
Expiry
09 / 27
CVC
•••
Billing postal code
94304
Save card
4Confirm
Confirm purchase
Analytics Dashboard
HP Software
Payment
💳Visa ···· 2342Change
Price$0.99
Tax$0.06
Total$1.05
Complete purchase
5Download
Purchase complete
Purchase successful

Redirecting you to your download…

Analytics Dashboard
Paid · $1.05
Downloading… 64%
02Where it can go wrong

Designing the failure states, not just the success one.

Enterprise billing crosses cards, accounts, and countries — so the edge cases are the product. Two got dedicated flows.

EDGEInvalid card

A dead end that isn’t one.

When a card fails at confirmation, the flow doesn’t strand the user — it routes straight into adding a new credit card or billing account, so a failed purchase becomes a two-tap recovery instead of a restart.

invalid card — declined at confirm, routed straight to adding a new card

4Confirm — declined
Confirm purchase
Analytics Dashboard
HP Software
Card declined

We couldn’t process Visa ···· 2342. Add a different payment method to continue.

Add a new payment method
5Add a new card
Add credit card
Cardholder name
John Doe
Card number
•••• •••• •••• 2342 💳
Expiry
09 / 27
CVC
•••
Billing postal code
94304
Save card
EDGEMismatched currencies

The quietly hard one.

A card issued in one currency against a purchase in another is exactly the kind of failure that erodes trust. The flow catches the mismatch, walks the user to add a card of the right currency, and adds a tooltip showing which countries a given card accepts — turning a confusing rejection into a legible next step.

mismatched currencies — add a card of the right currency

Add credit card
This card is issued in EUR but the purchase is in USD. Add a card that accepts USD.
Cardholder name
John Doe
Card number
•••• •••• •••• 2342 💳
Expiry
09 / 27
CVC
•••
Billing postal code
94304
Save card
Visa ···· 2342 accepts: 🇺🇸 USD · 🇬🇧 GBP · 🇪🇺 EUR — but not the currency of this purchase.
03Adding to an existing account

First payment method, the second time around.

For an account that already exists, adding a first payment method branches cleanly to either a credit card or a PayPal account — the same two rails, without re-walking sign-up.

existing account — add a first payment method (card or PayPal)

Add payment
How would you like to pay?
💳
Credit or debit card
Visa, Mastercard, Amex
PayPal
Pay with your PayPal balance
Continue
!The honest turn

This whole individual-checkout model was later rethought.

Everything above is a consumer-style individual checkout — the right reference for iOS or Android, and the direction the wireframes took. As my contract ended, the model began pivoting to team-based accounting: charges assigned to a person’s team, not paid individually.

Read the full pivot — why the right consumer pattern was the wrong enterprise one