Shopping and Checkout

Owned by Pawel Mastalerz
Last updated: Mar 13, 2024
11 min read

Table of Contents

UX

Latest

https://overflow.io/s/TVDA0MIM/

Sketch

Free Address and USDC Price Computation

Visual

Functionality

Visual

Functionality

Free FIO Address

  • Every account is entitled to 1 (make this nev var) FIO Address registration for free.

  • If user is not logged, show 1 FIO Address free. If they log-in and already have free address, an error will be presented.

  • Free address count should be tracked server-side

USDC Price Computation

  • USDC equivalent prices are computed as follows:

    • run get_fee for register_fio_domain and/or register_fio_address

    • convert fee using rate of exchange (ROE) feed (same as used by Reg site)

  • The ROE should be updated only every 30 minutes and stored in session to avoid constant variations in price

  • Show USDC price with 2 decimal precision, e.g. 1.23 USDC

FIO Price Display

  • Show FIO price with 2 decimal precision, e.g. 1.23 FIO

Shopping

Product items and descriptors

Action

Cart item

Descriptor

Example

Action

Cart item

Descriptor

Example

FCH Registration (Free or Paid)

FCH

FIO Crypto Handle Registration

bob@hodl

FIO Crypto Handle Registration

Domain Registration

Domain

FIO Domain Registration - 1 year

FIO Domain Registration - X years

amazon

FIO Domain Registration - 3 years

FCH and Domain Registration

FCH

FIO Crypto Handle and Domain Registration - 1 year

FIO Crypto Handle and Domain Registration - X years

bob@hodl

FIO Crypto Handle and Domain Registration - 1 year

Domain Renewal

Domain

FIO Domain Renewal - 1 year

FIO Domain Renewal - X years

amazon

FIO Domain Renewal - 1 year

Add Bundles

FCH

Add Bundled Transactions

bob@hodl

Add 100 Bundled Transactions

Shopping Selection

View

Requirements

View

Requirements

FIO Crypto Handle Selection

Populated

User has domains state

 

Empty state

Error state

Nothing available state

Loader state

  • Collect

    • Username

      • X appears when first character is entered

        • When clicked it clears the content and disappears

  • Validate

    • Username

      • Convert onfocusout

        • Convert to lowercase

      • Validate onfocusout

        • On validation error

          • Display error message

      • Validation rules

  • Compile Master List of available FCHs as follows

    • My Domain FCH (if user owns FIO Domains)

      • Prepend entered username to domains owned by user (alphabetically), example: george@mycustomdomain

        • Stop once 3 available FCHs are found

    • Free (if user eligible - otherwise treat these domains as Premium)

    • Premium - FCHs on Premium domains are always paid, even if user qualifies for free FCH

      • Prepend entered username to Premium Domain starting with highest rank as defined in Defaults - Dashboard Domains - Premium (for Dashboard direct) Partner Profile (for Partners), example: george@safu

        • Stop once 5 available FCHs are found or when no more premium domains exist

    • Username as Custom Domain - FCH + domains being registered in the same transaction

      • Append entered username to Usernames on Custom Domains only for one the highest rank Username as defined in Defaults - Usernames on Custom Domains,

        • Example

          • Usernames on Custom Domains

            • chief

            • hodl

            • defi

          • User entered string: georgew

          • Recommended FCH: chief@georgew

    • Username on Available Domains - FCHs + domains being registered in the same transaction

      • Prepend entered username to domains Available Domains starting with highest rank domain as defined in Defaults - Available Domains owned by user (alphabetically), example: george@someavailabledomain

        • Stop once 5 available FCHs are found

  • Display

    • My Domain FCH

      • Disable for domains which have expired and show warning

      • Show 3

        • If does not exist:

          • Do not display tile

      • Always display view more if user has at least 1 domain

    • Suggested FCH

      • Free (if user eligible)

        • Highest rank Free FCH from Master List above

          • If does not exist:

        • Highest rank Premium FCH from Master List above

          • If doesn’t exist

        • Highest rank Custom FCH from Master List above

          • If doesn’t exist

        • Display Nothing Available State

      • Premium - FCHs on Premium domains are always paid, even if user qualifies for free FCH

        • Highest rank Premium FCH (not already displayed in Suggested) from Master List above

          • If does not exist:

        • Highest rank Custom FCH from Master List above

          • If doesn’t exist

        • Hide Tile

      • Custom - Custom FCHs are FCHs + on domains being registered in the same transaction

        • Highest rank Custom FCH (not already displayed in Suggested) from Master List above

          • If doesn’t exist

        • Hide Tile

    • Additional FCH

      • Show all FCHs from master List not yet shown in Suggested

      • Sort by

        • Rank

        • Type: Free, Premium, Custom

      • Show max 25 items

      • If list empty

        • Hide Additional FIO Crypto Handles section

    • Item price - see Free FIO Address and USDC Price Computation

    • Links

      • Add to Cart link

        • On click

          • Add FCH to cart

          • Replace Add to Cart with Added

FCH Label Pop-up

  • Display copy

    • Free FCH

      • Title: Free FIO Crypto Handle

      • Body: Please enjoy this free FIO Crypto Handle for life. Limit: one free handle per user.

    • Premium FCH

      • Title: Premium FIO Crypto Handle

      • Body: Premium FIO Crypto Handles are on hand-picked FIO Domains (@domain), which are reserved for users who want to stand out from the crowd.

    • Custom FCH

      • Title: Custom FIO Crypto Handle

      • Body: When you register a Custom FIO Crypto Handle you also get your own FIO Domain (@domain). By default this domain is private, meaning only you can create new handles on it.

    • My Domain

      • Title: My Domain

      • Body: You already own the FIO Domain, now get a FIO Crypto Handle on it.

FIO Crypto Handle on custom domain

Default state

Domain available state

Domain is public and FCH available state

Error state

When accessed from Domain List Page

 

  • Variants

    • Accessed from FIO Crypto Handle Selection Page

    • Accessed from Domain List Page

      • Custom Ending is a pull-down menu of User Domains with domain which was clicked highlighted and Add Custom Ending menu item, which when clicks reverts to Accessed from FIO Crypto Handle Selection Page variant

  • Collect

    • Username

      • X appears when first character is entered

        • When clicked it clears the content and disappears

      • When accessed from FIO Crypto Handle Selection Page, pre-populate with username

  • Validate

  • Display

 

get_table_rows example
{ "code": "fio.address", "scope": "fio.address", "table": "domains", "lower_bound": "0x58725d9194db3d26c4a1ba4b3e27e0ed", "upper_bound": "0x58725d9194db3d26c4a1ba4b3e27e0ed", "key_type": "i128", "index_position": "4", "json": true }

FIO Domain Selection

Default state

Not available state

Invalid domain state

 

  • Collect

    • Domain

  • Validate

    • Domain

      • Convert onfocusout

        • Convert to lowercase

      • Validate onfocusout

        • On validation error

          • Display error message

      • Validation rules

  • Display

    • Suggested FIO Domains

      • Display direct match

    • Additional FIO Domains

      • Append Defaults - Search Prefix to the searched domain and display if available (max 5)

        • If domain starts with prefix, do not apply that prefix

      • Append Defaults - Search Postfix to the searched domain and display if available (max 5)

        • If domain ends with postfix, do not apply that postfix

      • Sort by Rank

      • Example:

        • Domain entered: pizza

        • List of prefixes:

          • crypto

          • chain

        • List of post fixes

          • 1

          • hodl

        • Additional Domains

          • cryptopizza

          • chainpizza

          • pizza1

          • pizzahodl

    • FIO Domain item and descriptor

    • Price - see Free FIO Address and USDC Price Computation

    • Add to Cart link - display when FIO Domain is available

      • On click

        • Add FIO Domain to cart

        • Replace Add to Cart with Added

Multi-year domains

  • When a domain registration is searched display

    • Domain discount banner. Banner persists as long as domain appears.

    • The domain years selector:

      • 1 year (default)

      • 2 years

      • 3 years

    • On select

      • Update price

Checkout

Cart

View

Requirements

View

Requirements

Template

 

 

 

Multi-year domain

  • For Domain Registrations and Renewals display years selector. See Multi-year Domains

Watchlist Domains

WatchlistDomaisn-20240214-202313.png

 

  • For domain renewals for watchlist domains (not owned by user) show notice for every such item:

    • “It looks like you are attempting to renew a domain that you do not own.
      Renewing this domain will not transfer ownership and funds can not be refunded.”

Purchase Page

View

Requirements

View

Requirements

Pay with FIO

Pay with Stripe

Free

 

  • Same as Pay with FIO except all wallets displayed

Pay with Bitypay

  • Same as above versions except:

    • Button

      • On click

        • Trigger Bitpay Modal Invoice

        • On Paid status redirect to Purchase Confirmation

Purchase Confirmation

View

Requirements

View

Requirements

Template

 

  • Display

    • Title

      • The title updates automatically based on order status, except

        • Success - Purchased

        • Partial Success - Partial Purchased

    • Transaction Details

    • Payment Details

      • Total cost

        • Sum of all items' cost in cart

          • For free state FREE

      • Paid with

        • Free: Do not display

        • FIO: Display the wallet from which the FIO was withdrawn

        • Stripe: Credit card type and last 4 of credit card number, e.g. “Visa ending in 1234”

        • Bitpay: Bitpay

      • Order Number

        • Display alphanumeric order number

  • Action

    • Close or X

      • When clicked display Authenticated Home Page

Pending

  • Add rotating circle and Confirmation in Progress blue box notice

    • Confirmation in Progress - Your transaction is currently being confirmed. You do not need to remain on this screen and may close it without disrupting your purchase.

Partial Success

  • Separate confirmed and not confirmed items and show Incomplete Purchase red box error.

    • Stripe - FIO Tokens for failing items not transferred to user

      • Incomplete Purchase - There was an error during purchase of some items. As a result we have refunded $XX.XX back to your credit card. Go to your cart to try purchase again.

    • Stripe - FIO Tokens for failing items transferred to user

      • Incomplete Purchase - There was an error during purchase of some items. As a result we have credited 100 FIO Tokens ($5.00) to your wallet. Go to your cart to try purchase using FIO Tokens instead.

    • FIO

      • Incomplete Purchase - There was an error during purchase of some items. No FIO Tokens were deducted from your wallet for the failed items. Go to your cart to try purchase again.

    • FREE

      • Incomplete Purchase - There was an error during purchase of some items. Click close and try again.

    • Bitpay

      • Incomplete Purchase - There was an error during purchase of some items. As a result we have credited 100 FIO Tokens ($5.00) to your wallet. Go to your cart to try purchase using FIO Tokens instead.

  • If items failing are belong to multiple categories (e.g. FREE item failed, but also item paid with Stripe) - show multiple boxes

Purchase Error

  • Add Purchase Error red box error

    • Stripe

      • Purchase Error - There was an error during purchase. As a result we have refunded the entire amount of order, $XX.XX back to your credit card. Click close and try purchase again.

    • FIO

      • Purchase Error - There was an error during purchase. No FIO Tokens were deducted from your wallet. Click close and try purchase again.

    • FREE

      • Purchase Error - There was an error during purchase. As a result we could not complete your purchase. Click close and try again.

    • Bitpay

      • Purchase Error - There was an error during purchase. As a result we have credited 100 FIO Tokens ($5.00) to your wallet. Go to your cart to try purchase using FIO Tokens instead.

Declined (Stripe)

  • Add Payment error red box error

    • Payment Error - The payment was not accepted and as a result the transaction was not processed.

Canceled

  • Add blue box notice

    • Canceled - Your transaction has been cancelled.

  • Change Paid with to “Not Paid”