
Stripe Elements: Pre-built UI components to help you create checkout flows - edwinwee
https://stripe.com/elements
======
MatekCopatek
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 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.

~~~
TeMPOraL
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, 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.

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

~~~
pc86
Stripe has some great copy writing for sure, but I don't think correct grammar
should be listed as one of the reasons why. :)

------
pololee
Can'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.

------
kevincennis
Stripe 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
Yep, that's what happened at our company. Developer experience matters.

------
pgeorgep
Stripe 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-b...](https://www.bloomberg.com/news/features/2017-08-01/how-two-brothers-
turned-seven-lines-of-code-into-a-9-2-billion-startup)

------
cornstalks
Here's the same URL but without all the utm_* tracking garbage:

[https://stripe.com/elements](https://stripe.com/elements)

~~~
toomuchtodo
Off 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-
strip...](https://chrome.google.com/webstore/detail/url-tracking-
stripper/flnagcobkfofedknnnmofijmmkbgfamf?hl=en) but wasn't sure if someone
might have found a superior extension.

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

~~~
Tharkun
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.

~~~
OJFord
> 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?

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

~~~
bastawhiz
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 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
Thanks for the reply! Really looking forward to the development of this :)

Keep up the good work!

------
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](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!

------
inertial
Slightly 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 ?

~~~
Artemis2
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](https://stripe.com/docs/stripe.js#including-stripejs).

~~~
inertial
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](https://twitter.com/stripe/status/899812679447187456)

~~~
Cthulhu_
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.

------
Tepix
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.

~~~
vim_wannabe
This 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
Agreed. 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.

------
huangc10
Can 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
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.

~~~
crooked-v
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.

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

------
yesimahuman
I'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.

------
buf
I 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
For 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...

~~~
nickjj
People 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.

~~~
tim333
For me I tend to use Paypal because I'm too lazy to type/paste in my card
number, address etc. Paypal is usually one or two clicks.

------
jimnotgym
I 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.

------
voiper1
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?

~~~
sah2ed
There's BIN list.

[https://binlist.net](https://binlist.net)

[https://github.com/binlist/data](https://github.com/binlist/data)

~~~
voiper1
Most bin lists haven't been very accurate or able to be scraped. Looks like
the tracker is pretty active. I'll have to check it out. Thanks!

------
bennypowers
I 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)

------
mooreds
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.

~~~
guayosr
Working on it!

(I work at Stripe)

~~~
ryanberg
This is great news! Any rough estimates on when this will be available?

------
kylehotchkiss
I 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.

~~~
mglukhovsky
Elements 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)

------
mmanfrin
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.

~~~
tonyhb
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...](https://www.html5rocks.com/en/tutorials/forms/requestautocomplete/)

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...](https://developer.mozilla.org/en-
US/docs/Web/API/Payment_Request_API).

Genuinely surprised that this didn't catch on, it was amazing.

~~~
anthonyvd
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!

------
chirau
Stripe 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!

------
jorgeleo
Stripe elements is awesome. The one thing I miss from stripe is help
collecting sales tax across states.

------
saosebastiao
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 really sure if I place that blame on Stripe though...React makes interop
with non-react SDKs needlessly difficult.

~~~
Rooster61
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.

------
mrgill
Damn, 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.

------
jamesmp98
No PCI SAQ A-EP?

~~~
Artemis2
No, 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...](https://www.pcisecuritystandards.org/documents/Understanding_SAQs_PCI_DSS_v3.pdf)

------
jasonlybbert
why is this a tracking link.

~~~
dltrn
so stripe can bucket the traffic that comes from this submission.

~~~
jonny_eh
Can't they just look at the referrer?

~~~
themacguffinman
It lets them identify clicks specifically from the post link as opposed to
links in the HN discussion thread.

~~~
jonny_eh
Can't they see the path in the referrer URL? Wouldn't that differentiate which
page on HN referred the visitor?

------
amelius
Building 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.

~~~
ovao
"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.

------
fiokoden
Stripe 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
Wait, what? The official React wrapper for Elements is on GitHub:
[https://github.com/stripe/react-stripe-
elements](https://github.com/stripe/react-stripe-elements)

