Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Stripe Elements: Pre-built UI components to help you create checkout flows

stripe.com

Post reply on HN
Print view View original

111–120 of 124 posts

Re: Stripe Elements: Pre-built UI components to help you create checkout flows

#111

Post by mstade »

TeMPOraL wrote: post #88
MatekCopatek wrote: post #7

Stripe front end developers are a true inspiration. I know the linked project isn't anything revolutionary, but as someone with a decade of experience in the field, it's impressive to see such attention to detail. 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…

Oh God, yes! 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, t…

Wow, that's a pretty cool easter egg! I copied the "image" and pasted into Sublime, and there you go: actual code!

Very cool little detail, color me impressed!

Re: Stripe Elements: Pre-built UI components to help you create checkout flows

#112

Post by bpicolo »

austenallred wrote: post #38
MatekCopatek wrote: post #7

Stripe front end developers are a true inspiration. I know the linked project isn't anything revolutionary, but as someone with a decade of experience in the field, it's impressive to see such attention to detail. 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…

Every time I see a Stripe page I just stop and stare for a minute. They're always so, so well done.

Stripe is gorgeous, though they have one of my pet peeve UI issues on the front page:

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. ;_;

Re: Stripe Elements: Pre-built UI components to help you create checkout flows

#113

Post by anthonyvd »

tonyhb wrote: post #58
mmanfrin wrote: post #8

Playing around with some of these I clicked on one button and discovered that Chrome has a built in payment system -- the button opened up a dialog with all my saved information. Neat.

It's been there for around 4 years. It automatically generates a one-time card for the payment, too, so you never hand the merchant your card. 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_R…

RequestAutocomplete is indeed deprecated and Stripe is using PaymentRequest (which doesn't do anything fancy except pull your CC info from Chrome autofill for the record, so no one-time card for the payment).

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!

Re: Stripe Elements: Pre-built UI components to help you create checkout flows

#114

Post by khalilravanna »

mstade wrote: post #111
TeMPOraL wrote: post #88

Earlier quoted context omitted.

Oh God, yes! 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, t…

Wow, that's a pretty cool easter egg! I copied the "image" and pasted into Sublime, and there you go: actual code! Very cool little detail, color me impressed!

Yeah super cool! It's apparently just done by using a font called "Flow-Circular" that comes out looking like that.

Re: Stripe Elements: Pre-built UI components to help you create checkout flows

#115

Post by corford »

kumaraman wrote: post #42
athyuttamre wrote: post #32

Earlier quoted context omitted.

It's all CSS animations!

I am very curious to how exactly they made these animations! Surely they didn't hand type all of the transforms. I see a lot more of similar animations appearing on the internet. Are there tools that people use to help with the animations?

http://animista.net/ is quite handy for quickly putting something together.

Re: Stripe Elements: Pre-built UI components to help you create checkout flows

#116

Post by Cthulhu_ »

inertial wrote: post #72
Artemis2 wrote: post #65

Earlier quoted context omitted.

It could be because tracker-blocking plugins (I use Ghostery) have started blocking Stripe.js. This is because they are now recommending to include it on every page of your site for fraud protection, which is a use case of user tracking: https://stripe.com/docs/stripe.js#including-stripejs .

Thanks for the tip. It seems that ghostery's issue was fixed in August [1]. The latest version of ghostery does not block Stripe elements. Preventing an extension update isn't straight forward so we are left wondering if there's some other extension that's blocking Stripe. https://twitter.com/stripe/status/899812679447187456

I can imagine there's other similar addons that use the same list, but don't update it as frequently.

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.

Re: Stripe Elements: Pre-built UI components to help you create checkout flows

#117

Post by Cthulhu_ »

inertial wrote: post #70
qwert12355 wrote: post #59

Earlier quoted context omitted.

A client side error capture script like Sentry helps with debugging these sorts of errors. We have been using it successfully for some time now.

We are able to capture the error / stack with vanilla JS. Tried sentry too. Wondering how would it help in debugging. What we have is the error message and the user agent but unable to reproduce the same problem unless we no more about the extensions installed or if the user agent is fake.

I was wondering if it's possible for e.g. Sentry to list installed extensions, but that'd give websites another means to do fingerprinting, probably not a good idea for browser manufacturers to have implemented.

Re: Stripe Elements: Pre-built UI components to help you create checkout flows

#118

Post by j_s »

Interesting to see the contrast between the love for Stripe's design team vs. yesterday's Dropbox UI refresh discussion:

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!

Re: Stripe Elements: Pre-built UI components to help you create checkout flows

#119

Post by Rooster61 »

saosebastiao wrote: post #33

There's also an official stripe elements react component. I tried it recently, and it felt like completely overengineered garbage. It was convoluted, involved implementing 3 different components as separate layers of implementation, required the use of component context (a huge red flag IMO) and was completely unusable from typescript. Compared to other projects I've seen from stripe, it left a lot to be desired. Not…

That library is in beta. I agree it is convoluted, but it also isn't finished. It isn't nearly as polished as the elements themselves.

Re: Stripe Elements: Pre-built UI components to help you create checkout flows

#120

Post by ryanberg »

guayosr wrote: post #85
mooreds wrote: post #37

I upgraded our payment capture a week or so ago. It was easy to do (we don't have a complicated form) but I was bummed to find out that there is extremely limited support for ACH capture with elements.

Working on it! (I work at Stripe)

This is great news! Any rough estimates on when this will be available?
Post reply on HN