Shopping and Checkout

Table of Contents

UX

Current

https://overflow.io/s/EYVLXRBB

https://www.sketch.com/s/386ed687-c1e2-4d54-af2d-bf75e7937fae/a/v8la2a4

Old

https://overflow.io/s/G9WS0H80?node=52fd5316

https://overflow.io/s/Z6B8A8VT

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

amazon

FIO Domain Registration

FCH and Domain Registration

FCH

FIO Crypto Handle and Domain Registration

bob@hodl

FIO Crypto Handle and Domain Registration

Domain Renewal

Domain

FIO Domain Renewal

amazon

FIO Domain Renewal

Add Bundles

FCH

Add Bundled Transactions

bob@hodl

Add 100 Bundled Transactions

Shopping Selection

View

Requirements

View

Requirements

FIO Address Selection

 

  • Versions

    • Authenticated header

    • Non-authenticated header

  • Collect

    • Username

      • X appears when first character is entered

        • When licked it clears the content and disappears

    • Domain

      • Show domains owned by user in any FIO Wallet (sorted alphabetically)

      • Obtain the list from Registration Site API (sorted as returned)

      • Default to first domain in list

  • Validate

    • Username

      • Convert onfocusout

        • Convert to lowercase

      • Validate onfocusout

        • On validation error

          • Display error message:

            • Username only allows letters, numbers and dash

            • This FIO Address is already registered.

      • Validation rules

    • Domain

      • Convert onfocusout

        • Convert to lowercase

      • Validate onfocusout

        • On validation error

          • Display error message:

            • Unfortunately the domain name you have selected is not available. Please select an alternative.

      • Validation rules

  • Display

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

    • Domain pull-down

      • Add “Add Custom Domain” item at the end

        • On click

          • Display domain field as entry field

            • Show X - closes the entry field and display original pull-down

    • Search icon

      • On click display re-run validation

    • Available/error banner

      • Display when FIO Address is available

      • Display on validation error

    • FIO Address item and descriptor

    • Price - see Free FIO Address and USDC Price Computation

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

      • On click

        • Add FIO Address to cart

        • Replace Add to Cart with Added

        • Add X

          • On click remove FIO Address from cart and remove this section

      • If user searches for a new FIO Address this section disappears, even if FIO Address was added to cart.

    • Purchase Domain

      • On click

        • Display FIO Domain Selection Page

FIO Domain Selection

  • Versions

    • Authenticated header

    • Non-authenticated header

  • Collect

    • Domain

  • Validate

    • Domain

      • Convert onfocusout

        • Convert to lowercase

      • Validate onfocusout

        • On validation error

          • Display error message:

            • Unfortunately the domain name you have selected is not available. Please select an alternative.

      • Validation rules

  • Display

    • Search icon

      • On click display re-run validation

    • Available/error banner

      • Display when FIO Domain is available

      • Display on validation error

    • 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

        • Add X

          • On click remove FIO Domain from cart and remove this section

    • Register and Address

      • On click

        • Display FIO Address Selection Page

Mini-cart

 

  • Display

Checkout

Cart

View

Requirements

View

Requirements

Template

  • Display

    • Main Cart

    • Totals

    • Main Button - display when cart is not empty, hide when empty

      • If user has sufficient amount of FIO in at least one Wallet

        • Pay with FIO

      • If only item in cart is a Free FIO Address

        • Main button: Complete Transaction

      • If user does not have sufficient amount of FIO in at least one Wallet

        • Pay with Credit/Debit Card

      • On click

        • Display Purchase Page

        • If user not authenticated, display Create Account Page as overlay and all other registration steps as overlay.

    • Secondary link: Other Payment Options - show only if Pay with FIO Shown

      • On click

        • Display second button Pay with Credit/Debit Card

Purchase Page

View

Requirements

View

Requirements

Pay with FIO

Pay with Stripe

Free

 

  • Same as Pay with FIO except all wallets displayed

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”

      • 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.

  • 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.

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”