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

91–100 of 124 posts

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

#91

Post by tompi »

Tepix wrote: post #80

So, is there a way to use this without the iframe (by going to stripe.com and then back)? 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.

Actually, CC details never transit to the shop server. The CC inputs don't have a "name" attribute, so the browser doesn't add them in the request. Instead, the stripe javascript catches the submit, sends the CC details to stripe with ajax, and add an hidden input containing an authorization token the server can use.

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 :)

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

#92

Post by afloatboat »

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?

Most tools put out a lot of unnecessary code and often rely on JavaScript, so my guess would be that this is handwritten. The animation consists of three phases for each element, which they reordered using pixel value transforms. The background containers are fixed in place and the opacity is changed depending on stage 1/2/3. To ensure them not having to adjust any values for smaller devices, they scaled the parent element to fit the browser size. Time consuming, but the best way to get the performance you need.

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

#93

Post by torgard »

bastawhiz wrote: post #20
torgard wrote: post #9

Stripe Elements is really good. It has been an absolute help. 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 th…

Engineer on the Connect team here. > 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 Elem…

Thanks for the reply! Really looking forward to the development of this :)

Keep up the good work!

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

#94

Post by torgard »

crooked-v wrote: post #49
torgard wrote: post #12

Earlier quoted context omitted.

I don't believe so. You don't get the card info from the form, you only get the generated tokens. I could be wrong, but I believe that's how it works.

That's fundamentally a big part of the point: you never directly handle any payment info, which frees you from most of the tremendous liability and security concerns that come with directly handling payment info.

Indeed. And with the upcoming stricter EU laws on data handling, I think this is a big plus.

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

#95

Post by OJFord »

Tharkun wrote: post #76
senthilmpro wrote: post #28

Earlier quoted context omitted.

I prefer "Ghostery" which is more efficient in "Tracking" overall. try it out.

Aren't ghostery the ones who sell your personal info and allow advertisers to pay them to get on a whitelist? UBlock Origin is my recommendation.

> UBlock Origin is my recommendation.

You may prefer it to Ghostery, but it doesn't actually address GP's request, for query parameter stripping does it?

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

#96

Post by samwillis »

inertial wrote: post #87
samwillis wrote: post #79

Earlier quoted context omitted.

We used to experience this exactly with stripe.js V2, our conclusion was it was some sort of connection issue and using this code to include stripe.js on both the checkout page but also our basket helped to ensure it has been loaded by the browser before it was needed. It massively reduced the instances of the error. window.Stripe || document.write(' ') window.Stripe || document.write(' ')

That's quite interesting. Was the issue specific to any particular browser/platform/country combination ? Stripe's server log might record/report failures in loading scripts. Perhaps someone from Stripe can chime in on the issue.

I can't remember exactly what browsers were affected but I think it was fairly broad. Certainly, mobile browsers and maybe people on a VPN but it was mostly random from memory which is why we concluded it was just a temporary connection problem.

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.

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

#98

Post by voiper1 »

sah2ed wrote: post #77
voiper1 wrote: post #68

They automagically figure out what country the card is from so they can set the numeric/alphanumeric postal code. Can I get that BIN list from somewhere so I can use this even if I'm not submitting to stripe?

There's BIN list. https://binlist.net https://github.com/binlist/data

... it says the github repo "constitutes roughly 2 % of the data." So, not very much is open source?

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

#99

Post by Angostura »

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…

Not to mention the correct use of 'Less' and 'Fewer'. Well done copywriters.

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

#100

Post by jdhzzz »

mathattack wrote: post #54
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…

Sometimes simplicity doesn't seem revolutionary, but a beautiful attention to detail combined with customer empathy can yield dramatic results.

The converse of:

“I didn't have time to write a short letter, so I wrote a long one instead.”

― Mark Twain

Post reply on HN