Stripe Elements: Pre-built UI components to help you create checkout flows
stripe.com
stripe.com
Their work somehow manages to be the right combination of cutting-edge flashiness (think Apple product landing pages) and a very down to earth usability. I can't quite put my finger on it, but it's rare to see interfaces that don't compromise one or the other at least slightly.
If any of you are reading this - congratulations, you should be really proud.
I was just wondering how they made that.
I see a lot more of similar animations appearing on the internet.
Are there tools that people use to help with the animations?
The nav Menu buttons are hover elements, and clicking them closes the menu. So if your first instinct is to navigate to "Developers" by clicking it (and it probably is), you're rewarded with a brief view of the menu before it fades back away.
AWS has the same issue on their "My Account" button. ;_;
“I didn't have time to write a short letter, so I wrote a long one instead.”
― Mark Twain
Most companies can't even build their fucking landing pages without inconsistencies in design and content.
I believe a healthy obsession with detail reflects a company's overall attitude and pervades much deeper than visuals.
Thank you Stripe! <3
I love the attention to small details they're giving here. It's the kind that I absolutely admire but so rarely see. For example, in the section "Less code. Fewer edge cases." - a) the code "image" scrolls in the direction you scroll, and b) the code is actual code, made to look that way through use of a font (Flow-Circular). They could have went with a nonsense PNG with horizontal lines, but instead, they put actual code. They even went as far to leave this in the HTML just above that place:
<!-- This is a trimmed down real Stripe.js v2 basic integration. The full version would be much longer. -->
Hats off to them.
Very cool little detail, color me impressed!
You cant say the same for Yahoo / Oath, Google, Facebook, Amazon or Ebay.
I wish some could share how Apple design and what Apple uses in the Web Stack.
This is from Apple Special Event 2017
(Steve Jobs’ voice) "There’s lots of ways to be as a person. And some people express their deep appreciation in different ways. But one of the ways that I believe people express their appreciation to the rest of humanity is to make something wonderful and put it out. And you never — you never meet the people, you never shake their hands. You never hear their story or tell yours but somehow in the act of making something with a great deal of care and love, something is transmitted there. And it’s a way of expressing to the rest of our species our deep appreciation. So we need to be true to who we are and remember what’s really important to us. That’s what’s going to keep Apple, Apple, as if we keep us, us. "
The design of stripe is definitely a good example of this statement.
To the extent that devs are involved in vendor selection, I have to imagine that a large majority of them suggest Stripe to their CFOs or whoever ultimately decides.
I also love the story of their founders - https://www.bloomberg.com/news/features/2017-08-01/how-two-b...
I found https://chrome.google.com/webstore/detail/url-tracking-strip... but wasn't sure if someone might have found a superior extension.
You may prefer it to Ghostery, but it doesn't actually address GP's request, for query parameter stripping does it?
This part [2] removes the UTM parameters from the links in certain websites.
However, I stopped updating the extension when I switched to Safari some time ago.
I used to use this one [3] which was actually my inspiration to create my own project.
[1] https://github.com/cixtor/markasread
[2] https://github.com/cixtor/markasread/blob/08726ce/markasread...
Now if only we could get something similar for the Connect account stuff. So many different edge cases for countries and businesses, that the only reasonable approach is to autogenerate a form, and hope it makes sense.
Example: Japanese business need to put in their address in kana and kanji, both personal and business address. They also need to specify their gender (and are the only ones who have to do this). I believe they also need some form of personal and business IDs.
Form validation? Forgettaboutit!
Note: I realize these requirements are most likely not strictly determined by Stripe.
Here's hoping Elements expands to Connect accounts in the near future! :)
We're also working to improve the connected account flow. In the US, we recently launched Express Accounts to help with this, and we hope to bring it to Japan soon. https://stripe.com/docs/connect/express-accounts
> Now if only we could get something similar for the Connect account stuff. So many different edge cases for countries and businesses, that the only reasonable approach is to autogenerate a form, and hope it makes sense.
We're working on it! Express international support will ease most of the pain in this space (coming soon), and we have talked through ideas for how we can make Elements that handle things like international bank account and routing numbers. We also want to make it easy to migrate from Custom to Express, since you'll get i18n/L10n for free as it lands, and we'll handle things like requesting additional information from your users and showing the right (validated!) fields.
Keep up the good work!
https://news.ycombinator.com/item?id=15393684
> mugsie: Wow. that is (from my perspective - but only mine) terrible.
> supernintendo: This is the worst UX I've seen in a long time. Not only that, it's visually garish.
> chrissnell: That typeface is just dreadful.
Maybe I will check back in a few days to see if any of the same users commented on both threads!
Just thinking out load about possible issues that could cause this failure:
1) Extension blocking Stripe (as @Artemis2 mentioned below)
2) An older browser that's unable to execute Stripe JS (but uses a fake user agent that confuses us into thinking that a modern browser might be failing).
3) Unreliable internet client connection that is unable to load Stripe script intermittently.
Stripe elements is beautiful & flexible and the team is super helpful. We'd love to use it, but with the above problem, it's a bit scary to lose customers silently. For now, we are sticking with the Checkout flow.
We'd appreciate any tips on how to catch/fix an error like this ?
Stripe could/should offer a self-hosted version of the .js file for just this case, as a fallback to the official .js file; enabling basic payments, but with a notice that an addon is blocking the official stripe.js file and fraud protection is not enabled. Maybe even charge a slightly higher fee to the end-user? Probably not the right thing to do. Offer a fallback that survives external JS blockers.
<script src="https://js.stripe.com/v3/"></script>
<script>window.Stripe || document.write('<script src="https://js.stripe.com/v3/"><\/script>')</script>
<script>window.Stripe || document.write('<script src="https://js.stripe.com/v3/"><\/script>')</script>Stripe's server log might record/report failures in loading scripts. Perhaps someone from Stripe can chime in on the issue.
As an aside we also saw similar errors loading jQuery from a CDN and so used similar code to load it from our own server if it wasn't loaded from the CDN first. You cant do that with Stripe though.
As a customer, when ordering something from a shop I prefer to send my CC details to stripe.com instead of the vendor. With an iframe i usually cannot tell that this is the case.
I don't want to input my credit card info in whatever site, I'd rather do it in paypal.com.
Of course the customer don't know that, but as a developer I'm very happy not to handle any CC details in my server/app :)
- [0] https://github.com/rwieruch/react-express-stripe
- [1] https://www.robinwieruch.de/react-express-stripe-payment/
Please Stripe, figure out how to integrate with Paypal. And my company is yours again.
PayPal is a good option in these cases as it means you don’t need to give you card details directly to the merchant. Although in reality this doesn’t happen due to PCI if something like Stripe is done properly, you are still typing in your details on a website you don’t 100% trust, so there is a mental barrier. I wonder if Stripe have considered having a ‘Stripe Account’ for consumers where you can link your cards/payment methods so they can have a checkout process like PayPal...
* as soon email is entered, Stripe sends a code to phone as means of validating the user
Out of thousands of transactions (video courses for developers), about 40% of them are done with Paypal and most of my audience is North America.
Now, I do give the option to use either a CC or Paypal and I'm sure a lot of those 40% would use a CC if Paypal wasn't an option, but it does show a ton of people want to use Paypal.
Can I get that BIN list from somewhere so I can use this even if I'm not submitting to stripe?
I forget the details, but I'm pretty sure it's the former, so it's not exactly easy -- which is yet another testament to how much work goes on behind such a seemingly simple new product.
It's not uncommon for these to be unusable online because the form expects me to have a US address/numeric zip code.
I know I'm an edge case, but it's surprising how often sites over-validate form data and exclude all sorts of things like telephone country codes, non-US states, shorter zips etc.
(I work at Stripe)
That said, their React stripe elements library helped me use these in a project recently.
You can see a few examples of Elements using custom validation and fonts here: https://stripe.com/elements/examples
https://www.html5rocks.com/en/tutorials/forms/requestautocom...
I think this API ended up being deprecated from lack of use (not surprising as no one used it and is amazed it existed), but it may have paved the way for https://developer.mozilla.org/en-US/docs/Web/API/Payment_Req....
Genuinely surprised that this didn't catch on, it was amazing.
RequestAutocomplete had some weird quirks that made adoption slow and full of friction. You're right to say that PaymentRequest is a fixed RequestAutocomplete in most regards, and it's amazing (I'm biased though, I'm one of the people implementing it on desktop Chrome :) ). It's being implemented by all major browsers too!
I trust/hope they compensate their workers just as well too.
Keep it up!
Not really sure if I place that blame on Stripe though...React makes interop with non-react SDKs needlessly difficult.
Stripe is addressing a component of e-commerce checkout UI with which they're most familiar. They aren't attempting to cover every single base.
It started out with outstanding software support for the most popular platforms but now it doesn't.
Develop an application in ReactJs? Stripe hand wave: ahh go build your own solution or use some third party thing somewhere over there in "the community, sure you can trust it".....whatever, we're busy, and ReactJs, hmmm haven't heard of that.