Grep · sample report

UX Pattern Benchmark — A screen-by-screen comparison of how your chosen products handle one flow, with friction points, tradeoffs, and specific ideas worth borrowing.

workon demandoperational
Inputs used for this sample
UX Pattern Benchmark

Flow or pattern to benchmark: Checkout for a first-time buyer

Products or category to compare (one per line): Shopify Checkout
Stripe Checkout
Square Online

Locale or market (optional): US English, mobile web

Your product or design goal (optional): We're a B2B invoicing tool trying to cut drop-off on the payment step

First-Time Buyer Checkout Benchmark: Shopify, Stripe and Square Online (US, Mobile Web)

Interpretation: I benchmarked the first-time, guest buyer path from the cart to the order confirmation, for US English on mobile web. The products are Shopify Checkout, Stripe Checkout and Square Online. The goal is to cut drop-off on a B2B invoicing tool's payment step. Headline finding: all three products win by removing typing before payment (wallets, saved-details networks, optional fields), and none of the three documents a required step that a B2B invoice payer would not already face. Most of the evidence is vendor documentation, not live screen captures, so several screens are marked "Not evidenced" below.

Step table

Every row below comes from a page I fetched on 2026-10-06. Vendor help pages carry no publish date, so they are logged as "undated, accessed 2026-10-06". Merchant settings change what a buyer sees, so treat each row as a default or a configurable option, not a guaranteed screen. [A/B] marks a likely variation by store configuration or plan.

Step # Product Screen/step What the user sees and does Required inputs Pattern used Friction or risk Source and date
1 Shopify Cart or checkout top Express buttons such as Apple Pay can appear in the cart. In one merchant example, Shop Pay, PayPal and Google Pay sit above the form. none Wallet button [A/B] Buttons disappear if the merchant forces sign-in or makes Company name required (Shopify Help). Shopify Help, checkout form options and Shopify guest checkout guide, undated, accessed 2026-10-06
2 Shopify Contact Buyer enters an email (default on new stores) or chooses phone or email. A "Sign in" link sits beside the Contact heading. A marketing checkbox may show. Email, or phone or email Guest checkout with sign-in link Email checkbox can be preselected in some regions, so a buyer must opt out ([A/B], [Locale]). Shopify Help, checkout form options and Shopify guest checkout guide (Sign in link), undated, accessed 2026-10-06
3 Shopify Delivery First and last name are separate fields by default. Address line 2 and phone are optional by default. A "Save this information for next time" option is offered. First name, last name, address; others optional Optional-field defaults, browser-cached autofill Shipping step is skipped when no item needs shipping. Making line 2 required can block some buyers. Shopify Help, checkout form options, undated, accessed 2026-10-06
4 Shopify Payment The guest path reaches "contact, delivery, and payment fields". Some countries show extra tax fields after the payment details. Card field layout on mobile: Not evidenced. Not evidenced Not evidenced [Locale] Extra tax fields in some countries. Shopify guest checkout guide (footer shows "Updated on Jul 14, 2023") and Shopify Help, checkout form options (tax fields), accessed 2026-10-06
5 Shopify Order confirmation Guest reviews the order, pays, and receives a confirmation. The order status page can show a prompt to download the Shop app. none Post-purchase account invite none observed Shopify guest checkout guide and Shopify Help, checkout form options (Shop app prompt), accessed 2026-10-06
1 Stripe Form opens The merchant creates a Checkout Session and the embedded form shows a payment form on the merchant's site. The docs describe a single-page layout. none Embedded single-page form A multi-step compact layout exists only in private preview, so not generally visible. Stripe Docs, How Checkout works, undated, accessed 2026-10-06
2 Stripe Details and payment (new customer) The form can collect payment details for 100+ methods, express wallets, billing and shipping address, shipping options, tax details, currency and custom text fields. The merchant picks which. Merchant-configured; exact default fields: Not evidenced Wallet button, configurable fields [A/B] Field count depends on merchant setup. Stripe Docs, How Checkout works, accessed 2026-10-06
3 Stripe Link autofill (returning Link users) Logged-in Link users get saved payment details autofilled, even if saved at another business. In sandbox, authentication uses a 6-digit one-time passcode. Email; one-time code for Link users (inferred from the sandbox test table) Saved-details network A first-time buyer without Link sees no benefit (inferred). Stripe Docs, Link with Checkout, undated, accessed 2026-10-06
4 Stripe Completion After payment, a webhook triggers fulfillment. The buyer-facing success screen: Not evidenced. none Not evidenced none observed Stripe Docs, How Checkout works, accessed 2026-10-06
1 Square Online Add to cart or Buy now Merchant picks Add to cart or Buy now, which skips the cart for a single item. none Skip-the-cart option [A/B] Merchant setting. Square Support, checkout options, undated, accessed 2026-10-06
2 Square Online Fulfillment Shipping, Pickup or Local delivery, with a merchant-chosen default preselected. Fulfillment choice Preselected default none observed Square Support, checkout options, accessed 2026-10-06
3 Square Online Customer inputs Optional note to seller and optional marketing opt-in. Buyer address is collected for chosen fulfillment types, and always for gift orders. Address when required by fulfillment; name and contact fields: Not evidenced Optional-field defaults Page does not say whether the marketing box is preselected. Square Support, checkout options, accessed 2026-10-06
4 Square Online Tip For pickup, local delivery and QR orders, three preset tip percentages show, optionally with one preselected. Customers can change or remove it. none Preset tip buttons Orders under $10 show whole amounts, over $10 percentages ("Smart tips"). A preselected tip is a risk if left on by default. Square Support, checkout options, accessed 2026-10-06
5 Square Online Payment Card payments work by default. Apple Pay, Google Pay, Afterpay, Cash App Pay and gift cards are optional. Buyers can opt in to Square Pay by giving email and mobile number. Card details (fields: Not evidenced); email and phone for Square Pay Wallet button, saved-details opt-in, buy-now-pay-later [A/B] Apple Pay appears only in Safari. Afterpay covers $1 to $2,000 by default. Square Support, payment options, undated, accessed 2026-10-06
6 Square Online Confirmation Order details, order type and status, shipping or pickup details, items and store policies. Shipping and return policies are also shown during checkout. none Policy disclosure none observed Square Support, checkout options, accessed 2026-10-06

Product summary

Product Total steps Required fields Standout strength Main tradeoff
Shopify Checkout 5 evidenced (+gaps: payment screen) Email or phone; first and last name; address (card fields not evidenced) Optional-by-default fields and a sign-in link that does not block guests Forced sign-in or required Company name removes wallet buttons
Stripe Checkout 4 evidenced (+gaps: default fields, hosted page, success screen) Not evidenced (merchant-configured) One embedded form with wallets and Link saved details Gains depend on the buyer already having Link or a wallet
Square Online 6 evidenced (+gaps: name and card fields) Not fully evidenced; address only for chosen fulfillment types Many merchant switches, including skip-cart and Square Pay Tip and fulfillment steps add decisions that a B2B payer would not need

Ideas to borrow (ranked for a B2B invoice payment step)

  1. Make every non-essential field optional or absent (Shopify step 3). Shopify defaults phone and address line 2 to optional (Shopify Help). Baymard reports that the average US checkout shows 23.48 form elements by default, against an ideal as low as 12. For an invoice, the amount, payer and method are already known, so adaptation cost is low.
  2. Show wallet buttons above the form (Shopify step 1, Stripe step 2, Square step 5). All three vendors support Apple Pay or similar. Adaptation needs wallet enablement and a check that the button survives your own sign-in rules, since Shopify hides them when sign-in is forced (Shopify Help).
  3. Offer saved details across merchants (Stripe step 3, Square step 5). Link autofills details saved at other businesses, and Square Pay saves name, address and card against an email and phone. This suits repeat B2B payers. Adaptation cost is medium and depends on whether you use Stripe or build your own vault.
  4. Keep sign-in beside the form, not in front of it (Shopify step 2). Shopify's own guide says to give guest checkout the primary button and keep sign-in close, citing Baymard's finding that 62% of sites fail to make guest checkout most prominent. This is a vendor guide quoting Baymard, so confirm with Baymard directly.
  5. Offer account creation after payment (Shopify step 5). The guide recommends an optional invite on the confirmation page (Shopify guest checkout guide). Low cost, and it protects the first payment.
  6. Preselect sensible defaults (Square step 2). Square preselects a fulfillment method (Square Support). For invoices, preselect the payer's saved method or the cheapest bank option.
  7. Show policies before payment (Square step 6). Square shows shipping and return policies during checkout (Square Support). Adapt this as payment terms and a receipt preview. Baymard's data, as quoted by Shopify, says 19% of non-browsing abandoners left over card trust.

Patterns to avoid

Do next

  1. Capture each product's real mobile guest flow on a device and record field counts. This run found docs, not screen captures.
  2. Test the Stripe hosted Checkout page in a sandbox account (you create the account, not me) to fill the Stripe field gaps.
  3. Count your own payment step's fields against Baymard's 12-element reference.
  4. A/B test wallet-first against form-first on invoice pay pages, with completion rate as the metric.
  5. Run an accessibility pass (labels, focus order, error announcement, target size) on your own page. I could not verify any of these for the three products from documentation alone.

Open items

Coverage

Unreachable: Shopify's Shop Pay customer help page returned a 403 block. Not fetched: Mobbin or Page Flows captures, YouTube walkthroughs, app store listings, product changelogs, and Nielsen Norman Group articles (a search surfaced an NN/G mobile checkout article but I did not open it). Findings are therefore documentation-based.

Sources