22 ms·
Stripe Elements: Pre-built UI components to help you create checkout flows
- amelius 9y agoBuilding smart checkout flows ... but that would include things like showing overviews of a shopping cart, allowing the user to make changes, and handling of physical products by the postal service, and I don't see that covered here.
- kylehotchkiss 9y agoThat's more of a Shopify thing. Stripe is an API for processing payments, and you can build what you'd like on top.
- ovao 9y ago"Stripe Elements are rich, pre-built UI components that help you create your own pixel-perfect checkout flows." 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.
- kylehotchkiss 9y agoI miss the JS tokenizer on plain text fields. It's hard to match validation and font styles in iframe fields. That said, their React stripe elements library helped me use these in a project recently.
- memco 9y agoI am sad that this has been phased out. I have recently been working on a Square backed project, which uses this same iframe approach, but you cannot customize the fields or do any kind of validation: you just get the textboxes they give you with no way to add in things like specialized input types for numbers to help on mobile. To Stripe's credit, they at least go through the trouble of adding more intelligent validation & input handling. Will give this a closer look and may replace the Square version.
- pbarnes_1 9y agoFYI, v2 of the Stripe.js API isn't being deprecated last time I checked with them.
- mglukhovsky 9y agoElements lets you define validation behavior and styles by listening to event handlers that emit errors[0], and you can specify custom web fonts with the `fonts` option[1]. You can see a few examples of Elements using custom validation and fonts here: https://stripe.com/elements/examples https://stripe.com/elements/examples [0]: https://stripe.com/docs/stripe.js#input-validation https://stripe.com/docs/stripe.js#input-validation [1]: https://stripe.com/docs/stripe.js#stripe-elements https://stripe.com/docs/stripe.js#stripe-elements
- jimnotgym 9y agoI am really pleased to see payment gateways finally offering something worth paying the fees for. With this, or Braintree's hosted i-frames we get easy PCI compliance (SAQ-A) and proper UX. No more pop ups! Well done Stripe. If it was a bit cheaper it would be a great service.
- MatekCopatek 9y agoStripe 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 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.
- pcurve 9y agoI agree. It's refreshing to see a company not jumping on the completely flat, mono-color bandwagon.
- sillysaurus3 9y agoIn the linked page on the right, is that a video? https://i.imgur.com/qloK4xE.png https://i.imgur.com/qloK4xE.png I was just wondering how they made that.
- athyuttamre 9y agoIt's all CSS animations!
- kumaraman 9y agoI 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?
- indexerror 9y agoIt can be done using Adobe After Effects and the Bodymovin plugin.
- mmanfrin 9y agoPlaying 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.
- dpatterson2008 9y agoBetter yet if you have Apple wallet set up on your phone, and visit: https://stripe.com/elements/examples https://stripe.com/elements/examples, you'll see that you have the option to to pay via Apple Pay. Which is powered by their Payment request element: https://stripe.com/docs/elements/payment-request-button https://stripe.com/docs/elements/payment-request-button
- tonyhb 9y agoIt'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/requestautocomplete/ 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_Request_API https://developer.mozilla.org/en-US/docs/Web/API/Payment_Req.... Genuinely surprised that this didn't catch on, it was amazing.
- anthonyvd 9y agoRequestAutocomplete 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!
- torgard 9y agoStripe 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 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! :)
- edwinwee 9y agoElements works with Connect! Any platform can integrate it. 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 https://stripe.com/docs/connect/express-accounts
- bastawhiz 9y agoEngineer 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 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.
- torgard 9y agoThanks for the reply! Really looking forward to the development of this :) Keep up the good work!
- 9y ago
- huangc10 9y agoCan this be used for just frontend and not integrate with Stripe's backend? ie. use the "elements" form and not create the token to transmit card information. Sort of like a beefier Card library by jessepollak (https://github.com/jessepollak/card https://github.com/jessepollak/card)
- torgard 9y agoI 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.
- crooked-v 9y agoThat'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.
- torgard 9y agoIndeed. And with the upcoming stricter EU laws on data handling, I think this is a big plus.
- Adam89 9y agoI think the css for the different forms can be found here: https://github.com/stripe/elements-examples https://github.com/stripe/elements-examples
- rwieruch 9y agoSetting up a little Express server that deals with the backend stuff is not too difficult. [0][1] Looking forward to update the article for using Stripe Elements. Great job Stripe team! - [0] https://github.com/rwieruch/react-express-stripe https://github.com/rwieruch/react-express-stripe - [1] https://www.robinwieruch.de/react-express-stripe-payment/ https://www.robinwieruch.de/react-express-stripe-payment/
- 9y ago
- kevincennis 9y agoStripe is really, really good at marketing to developers. I have to imagine it’s earned them a lot of business. 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.
- davedx 9y agoYep, that's what happened at our company. Developer experience matters.
- fiokoden 9y agoStripe has dropped its key advantage. 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.
- segphault 9y agoWait, what? The official React wrapper for Elements is on GitHub: https://github.com/stripe/react-stripe-elements https://github.com/stripe/react-stripe-elements
- ergo14 9y agoSo they have a solution that works for everyone and you are complaining its not just made for $INSERTYOURFRAMEWORK. Interesting point of view.
- cornstalks 9y agoHere's the same URL but without all the utm_* tracking garbage: https://stripe.com/elements https://stripe.com/elements
- toomuchtodo 9y agoOff topic: Is there a chrome extension that will strip these query parameters off automatically when a user clicks on links? I found https://chrome.google.com/webstore/detail/url-tracking-stripper/flnagcobkfofedknnnmofijmmkbgfamf?hl=en https://chrome.google.com/webstore/detail/url-tracking-strip... but wasn't sure if someone might have found a superior extension.
- senthilmpro 9y agoI prefer "Ghostery" which is more efficient in "Tracking" overall. try it out.
- deleted 9y ago[deleted]
- Tharkun 9y agoAren'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.
- OJFord 9y ago> 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?
- guessmyname 9y agoI created this [1] some time ago to manipulate links in the pages that I visit. 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 https://github.com/cixtor/markasread [2] https://github.com/cixtor/markasread/blob/08726ce/markasread.js#L23-L41 https://github.com/cixtor/markasread/blob/08726ce/markasread... [3] https://github.com/jparise/chrome-utm-stripper https://github.com/jparise/chrome-utm-stripper
- jasonlybbert 9y agowhy is this a tracking link.
- dltrn 9y agoso stripe can bucket the traffic that comes from this submission.
- jonny_eh 9y agoCan't they just look at the referrer?
- themacguffinman 9y agoIt lets them identify clicks specifically from the post link as opposed to links in the HN discussion thread.
- jonny_eh 9y agoCan't they see the path in the referrer URL? Wouldn't that differentiate which page on HN referred the visitor?
- dltrn 9y agohttps doesn't pass the referrer
- jamesmp98 9y agoNo PCI SAQ A-EP?
- shub 9y agoBut there is AGP CD-ROM CC0 QQZ, so, you know. There's that.
- Artemis2 9y agoNo, because PCI DSS considers using iframes to host card entry fields cannot impact "the security of the payment transaction": https://www.pcisecuritystandards.org/documents/Understanding_SAQs_PCI_DSS_v3.pdf https://www.pcisecuritystandards.org/documents/Understanding...
- saosebastiao 9y agoThere'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 really sure if I place that blame on Stripe though...React makes interop with non-react SDKs needlessly difficult.
- Rooster61 9y agoThat 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.
- pgeorgep 9y agoStripe in the pinnacle of what startups should aspire for. Their commitment to solving pains for smb's is what's propelled them to unicorn status. I also love the story of their founders - https://www.bloomberg.com/news/features/2017-08-01/how-two-brothers-turned-seven-lines-of-code-into-a-9-2-billion-startup https://www.bloomberg.com/news/features/2017-08-01/how-two-b...
- mooreds 9y agoI 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.
- guayosr 9y agoWorking on it! (I work at Stripe)
- ryanberg 9y agoThis is great news! Any rough estimates on when this will be available?
- mixmastamyk 9y agoSupport for what? Electronic banking?
- mooreds 9y agoSupport for capturing ACH data (account number, routing number, etc) with the 'Elements' UX toolkit.
- jorgeleo 9y agoStripe elements is awesome. The one thing I miss from stripe is help collecting sales tax across states.
- buf 9y agoI love Stripe and used them for 4 years, but unfortunately have to use Braintree now because of Paypal. Please Stripe, figure out how to integrate with Paypal. And my company is yours again.
- lucaspiller 9y agoFor those wondering ‘why PayPal?’ I run a SaaS product using Stripe, and a lot of people have asked if they can pay by PayPal. Although in the West it’s a no-brainer to enter credit card details and be done, in a lot of other countries people don’t feel so comfortable doing so. In some cases it’s actually very foreign, for example Amazon et al in India allow you to pay cash on delivery. 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...
- slobotron 9y agoYou can enable "Remember Me" when using stripe checkout [0], and you won't need to retype CC* on other sites that use checkout, but I don't think it's obvious to users that it's connected to Stripe and not the merchant's site... * as soon email is entered, Stripe sends a code to phone as means of validating the user [0] https://stripe.com/checkout https://stripe.com/checkout
- nickjj 9y agoPeople in the west still use Paypal a lot. 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.
- 9y ago
- pololee 9y agoCan't express enough how much I love stripe's design. It's so inspiring. After working in a SAAS company for 3 years, I learned how difficult it is to fight for a good design with engineers, PM and managers. Lots of them don't care or respect about design. 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.
- yesimahuman 9y agoI've used these vanilla and in a react app, all with great success. I really hope they build web component versions, would cut down a lot on the vanilla usage boilerplate.
- inertial 9y agoSlightly OT : With Stripe elements, we noticed an error in about 5% of the requests, something like "Stripe is not defined". Some of these errors were traced to older browsers with JS issues that couldn't execute "https://js.stripe.com/v3/" https://js.stripe.com/v3/". But some remain unexplained. Unfortunately, it's hard to debug a client side error unless a client reports it. 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 ?
- qwert12355 9y agoA client side error capture script like Sentry helps with debugging these sorts of errors. We have been using it successfully for some time now.
- inertial 9y agoWe 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.
- Cthulhu_ 9y agoI 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.
- Artemis2 9y agoIt 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 https://stripe.com/docs/stripe.js#including-stripejs.
- voiper1 9y agoThey 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?
- legojoey17 9y agoThat either takes a lot of time (and volume) to gather on card usage because it's not available as a list from Visa and co, or you require certain processing rights to access and can't share it due to confidentiality. 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.
- legojoey17 9y agoThat's speaking from experience though, I didn't mean to be dismissive of the request of the OP. If there happens to a group who collects this and is able to share this through legal loopholes, power be to them!
- sah2ed 9y agoThere's BIN list. https://binlist.net https://binlist.net https://github.com/binlist/data https://github.com/binlist/data
- hiharryhere 9y agoThis is actually quite annoying. I have some Chase cards from when I lived in the US that now have UK billing addresses and therefore alphanumeric postal codes. 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.
- Tepix 9y agoSo, 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.
- vim_wannabe 9y agoThis is why i love paypal. I don't want to input my credit card info in whatever site, I'd rather do it in paypal.com.
- Tepix 9y agoAgreed. That's why it's weird that on eBay nowadays they make it very hard to get paypal.com up in the address field of the browser. If you use the standard workflow it will be in an iframe and you will be none the wiser.
- tompi 9y agoActually, 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 :)
- chirau 9y agoStripe continues to impress me. UX/UI, product, documentation, website performance, API... all beautiful. I trust/hope they compensate their workers just as well too. Keep it up!
- bennypowers 9y agoI built a little Polymer wrapper for stripe elements </plug> unfortunately, it only works with the polyfill. It seems at first blush to be an issue between Stripe's react components and shadowDOM. https://github.com/bennypowers/stripe-elements/issues/2 https://github.com/bennypowers/stripe-elements/issues/2
- mrgill 9y agoDamn, Stripe's design is the best in the world, I get inspired just by looking at it. It's like the girl/boy of your dreams.
- j_s 9y agoInteresting 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 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!