Checkout

Created by Pawel Mastalerz
Last updated: Aug 11, 2022 by George Worrell

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

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

Visual

Functionality

Visual

Functionality

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.

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

Visual

Functionality

Visual

Functionality

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

Visual

Functionality

Visual

Functionality

Pay with card

 

Execute Purchase

See https://fioprotocol.atlassian.net/wiki/spaces/DAO/pages/501153808

Pay with FIO Confirmation

Visual

Functionality

Visual

Functionality

Success

 

  • Display

    • FIO Addresses and FIO Domains purchased

    • Total cost

      • Sum of all items' cost in cart

    • Close or X

      • When clicked display Authenticated Home Page

Purchase Error

 

  • Displayed when all items in cart were not purchased due to errors.

  • Display

    • Close or X

      • Display Cart page with all failed items from purchase added back to cart

Partial Success

 

  • Displayed when some items in cart were not purchased due to errors.

  • Display

    • Items purchased

    • Items which had errors

  • Display

    • Try Again

      • the purchase of remaining items is retried and Purchase Interstitial is displayed.

    • X

      • Display Cart page with failed items from purchase added back to cart

  • Remaining items are left in Cart

Pay with CoinPayments/Stripe Confirmation

Visual

Functionality

Visual

Functionality

Success

  • Display

    • FIO Addresses and FIO Domains in cart

    • Total cost

      • Sum of all items' cost in cart

    • Paid with copy

      • Coinpayments

        • CoinPayments

      • Stripe

        • Credit/Debit Card

    • Transaction ID

      • Coinpayments

        • Transaction ID

      • Stripe

        • payment_intentm ID

    • Close or X

      • On click

        • Display Authenticated Home Page

In Progress

  • Display

    • Copy

      • Coinpayments

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

      • Stripe

        • Confirmation in Progress - Your credit/debit card payment is currently being confirmed. You do not need to remain on this screen and may close the view without disrupting your purchase.

    • FIO Addresses and FIO Domains in cart

    • Paid with copy

      • Coinpayments

        • CoinPayments

      • Stripe

        • Credit/Debit Card

    • Total cost

      • Sum of all items' cost in cart

    • Transaction ID

      • Coinpayments

        • Transaction ID

      • Stripe

        • payment_intentm ID

    • Close or X

      • On click

        • Display Orders Page

  • Continue monitoring status and if changes update page to new status

Cancelled

  • Display

    • Copy

      • Coinpayments

        • Canceled Payment - Your crypto payment has been cancelled.

      • Stripe

        • Canceled Payment - Your credit/debit card payment has been cancelled.

    • FIO Addresses and FIO Domains in cart

    • Total cost

      • Sum of all items' cost in cart

    • Paid with copy

      • Coinpayments

        • CoinPayments

      • Stripe

        • Credit/Debit Card

    • Transaction ID

      • Coinpayments

        • Transaction ID

      • Stripe

        • payment_intentm ID

    • Close or X

      • On click

        • Display Cart page with all items from purchase added back to cart

Purchase Error or Declined

  • Display

    • Copy

      • Coinpayments

        • Purchase Error - There was an error during registration. As a result we could not confirm the purchase, but we have credited your wallet with XXX.XX FIO Tokens. You can use these tokens to register FIO Crypto Handle or Domain.

      • Stripe

        • requires_payment_method

          • Credit/Debit Card not accepted - the credit card you have provided was not accepted by the issuing bank and therefore your transaction was not complete. Click close and try purchasing again with another form of payment.

        • Purchase error on FIO Chain for all items

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

    • FIO Addresses and FIO Domains in cart

    • Total cost

      • Sum of all items' cost in cart

    • Paid with copy

      • Not Paid

    • Transaction ID

      • Coinpayments

        • Transaction ID

      • Stripe

        • payment_intentm ID

    • Close or X

      • On click

        • Display Cart page with all items from purchase added back to cart

Partial Success

  • Display

    • FIO Addresses and FIO Domains in cart

    • Total cost

      • Sum of all items' cost in cart

    • Transaction ID

      • Coinpayments

        • Transaction ID

      • Stripe

        • payment_intentm ID

    • Close or X

      • On click

        • Display Cart page with failed items from purchase added back to cart

Additional Purchase Access Points - Credit Card

View

Requirements

View

Requirements

Renew Domain

 

Renew Now

  • Display

    • Return Arrow

      • Returns the user to the previous view

    • Title

      • Content

        • Domain Renewal

    • Informational Dialog

      • Content

        • Renewal Information - This renewal will add 1 additional year to your domain. 

    • Transaction Details

      • Content

        • Title

          • Transaction Details

        • Field

          • <domain> renewal

        • Cost

          • <Amount> USDC

          • <Amount> FIO

    • Payment Details

Add Bundles

 

Add Now

  • Display

    • Return Arrow

      • Returns the user to the previous view

    • Title

      • Content

        • Add Bundle Transactions

    • Informational Dialog

      • Content

        • Add Bundle Information - This renewal will add 100 bundle transactions to your FIO Crypto Handle.

    • Transaction Details

      • Content

        • Title

          • Transaction Details

        • Field

          • Add 100 Bundle Transactions

            • Added to <crypto handle>

        • Cost

          • <Amount> USDC

          • <Amount> FIO

    • Payment Details