Usability/Web: Set expectations for payment process

[Stone-Hedge]

Description of Issue

At the moment, a user might miss that this window is waiting for a metamask payment. In addition, the window remains open with the "pay" animation until the payment transaction is confirmed. If gas/fee is set too low, this might be minutes or even hours. If users don't know this, they might do what I did and repeatedly click "pay button" and "confirm" button in metamask and end up paying multiple times. I ended up paying 5 times before I realised how it is supposed to work.

Suggested Solution

Add text to inform that metamask will open and that access to the report will be provided after payment sent and transaction confirmed and that the waiting time will vary according to network congestion and selected gas amount. Also consider clarifying if a user can close the window while they wait or not, and if so provide the URL for the report they can use to access if they do close their browser window.

[QAEngineercob]

I faced a similar snag and it resulted in me paying 3 times over for the report as I pressed the pay button a few times due to mistakenly thinking the initial transaction had not gone through.

[Stone-Hedge]

Proposed solution.

Summary:

Create an extra popup that sets expectations on how the purchase process works.

Detail:

1. Replace "pay" button on disclaimer with button that says "i agree".
2. When "i agree" button is clicked, it opens a new popup that is structured as follows:

Title: Payment Instructions
Text: When you click "pay", Metamask will open and you will be asked to confirm a single transaction for $xxx. Once the payment is made, BTC Range Report will be provided to you once the transaction has confirmed on the blockchain. This will usually take seconds but if you paid using a low gas fee, this might take longer. If you would like to close this page while you wait for the transaction to confirm, you may access BTC Range Report by clicking on this link once the transaction has confirmed.
Button 1 Text: "Pay"
Button 1 Behaviour: Disabled once clicked
Button 2 Text: "Close"
Button 2 Action: redirect to BTC Range Report URL with message saying to refresh once the blockchain transaction has confirmed.