Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 27 Next »

Table of Contents

UX

Updated Payments Flow

Includes:

  • Domain Paid Flow (FIO, Debit/Credit and Coinpayments)

  • Crypto Handle Flow (Free and Multi Purchase)

https://overflow.io/s/EYVLXRBB

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

Mobile special handling

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

Original Paid Flow For Reference

These flows represent the original flow and are for reference as needed. The new flows above will supersede these based on the addition of the new payment methods.

https://overflow.io/s/Z6B8A8VT

Cart

Product items and descriptors

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

View

Requirements

Free Cart

No Payment Required

These paths already exists and can persist now for single free crypto handle transactions.

  • Search View

    • Display

      • Single FIO Crypto Handle in Cart

      • Checkout CTA

        • In the case where the user is registering a single free crypto handle, the user will bypass the secondary cart view and proceed directly to the make purchase view with no form of needed payment to complete their transaction.

  • Cart View

    • Display

      • Single FIO Crypto Handle in Cart

      • Complete Transaction CTA

        • In the event that the user closes the purchase view and only a single free handle is in the cart, the user is shown the cart view with with the complete transaction CTA with directs the user the the make purchase view with no form of needed payment to complete their transaction.

Paid Cart

Pay with FIO Cart

Pay with non-FIO Cart

Price Change

  • Display

    • FIO Addresses and FIO Domains in cart

    • Total cost

      • Sum of all FIO Addresses

    • Price change warning

      • Display if price has changed from previous page

    • Search for more FIO Addresses

      • On click

        • Display FIO Address Selection Page

    • Pay with FIO Cart - show if user has 1 or more FIO Wallets with enough funds to pay for entire cart show

      • Pay with FIO link

        • On click display FIO Payment Page

      • Other Pay Options

        • On click display Payment Options

    • Pay with non-FIO - show if user does not have enough FIO in any wallet to pay for cart

      • Pay with FIO Credit Card

        • On click display Pay with Credit Card Page

      • Pay with CoinPayments

        • On click redirect to CoinPayments

Payment Options

  • Display

    • Pay with FIO Credit Card

      • On click display Pay with Credit Card Page

    • Pay with CoinPayments

      • On click clear cart and redirect to CoinPayments

Pay with FIO

View

Requirements

Purchase Page

  • Collect

    • FIO Wallet name - only show if user has more than 1 FIO Wallet irrespective of balance

  • Display

    • FIO Addresses and FIO Domains in cart

    • Total cost

      • Sum of all items' cost in cart

    • FIO Wallet balance

      • FIO as obtained from /get_fio_balance

      • USDC calculated: FIO balance * Total USDC / Total FIO

      • If wallet balance is less than purchase amount due, display Cart page with Low Balance banner

    • Purchase Now button

      • On click

        • Run /get_fee

          • If prices have changed, display Cart page with updated pricing and Pricing update! banner.

        • Check user’s FIO balance

          • If wallet balance is less than purchase amount due, display Cart page with Low Balance banner

        • Collect

          • PIN code

        • Display Transaction Processing Page

        • Register Register FIO Address and FIO Domains

        • Display Registration Confirmation Page

Pay with Stripe

View

Requirements

Pay with card

Execute Purchase

See Purchase

Purchase Confirmation

View

Requirements

Template

  • Display

    • Title

      • The title updates automatically based on order status, except

        • Success - Purchased

        • Partial Success - Partial Purchased

    • Transaction Details

      • Product

        • Show product

          • cryptohandle@domainname

        • Show product type

          • Domain Registration

          • Domain Renewal

          • Crypto Handle Registration

          • Crypto Handle Renewal

          • Add Bundles

          • Crypto Handle and Domain Registration

        • Show cost

      • TX ID (if available, otherwise do not show row)

        • Show FIO Chain ID with link to explorer which opens a new tab

        • If multiple TX IDs exist list one underneath the other

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

  • No labels