(techno music) - [Narrator] So there's a little bit of a theme now with the past, present and future or current. You know. So, let's get into payments. A little bit about payments.
So we've been doing payments as humans, like transacting for a very long time.
So, we kinda have an idea of how we actually do payments. So I'm not going to bore you with a whole bunch of economic theory and contract law and so on. But, needless to say we know the basics of how to pay for stuff or how to buy stuff.
And also over the last 25 years the web has really facilitated that e-commerce, Let's call it e-commerce movement.
We know, we get it, how it's supposed to work. So, what was fun, writing this talk was let's look at the past stuff and then it turned out that the past is really like, now.
I will show you why, particularly in browsers. We've had for a long time now HTML 3.2, that's going back to, I don't know, 1996 or something.
We've had forms for a very long time and we love forms for a number of reasons.
A, they give us type control, B, they give us validation, they are highly accessible, but it turns out that they are quite annoying to fill over and over again, particularly on mobile devices, I'm sure we can all agree with that.
But, we've used them effectively for a very long time, the model is there and they also support obviously posting to the network as well, which allows the safest data. Or we can also store it locally.
So, effectively, as we understood the problem of forms, which is the one I just discussed about being able to post them, the browser are now there to actually help you with that.
And who's been adding the HTML magic attributes to their forms to get auto-fill behaviour? Yeah, one person. Okay you need to do more of that. Thank you.
That's a start, that's also what I mean by the past and the present kind of now. So, if you're not doing it
right now, then get into doing it.
It's very simple, you just have auto-complete and then you can say cc-number and so on.
And you'll get instant behaviour.
Let's see auto-fill in action, and we've only shipped this in Firefox very recently, I don't even think it's in stable yet. So, this will ask the user do you want Firefox to help you fill forms? If the user says yes then it's enabled globally. And you'll start basically getting information for free. You can store multiple profiles of information, and that will fill in forms, yay! So no more typing or not as much typing.
You've all hopefully experienced that on websites. So, as developers, add that it really helps users. This is fine, problem solved, let's all go home. It's not fine.
So, let's go to the present now and the present where we can look for present technology or things that are being solved presently in this space, we can look to our faithful leaders, Microsoft Wallet, does anyone have a Microsoft Wallet account? You might, who has an X-box? So, one person.
I'm sure people have X-boxes right.
So you secretly do have one.
If you have some kind of Microsoft account you secretly get a Microsoft Wallet.
It's already like... yeah. (laughter) No, this is important, this is gonna be important, who's using Apple Pay? Yeah, so Apple Pay is amazing.
A real motivator for this work is actually the work of Apple which we'll get to in a second.
And what about Android Pay? Not as many as Apple but pretty good.
Already as you see, a significant percentage of the people here have these technologies.
Even if you didn't know about it like the Microsoft Wallet one.
So you might actually have that if you have entered your credit card details or given them to Microsoft at some point.
Apple, who's used in Safari, who's had the privilege of paying on the web with Apple Pay? A couple of people. The experience as showcased here is pretty amazing. You can use your phone and using the biometric scanner you basically authorise a payment.
So this is really quite revolutionary.
And there's also a whole bunch of crypto that a merchant needs to go through in order to get on-boarded on to Apple Pay.
There's all this fraud proofing stuff, they've basically solved credit card fraud because it all goes through Apple's network and there's so much encryption, so much of this heavy weight stuff that it needs to go through to actually make a payment with Apple pay. On the web, we got a little bit jealous, like, hey them Apple folks, they're doing really good stuff. Microsoft and Google and Facebook and more Google and myself and a bunch of other people we all got together and we put together this API for you all.
Which is the one I'm going to show you how to use. Who's missing from the list? (audience chatter) Our friends, Apple, they announced last week, hey that looks kind of interesting, we may consider it for a presentation. We are super happy that they may or may not implement it but they've given positive signals.
(audience laughter) But we've been super, like we've based the whole API on Apple pay, we've been super, super accommodating to everything that they need.
So hopefully that will know entice them to actually do this. Let me show you just to get an idea of how this actually works.
Here's your regular shop, so you could go, I want to buy one of these and I want one of those and then you go to checkout and instead of showing a form you let the browser take over at this point.
What I'm showing here, keep in mind is just a prototype, this isn't the final design, this is all gonna change. Essentially, the user will be able to see their items that their buying, they'll get an idea of the total. They'll be able to select the shipping method, and also what payment method they want to use. I'm gonna show you in the future you'll be able to choose a website here.
You'll be able to choose Paypal or whoever. Alipay, it doesn't matter.
Right now we are going to use what's called Basic Card, auto-fill kicks in, boom, so it's already in the browser so it knows me, the card number is now.
Let's do it.
(laughter) If you're testing, I found the testing numbers so you've got a 4 and a bunch of 2's.
Anyway, I won't waste time on those.
But there's a whole bunch of credit card numbers that you can find.
And then the CVV which we will not store.
We store all this information encrypted.
Save that and then pay, processing, this then gets sent back to the website.
Boom. It went through, done.
Are you going to heckle all the way through? (audience laughter) On the second round here, let's give the network a little bit of time to catch up.
That's all right. Let me show you also, while that's loading there.
Just so you can see that it's not just in Firefox. This is in Chrome Canary right now.
So it's similar payment form, it already has my details, one-click, pay.
One click, type in your numbers, which we will not store obviously for privacy and also for security reasons. And, that would actually work.
So the reason it's just sitting there processing is that I'm faking the thing and it's supposed to say, yes this payment has gone through.
Which is what I'll show you now. Cool.
It's already in Chrome mobile as well.
So the network is not being too terrible.
So you just check out again, the experience for mobile comes up from the bottom, it's already fully integrated with Android Pay as well. So put in your CVV, boom, credit card verified, payment being made, done.
It's super slick, super fast, no more annoying users with having them type in annoying things.
So this really changes the commerce model because now you don't need to have them register an account, you don't need to make them go through any pain. You can just put a buy now, click here to buy thing and they can just go through this shopping experience which is kind of cool.
Let me talk a little bit about the API.
The API is essentially, I should have gotten the laser but I didn't.
It's essentially a new payment request.
Yeah, that's what I want, okay.
And you have this method data, the details of things being bought and some options as well. Methods, if you think about it, so how do I pay for things? Details, what is actually being purchased.
And the things that you actually need finally, it's called the options, the things that are actually needed to complete a transaction which I'll show you now. Let's start with the methods.
Like I said, we support cards, so we've been working with all the credit card companies. And essentially you can say I support a debit card or I support a credit card and I support Visa and Mastercard but I do not support AmEx for instance.
What this allows the browser to do is say, hey, I know my user has a Visa so I can automatically just match that up and say look, they supported this and just kind of highlight that and make it a thing of choice. Another thing that we're doing is, like I said, we are trying to integrate websites as well. You can say your supported method is, for instance, https://ansaid.com.au/pay, something like that.
This is more kind of looking into the future. So now for the details, so let's say you're doing an invoice, you might add an ID and then these are the items. The display items are pretty critical, don't leak, the browsers will not pass this information on, but I'm just telling you now, don't put what people are actually buying that's a real privacy problem.
Don't say, oh they're buying underwear and they're buying I don't know.
Don't reveal what people are buying, they are buying clothes.
The clothing that you're buying is this.
So that's pretty critical.
Currency support as well, and all you need is the total. That's the details of the transaction.
And then there is the options, so you can say what kind of shipping as well. So you can have like standard shipping and then you can have like drone shipping if you're like Amazon or something.
When the user goes to select what kind of shipping they want you'll get an event back.
You might say we support these three kinds of shipping but I actually can't ship to, the store might be in the U.S. but I can't ship to Australia which is a very common experience for us who live here in Australia.
In that case the webpage or the merchant gets an event and they will deal with that event saying look you can either ship here or you can't and you can update your shipping options based on where the person or where the user is.
And that's done essentially here with this update with new details.
If everything goes bad it's like sorry, we can't ship to your address.
So it allows you to display an error message as well. And then there's this weird case which we've all experienced like we've gone to a restaurant and you go and pay with a credit card and it's like well, if you're going to pay with your AmEx, you're going to have to pay 3 percent more.
But if you use a Visa and if you happen to have the Amazon Visa we'll give you a free mug or something like that.
So, we can model these kinds of situations as well. So we could have like a food card processing fee. And, so again, basic card, you slap that all together in this giant object and you basically send it in. Payment options, finally, these are like the things that you actually need to complete the transaction. Here you can request the user's email if you need it, the name.
So obviously if they're buying a digital good like a movie ticket or something like that where you can just have a barcode you're not going to need a shipping address. You can turn that off, they're all off by default. Essentially this is the flow.
If you saw, we did a show that returns a promise and eventually you'll get back a response.
Then we can validate, we'll get back that data, you're not guaranteed, see you'll request this stuff but the user may be like, you know I don't want to give you my address for whatever reason or maybe I didn't import my email. The email that they might have saved might be wrong. So, it's still up to you to validate the response. We'll do some validation.
This may also include, okay, can I actually ship this? Actually the shipping would have already happened. Can you actually complete this? Or you might actually, now that you have the response, the response has the credit card information so you might actually then send it to the server and say look, can they actually pay for this thing? Do they have money in this account? So you might get at that point a success or a fail. If you've checked everything and everything looks good then you can complete with success.
Otherwise, you can say look, I can't do this transaction. Or they might be on a train or something and the whole thing may come crashing down.
So, you're order's complete and done.
Let's go in to the future a little bit.
The future's already here just not evenly distributed. There are new ways to pay for things.
Who has Bit Coins? Maybe, one.
Some people are already getting like Bit Coins. Other things that are already there is that there is more than just credit cards.
There are people who want to transfer money around the world and so on.
How to we bring those companies on board? A lot of these payment handlers already exist as native applications.
What we're also doing is allowing integration with Android as well.
This is very small.
This is like just Android manifest for anyone that does Android development.
So you can integrate.
And we can basically say, this website alipay is actually linked to this native app. And then that will allow the native app to actually take over this payment processing and you'll actually be able to pay with like alipay or whatever using the native app. So of course then we get web envy again, So we're like oh that's not like, we need to let the web do this as well.
Ideally what we're working towards now is assigning a new API which will actually allow you to do this. And this is the payment handler API.
I'm not going to show you the details because I'm still working on that API and I'm changing it a lot together with people from other organisations.
But essentially it gives us a coherent story now. We now have, we will have the ability to pay with things on the web.
We'll be able to use native apps to pay and we'll be able to just use websites.
Or we'll let the browser take over with auto-fill. It completely opens up the eco system, doesn't discriminate against anybody and it also starts including these new proprietary payment methods such as Apple Pay and so on.
So tokenized payment methods will be coming, like BitCoin as well.
This will probably change.
We've kind of worked out that we can do this without a permission model but it might be that you go to wallet.com and wallet.com will be like, hey, I can handle payments if you give me your credit card info.
Imagine Amazon already has your credit card info so it might just go, hey, I can handle this stuff for you if you want to make payments with me.
And then it will be able to hold wallet, it will have a wallet and it will be able to hold credit cards or other payment methods.
And these will all be eventually driven by a service worker, which will have a single event which is like on payment request and then you do your magic, whatever it is, and you'll be able to drive the browser's user interface with that and allow people to pay more easily using a very diverse set of methods.
Chrome is currently prototyping this, together with PayPal so they announced that at IO. So we should see the outcomes of that pretty soon. And that's it, that's the web payments ecosystem. So we take forms, we take auto-fill, we have payment requests coming into the pipeline now. And eventually we are moving into payment handler API enabling crypto currencies.
So we're looking at ten years out.
And that's all of web payments.
Thank you.
(audience applause) (techno music)
