Show what payments are accepted on user cards

[mattbk]

Trying to implement #1262.

• rough out logic for
  • individuals
  • teams
  • organizations
• add mouseover for icons (in particular, so people can see why no payment methods are available)
• make it pretty
• add to /donate pages
• add to profile pages
• write tests
• convince @Changaco

[mattbk]

Don't have a PayPal Glyphicon, so using PP for now. Need to adjust vertical alignment.

[Changaco]

Glyphicon doesn't have brand icons, we use Font Awesome for those (actually it's Fork Awesome, but the in the code it's fontawesome). However your attempt to show payment methods as icons cannot succeed, because the SEPA Direct Debit payment method doesn't have a logo.

[mattbk]

Thanks @Changaco for the tip.

If it's possible, one could submit a SEPA logo to Fork Awesome, right?

[mattbk]

Another question. I copied the code from https://github.com/liberapay/liberapay.com/blob/7b9db6d877c4d6c7602580b3e05f67c946275ef8/www/%25username/donate.spt to show icons based on payment_providers, but how do I see if someone accepts SEPA?

[mattbk]

[Changaco]

All users who have connected a valid Stripe account can receive SEPA direct debits, but only for donations in EUR.

[mattbk]

https://github.com/ForkAwesome/Fork-Awesome/blob/master/CONTRIBUTING.md

[Changaco]

The SEPA logo doesn't fit well into Fork Awesome, it's too wide.

[mattbk]

[mattbk]

I'd like to make it more immediately clear on /donate pages (e.g., https://liberapay.com/mattbk/donate) what payment options are available as well. Right now this is buried in the FAQ at the bottom of the page.

I would probably start with adding icons just above the "Next Step"/"Modify the donation" button, with the same title attributes.

[Changaco]

The addition to the profile boxes that you're proposing looks okay visually, but I'm not in favor of it.

1. It doesn't work for teams, because their boxes already have a third column showing the number of members (see https://liberapay.com/explore/teams/).
2. "Accepts" is imprecise and may be difficult to translate into other languages.
3. In general I don't think it's a good idea to show the available payment methods in profile boxes.

[Changaco]

The SEPA logo doesn't fit well into Fork Awesome, it's too wide.

The special "€" sign in the SEPA logo could be used as a sepa icon in Fork Awesome, but it would be a copyright violation.

[mattbk]

The special "€" sign in the SEPA logo could be used as a sepa icon in Fork Awesome, but it would be a copyright violation.

I think that would be very confusing, esp. for anyone who doesn't use EUR (like me).

The profile boxes expand for teams just like they do for individuals:

[mattbk]

"Accepts" is imprecise and may be difficult to translate into other languages.

I'm open to suggestions.

[mattbk]

Example on profile pages:

[mattbk]

I switched which side the logos are on for the previous buttons, but here is the /donate page as well.

[mattbk]

Tests are next.

[Changaco]

To unblock this PR I suggest using the bank icon to represent direct debits, and adding an appropriate tooltip covering all the icons (let's reuse the paragraph about payment methods displayed in the /%username/donate page).

I'm still not enthusiastic about displaying payment information in the Explore pages, I think it's trying to fit too much information in a small area and before the visitor has even shown any interest in actually donating. However it would be useful and appropriate to include the payment method icons in the /%username/giving page. Paradoxically that's the one page that this PR currently doesn't modify.

Don't worry about tests, this branch doesn't need any.

[mattbk]

Thanks @Changaco! I'll hop on those changes.

The reason I included Explore was to stop people from getting too far before being turned back--but we can try it without that and see if confusion persists.

[mattbk]

Running into an issue where title tags are only showing the first word in a string.

[mattbk]

I got the logos to show up on /giving but not the tooltip yet.

[mattbk]

Titles work:

[Changaco]

Rebased on master and cleaned up.

I've moved the payment icons out of buttons, because it looks better to me that way and because it allows mobile users to tap on the icons to see the tooltip without risking to trigger the button.

[Changaco]

[Changaco]

[Changaco]

[mattbk]

Nice. I have much to learn.

[mattbk]

I like the change to "Pledge" on people who don't have a payment method set up (see #1438), but do we need more explanation there of what that means?

Then on /donate *clicking through "Pledge"), is says "Donate" again with no explanation except for the buried "not ready to receive payments" paragraph below.

[Changaco]

[mattbk]

I like it. No additional changes on my end.

[trebmuh]

Can the "Wrong currency? Alice accepts 32 others:...". and the following be removed in case of a pledge?

The reasoning behind that is that it's probably confusing for a lambda user. This because, if Alice didn't configured any payment method, then how come can she accepts 32 other currencies?

[Changaco]

@trebmuh It might be a little confusing to some donors but I don't want to remove it. Most users only accept one currency, of course the switcher isn't displayed in that case.

@mattbk I've squashed your commits into a single one to keep the Git history "clean".

[trebmuh]

@trebmuh It might be a little confusing to some donors but I don't want to remove it. Most users only accept one currency, of course the switcher isn't displayed in that case.

Ah ok, I thought that the currency switcher was still displayed in case of a user without any means of payment. All good then!