3

On our e-commerce website, we've decided to support the payment request API for apple/google pay as an option for quick checkout.

What is the best button text/design to make people understand what it is?

Our current solution looks as shown below(the default button by stripe in chrome):

pay now and enter your details buttons in the checkout

Then when user clicks it, user can choose the payment options using the native form:

enter image description here

We have been getting calls from customers who are frustrated and confused. Our analysis and belief is that they've clicked the "pay now" button not understanding what it means, and then getting confused by the browser's native form.

So I somehow want people who understands what it is to click it, (as it gives a very fast purchase experience) while funnelling people who don't know what it is into the classic fill in your details flow.

Does anyone have any experience on how to show the users what the payment request API is and how it works to customers, and if so what is your advice?

Improve this question
3
  • Why are your users getting frustrated and confused? This is worth digging into. If I had to guess, it is because the change from browser to native forms usually is associated with apps requesting access to your data so users get alerted when seeing this.
    – Nash
    Jun 8, 2020 at 13:02
  • It is odd! Not sure why they get so frustrated. These things unfortunetly come in though our customer service team so it's hard to get any precice information..
    – rutchkiwi
    Jun 8, 2020 at 16:21
  • My guess is that people want to "pay now" and see a very prominent "Pay now" button. Also think about what they experience when that happens: If it isn't already frustrating enough that they clicked a button that doesn't do what they expected, how frustrating would it be when they can't find a way back easily?
    – jazZRo
    Jun 9, 2020 at 15:14

3 Answers 3

Reset to default
1

I would offer the user radio buttons with hint text below each label - something like:

Choose payment option
( ) Pay by card
    Enter your card details in manually
( ) Pay using saved details (faster)
    Use details saved by your browser

[Continue]

I would spend a lot of time working on the exact words for these option and hint text.

I’ve not used the API before – can you detect whether the user has stored their card in this way?

If you can, then offer the option only when they have.

Improve this answer
2
  • 1
    You can detect if they have their details saved, and it only shows when they exist. Which is why it's odd that people still find it so confusing! I like this approach, which I definitly hadn't thought of. Do you think that the people who are having trouble (older and non tech savvy) will understand what a "browser" is though?
    – rutchkiwi
    Jun 8, 2020 at 16:34
  • I’m not sure they would. I would spend a lot of time honing the words for the radio button. They need to be very clear.
    – Adam Silver
    Jun 8, 2020 at 17:08
0

If a significant proportion of your users doesn't have a saved payment method it seems that the advantages of the express checkout aren't worth the confusion. It's a new thing, so adoption is probably low.

That said, you could try switching the positions of express and manual. People just following the buttons in order until they get a confirmation will be fine and experienced users might look for the button or recognize it even at the edges of their screen. My guess is that your users just want to complete their purchase and think clicking pay now is the default, non-optional way of doing things.

A similar approach would be expanding the manual form instad of hiding it behind a button. Note that the demo on stripe.com is built like that. This way, users might recognize the manual checkout as such, simply by reading name and shipping address. Just make sure that you have a submit button below the form (where users will be after filling the manual form.)

Improve this answer
2
  • Hmm we used to have the manual form expanded by default but it turned out a very large portion of users didn't "see it" in this case and we thought we should push people to the fastest payment option. Maybe that was a mistake. Note that the "pay now" button is only visble when people have a saved option, but seems that people get confused anyway. I suspect it's because chrome auto-saves credit cards when you use them.
    – rutchkiwi
    Jun 8, 2020 at 16:25
  • Follow up: we ran an A/B test across 17.000 users of our checkout with expanding the manual flow by default, and it was clearly better to have it behind a button (auto expand had 0 to -10% convertion across the board)
    – rutchkiwi
    Jul 9, 2020 at 11:23
0

I suspect that because the Express Pay button is so dark and visually strong, users are skipping over the helper text that says "Express checkout" and thinking it's the checkout button ("Enter your details" doesn't sound like a way to check out).

Meanwhile, if you want users to start adopting Express Pay and have that become the way that most of them check out, you might want to leave it strong (and above the standard checkout).

So I would test something like this - gives a little more information on what each button does without having to read the help text:

Express Pay and Standard Check Out buttons

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.