Page MenuHomePhabricator

Create new error page for payment cancel, restyle Ingencio hosted cancel button
Closed, ResolvedPublic2 Estimated Story Points

Description

Definition of done:
Making the cancel border less obvious and make the text red
Create new error message per mockup below in comments

Original body (old information)
When in the Checkout page of the donation flow, after you select the Credit Card type and the iframe loads, user testing sessions show that people click the CANCEL button at the bottom of the iframe expecting the interface to allow them to change card types, however, they are redirected to an error page, cancelling their donation.

Is this expected behavior?

Current behavior: Redirect donors to an error page and cancel their donation.
Suggested behavior: Nothing. Remove the CANCEL button altogether.

Thank you!

image.png (574×2 px, 220 KB)

Event Timeline

Once the iframe has loaded, the user can still choose another card type. We have a cancel button so that the user can have the feeling of ending the donation process with clear feedback that nothing has been charged to their card. I think @MBeat33 and donor services would get concerned emails if this wasn't available. This might need A/B testing and I'd want to hear from advancement leads if this is worth prioritizing.

Thank you for the prompt response @DStrine!

I see your point about giving the user a way to cancel the donation at this point in the process and you're right. I believe I wasn't specific enough, sorry about that. What I meant was to remove the CANCEL button from the context of the card.

I'm attaching a mockup that doesn't require any logic change and will make it clear for the user what will happen if they choose to click there, while at the same time echoing the same message in the next page. After all, it's not an error if they cancel, as the current page mentions. This would reduce errors in the user's end.

Let me know your thoughts, thanks!

image.png (1×2 px, 432 KB)

@spatton @jrobell @Ppena Do we just want to do this across the board or does anyone want to A/B this? The latter will take more work.

How much more work will it take to set up for an a/b test vs. directly implementing, @DStrine?

The hosted payment form editor didn't let us remove the button when we were first setting it up, so we had hidden it by setting it to white on white. It was still clickable though, so people were hitting it by mistake.

@spatton I didn't know that we already got bad feedback on this. If we try to make the button blend into the background, I think we'll still have this problem. We could try this again but DS and @MBeat33 would need to be very attentive during the test. Do you still want to proceed?

That 'successfully canceled' error message mockup looks like it should be do-able with a bit of development.

Thanks @Ejegg and @DStrine, I agree that if we can't completely remove the cancel link from the form, we shouldn't try to hide it thru style changes.

Nice to know re: @scervantes's 'successfully canceled' error message mockup + Cancel link color change, Ejegg: I'd be happy with that solution.

DStrine renamed this task from Clicking "Cancel" inside the credit card iframe pushes donors out of the payment page to restyle ingencio cancel button.Jul 24 2019, 3:24 AM
DStrine moved this task from Next to Sprint +1 on the Fundraising-Backlog board.
Ejegg renamed this task from restyle ingencio cancel button to Create new error page for payment cancel, restyle Ingencio hosted cancel button.Aug 21 2019, 2:52 AM
Ejegg triaged this task as Medium priority.
Ejegg removed Ejegg as the assignee of this task.
Ejegg claimed this task.
Ejegg moved this task from Backlog to Doing on the Fundraising Sprint Quick and the Deadlocked board.
Ejegg set the point value for this task to 2.
Ejegg removed the point value for this task.
Ejegg set the point value for this task to 2.

Change 532395 had a related patch set uploaded (by Ejegg; owner: Ejegg):
[mediawiki/extensions/DonationInterface@master] WIP cancel text for error form

https://gerrit.wikimedia.org/r/532395

Note to reviewers: I left the border around the cancel button visible so as not to lead mobile donors to use the area as a resting zone for their fingers (we heard this was happening with the hidden button before).

Change 532395 merged by jenkins-bot:
[mediawiki/extensions/DonationInterface@master] Cancel text for error form

https://gerrit.wikimedia.org/r/532395