Duration 29:44
16+
Play
Video

What’s new for online checkout

Tony Chen
Lead engineer at Google
+ 1 speaker
  • Video
  • Table of contents
  • Video
2018 Google I/O
May 9, 2018, Mountain View, USA
2018 Google I/O
Request Q&A
Video
What’s new for online checkout
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Add to favorites
6.36 K
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

About speakers

Tony Chen
Lead engineer at Google
Avnish Miduthuri
Product Manager at Google

Tony is the lead engineer on Google Pay's Online team and has been with Google for the past 6 years. Prior to that he's worked at various different startups: Wealthfront, Songkick and Blurb. Tony is a big proponent for continuous deployment and leads one of the few teams that actually does this within Google.

View the profile

Avnish Miduthuri is a product manager on the Payments team at Google, focusing on mobile commerce and online payments. He is focused on improving online checkout for web and in-app developers, and has launched payment APIs for physical commerce integrated with key ecosystem partners including card issuers, payment networks, processors and e-commerce merchants. Avnish earned his bachelor’s degree from the Indian Institute of Technology, Madras and a masters degree in Computer Engineering from the University

View the profile

About the talk

Accepting payments online should be easy to implement and handy to use. Come and learn how the Google Pay API can improve your payment flow and increase conversions by offering customers tons of helpful check out tools, and how it leverages the PaymentRequest standard to deliver a great experience on the web. The session will also cover how to build great checkout experiences with Chrome autofill.

Share

Good evening, everyone welcome and hope you having a great time at Google. I I was so far. I'm of Niche military and I'm a product manager at Google working on Google pay for online payments and I'm Tony Chen software engineer also working on Google Play and we talked to you about what we've been working on Google pay to improve online check out. I'm sure a lot of you here already excited about the potential for e-commerce and rightly. So in the us alone in 2017 star retail sales near half a trillion dollars with the highest year-on-year growth in the last

6 years. And we sing similar growth Trends globally. But this growth is happening despite the fact that online conversions haven't really improved from all the estimates. We've seen conversions across desktop and mobile devices has been largely flat over the last couple of years. That's what hard to see that caught abandonment during checkout is one of the leading causes when uses go to check out online. They see the long check out forms 15 + Forum feels another card information their billing address their shipping address logins

passwords and the list goes on. When user see all these forms not surprising that they drop off especially when they're in a low-speed data connection on mobile devices. We think there's a huge opportunity here to really improve online check out. That's what we hope to do with Google pay. The start of this year we unified our payment and check-out experiences across all of Google under a single brand Google Play. Our vision for Google Play enable users everywhere to be what that Google account anywhere there signed in. The Google Play is

more than just an app on a device or a button on a website for building. It has a platform integrated as a core part of a uses Google account and available to them everywhere. They're signed into Google. In the session will spend some time to share some of the changes we've made over the last year as they've launched Google Play and then we'll talk about how you can Implement to Google pay API and finally will also try some of the product enhancements are coming up. Looking back a few years ago. We launched Android fee and we started our journey with enabling

easy and I payments using guards that uses a provision on their device in the Android pay app. Will watch this feature in 12 countries and some great adoption from thousands of Developers. We heard from you are developers that you wanted more you want to access to many more users being with more payment methods and it's several more countries. So we went back to the Spence of Google are billions of users across multiple popular products around the world. Are uses of save hundreds of millions of cards to their Google accounts

making purchases on apps like the Play Store YouTube or even to shopping the web using Chrome. What Google Play users can easily make payments with the payment method stored in that Google account anywhere, they're signed in a consistent and seamless gaming experience. Hey Google play. It's already the way users pay across Google user. See Google pay today when they check out on the Play store buying an app renting a movie. Or just on Chrome on a feeling of a checkout form. And not only is Google pay present when users bought

by from Google but it's also being Incorporated to several new services for transactions. That users can make with third-party merchants. Princeton you'll see Google pay powering check out from Ocean experiences with an Android messages from Merchants that have used Rich business messaging. And also assistant enable transactions assisting or on web actions including amp pages. Keeping with our vision is to external developers. So users can pay with all of their cars and their Google account when they're on your sites or apps without any additional

setup or having to download a new app. Well aren't really going to stay here with payments enabled on Android devices both native apps and on the mobile web using Chrome's implementation of the payment request standard. And the last few months, we've already seen great adoption from several developers around the world take a look using already. Use Google pay on a range of merchants from order-ahead Ops. I want to retail sites travel transportation ride-sharing and many more. Spell Merchants live across the world from the US Brazil

Russia the UK Australia, Japan and many more. Emotions with a global user base in enable Google pay for all their users with a single API integration for instance deliveru a leading Order ahead app launch Google pay for that uses in over 12 markets. An Uber is rolling out Google pay for all of their users globally. An early developers have seen great results from their Integrations. For example, hoteltonight saw that Google pay users converter that is 65% higher rate than users on their regular check out flow. Thanks

for the easy payment experience. I mentioned earlier. Are you Google baby eyes Mabel many more users to pay with all their cars in a Google account. And so when StubHub updated from Android pay the increase in the number of unique users paying with Google pay Do an air B&B updated they sell 11x increase in Daily transactions from Google pay. How are apis also enable Merchants to build Streamlight onboarding experiences for that users free sample new Airbnb users when they set up the app can completely skip the payment

method flow payment method setup flow and completed booking with Google pay without ever having to enter any payment information or building addresses. We're now taking a huge step to make Google pay available to many more users Android developers on the web last week. We announced our Google pay is now available across the web from Android to desktop and yes even on iOS devices. 21 integration with our JavaScript libraries Merchants can enable Google Fit Google Play globally available to all of your users regardless of what device are browser there shopping on.

We've also focus on making are apis really easy to integrate. I've been really encouraged by the positive feedback we've seen from Developers for instance the iconic and online fashion retailer in Australia reported that it took just one of their developers a week to Naval and launch Google Play. And I'm keeping with our mission to make Innovations as simple as possible. We've also partnered with leading e-commerce platforms to make accepting Google pay on the web even simpler. For instance. If your Shopify Merchant, all you have to do is go to your motion

settings page in the payment provider section and with a single click you can enable Google pay Shopify launch just a few weeks ago. And in that time you've already seen tens of thousands of merchants enable Google Play. If I leave a parking with several leading favoring providers gateways and processors around the world, do we have security and make it easy for their Merchants to add Google pay? These providers of already enable Google Bandera sdks and Merchant Solutions, and we have many more coming soon. To show you how Google pay works on the web and how you can

integrate the Google baby eyes going to hand it over to Tony. But thank you have nice and you switch to my phone, please. So I can't really walk very far with this. So I'm going to quickly walk you through what the weather experienced is going to be like I'm on a merchant site right now. I'm going to buy something and check out with Google pay as you all know Mother's Day is coming on up and I haven't bought anything for my mom yet. As a father of two, I normally would try to buy something for my wife first, but everytime I try to pick out clothes for her somehow they always end up getting

returned. So I think my mom would appreciate this nice green sweater. So I'm going to go ahead and add it to the cart. Netflix checkout and up Pops a buy with Google pay button I'm going to open this and this shows are peanuts sheet. Our payment sheet is what shows the available cards and shipping addresses associated with a particular Google account. If you happen to be logged in into more than one account, you can easily talk like like so As you can see, this is a test account. So there aren't any card setup. I'm going to go ahead and switch it

back so I can easily check out. Now I'm going to ship this to my mom. So I need to add her shipping address. And sometimes I really have a tough time remembering exactly what my mom sipping address is. What's a good thing that Google pay shows autofill suggestions from the Google Maps API to fill out this form super simple. Now that I'm done, I'm just going to go ahead and play the continue button and now we just made a purchase. The same to Google pay also remember the last select a card and shipping address to make your next check out easier. For example, if I open up

the Google the payment cheat again. You'll see that my mom's shipping address is Now the default users will see the same consistent user experience across all major browser platforms such as Safari Firefox and coming soon Microsoft Edge. One other thing to note is that this Merchant page, even though we built this just for Io we're going to actually release this to the public and to all of you developers so that you can play around with our apis without first having to integrate we built this Nifty little developer console on the top, right? I don't know if

you've noticed but there was a little bug little icon and you can easily manipulate the request. So for example, If I wanted to not collect shipping address for whatever reason. I can change the false. And if I for some reason can't support all the available car networks are easily remove one like so and then I click on the Google Play button. And now you'll see that the shipping address is no longer available in my previously selected Visa card is no longer accepted. Key switch back to this lights, please.

So for that test, I thought you just all go to G. Co pay / demo. Now now that we walked through what the web experience is, like let me walk you through how easy it is to integrate with the Google pay API. With these four simple steps, you can enable the same him an experience that I just showed you for all Google users. Four steps are as follows us some JavaScript check if the users on a supported browser add to Google pay button and then open up our payment sheet. The first things first you're going to add the script back to your site. As soon as the script is loaded.

You're going to construct a Pain and Spine object by passing an environment field. We support you environment Fields test and photography production. Environment test you don't have to register with us. You can actually play around with apis yourself and integrate into your site. Environment test we do show that users real data. However, whenever they make a selection we have to return you a fake token, if you're working with you're integrating with one of our supported processors will actually return you a token that you can actually charge on in their test environment. Once you complete the

integration and you're ready to handle real payment come register with us throw Self Service portal and then flipped environment to production. So now now that you have the payment when I constructed the first eight. You're going to call is is ready to pay is ready to pay return the simple Boolean telling you whether their users on a supported browser or not. Hey Google, we really focus on optimizing for conversion. So rather than you showing yet another payment option. You should only show Google pay if you think it'll help improve your checkout experience. So is ready to pay returns

false. Don't run to the Google pay button. In the near future. We're going to make an enhancement to that is ready to pay API so you can ask for ready to pay Google users with an existing payment method. Now that you know that the user is ready for making a payment you going to call her second API create button create button returns a simple HTML element that you can depend the dawn of your sight. We highly recommend that you should call this API over constructing your own button with static acid. So you can take advantage of all of them provement that we make sure the button over time. For

example in the near future. We're going to automatically translate to the translate the button to the user's Locale in order to improve click-through rates. Nothing that we recommend is that you should use or default color which is black. However, if you happen to have a site with a dark theme we provide an alternate white color that you can use. The minimum that you need a pastor to scrape by an API, is this on click event listener function? So once you add the bun to your site. You're the user clicks on the button. You're going to have

to call you're going to call her load payment date us actually open up the payments sheet. The first thing you're going to do is consult this payment data request object, which is just a set of payment configuration use for this particular transaction. For example, if you need to collect a full billing address cuz you want to do an ABS check where to collect a phone number so that you can contact the user you can easily configure it like so we highly recommend that you collect as little information as necessary from the user as we've seen conversion rates tend to drop whenever you ask the

user for additional information. One other thing to call out in this request object is its payment method tokenization parameters this object may have a long name. But all it is is a set of key values pairs that we're going to forward to your processor. So be sure to check your processors integration guidelines to make to find out what they need from us. Now that you can suck at the request object. You're going to pass it to load payment data that's going to open up a payment sheet the users going to make a selection and we're going to

return to you a payment data object the payment data object consists of metadata about the user selection so that you can use it to run to the order confirmation screen. Also with independent data object is its payment method token the payment method token is what you're going to actually use to complete the transaction by passing it to the processor. One thing to know is that security is already baked into our product or payment sheet is always open with in a separate pop-up window to eliminate user clickjacking or any other security vulnerabilities.

What that means is if the site happens to be compromised no malicious content can be overlaid on tour payment sheet. So it won't confuse a user by scaring their data and what that means is a Google users data is always kept in their control. So what that means for you as a developer is that when the click event happens? You must call load payment data synchronously don't make Network requests to the server or any other asynchronous calls in order to avoid having a pop-up window blocked by these as browser. And

that's our entire integration. So it's super simple. I'm going to prove to you how simple It Is by doing a live implementation from scratch. And all I'm going to do is basically copy and paste from the deck. I've already presented to you to show the entire integration. Can we switch up my pixelbook please? So remember folks this is a live implementation. There is a possibility that things may not work just in case I have the cheat sheet that may help me out, but hopefully I won't need it. All right. So I'm going to do this implementation on

jsfiddle, which allows me to enter JavaScript on the Fly and then open out onto this result pain on the bottom right here. So on the left, we have a similar JavaScript in the middle and CSS on the right as you can see, we've already downloaded the script tag for pay. GS. And we've already constructed the payments client with environment test. So I'm just going to expand a JavaScript section A little bit just so you have more room to see. And the first thing we're going to do is call is ready to pay. so is ready to pay return the simple

Boolean that tells you what are the users on a supported browser not so I'm going to print out the response of is ready to pay. sports. Result I'm going to update the site. Taking a little time to think about it. tried again Wow. This is art. Let me try that. What's up? Ah, thank you. I changed this based on someone else's suggestion. And now that totally screwed me up. Thank you for catching that. Alright, let's print that out again. All right again break. The result shows you that we're on a supported browser. The next thing we're going to do is call Craig Button. subscribe button

returns a simple HTML elements that we're going to use the embedded into our site. So I'm going to add the app and the button. into the sights and then need a fill-in this click event listener function, which I'll leave blank for now. I'll text again in here you go. Here is our black Google pay button Now by default as I mentioned, we always use the white color. However, if your site happen to have a dark theme you can audit you can easily change the button color to white like so

And then you are going to get the swipe button. If you're having to developing on a responsive page or on or if you just don't have real estate and you need an arrow or button you can easily change the button type to Short. To get a surety bond and then I mentioned earlier you don't need a fill-in any of this at all by default. We will always use the black button in the standard size. So now we're going to call and data by constructing this payment data request a copy of the request object from the Deeds to slides. And then I'm going to merge them together.

And then we're going to fill in the morning to call the payment data on the button click event. Which I left empty. And then to show that everything is wired together properly. I'm going to fill in this process payment function. The fastest payment function is going to taken or payment method token. And the token itself is a Json object. So I'm going to call Jason. Stringify. So that you can see the content. All right. Here we go. One click and wait a little bit click on the button. I'll pop the payment sheet you make a selection. This always seems to happen.

All right, I'll do it again. It's going to work the second time. hair we go and here is the exact token onto the result pain. Thank you. Can we switch back to slightly? Thank you. So like I said super simple you can complete the entire implementation within a matter of minutes. wrong button So I just shared with you what we've been working on the past few months leading up to and leading up until this lunch not going to share with you a couple of things that we're going to be launching soon to enhance our offering for both users and for you the developer. What's wrong with a

user experience first? As I mentioned before we want to have the same consistent payment experience for all major browser platforms. However, we're going to try and optimize wherever we can do for the browsers that support Nativity. Why such as Chrome with payment request we can offer this nice native payment sheet experience on mobile website. Similar to a pop-up window this native sheet is impossible to click Jack because the sheet itself is completely separated and detach from the Chrome app itself. But unlike a pop-up window this payment sheet is a streamline purchase

experience because it allows the user to stay in context of the payment within your sight. Soon we're going to be expanding native support from from mobile onto the desktop with a payment Handler spec. So payment Handler works by installing service workers into the user's browser. A service worker. It's just a JavaScript interface between our payment sheet and the native UI in the browser. When you don't really have to understand what a service worker is nor do you really have to understand? What payment Handler does because when you

integrate with a Google pay API automatically we're going to do all the heavy lifting for you. So let me walk you through a quick preview of what that's going to look like on Chrome desktop. Can you switch me to my pixelbook please? So you can see we're on our Merchants page again this time when I click on the Google pay button. Apopse are payments sheet within within this nice secure native frame very similar to the mobile experience. This thing is not you cannot click Jack this also

because indebted nicely into the pop-up window. You can tell that part of the same sheet. It's native and secure. It's not part of the website because you can see that the native sheet itself is laid over laid right on top of my toolbars. Continue to show you dye works. And there we go. We just completed payment with payment Handler. What's the status lights please? So you can see we're going to always look for new ways to improve our payment experience now for developers. This this payment Handler

example is a great way to Showcase of what our Mantra is. Which is we want to ensure that you only have to integrate with a Google pay API once and after that you're going to be able to continuously benefit from all the improvements that we make without you having to change any parts of your integration. When you integrate on Android, for example, we can make updates through the Google Play services to the to the 2 billion active Android devices. However, this has always limited us to client releases now that we switch to the web another launch on web and we switch to this new

Jason interface. We're able to take advantage of the continuous server pushes so we can bring new features and improvements on a daily basis. And it was he looks to expand Google pay to additional Services. We want to bring the same consistent unified integration experience for all developers some happy to announce that were going to be extending the same Json interface and bring it from the web to Android amp actions on Google and more. So let me walk you through a couple of these examples by starting with accelerated mobile pages.

Now we scenes from Menace adoption of amp from around the world ant by design. That is a restricted set of HTML with limited JavaScript support. By working closely with the amp team you'll soon be able to enable Google pay by using the standard and components. All you need to do is drop into steam Json payload as you would to load payment data. And you'll be able to easily render Google pay button and within your amp gauge the bun itself will automatically handle opening the payment sheet and returning you the pan that the token. And as we all know payments is no longer

limited to just websites and Native apps. If you happen to be collecting payments through Android messages or through the Google Assistant, you'll soon be able to also enable the same Google pixel experience with the same Json interface consistent and easy to integrate on all surfaces were making Google pay as easy to integrate everywhere as it is for users to pay everywhere. Now if you're interested in learning more about how to collect payments on Android messages or through the Google Assistant go find my buddy. Sean will be at the

Google Assistant Google Assistant sandbox from 12 to 2 tomorrow. Take us home. Super Shuttle lot of details with you today, but how you can add Google pay to your site and prove conversion. We're really excited to see how you learn a great. We know there's a lot of information out. There was so nicely organized into do websites. There was one for you can learn about how Google pay can improve things for your business overall. Let's see. Co / bass / business and if you're ready to start integrating start-rite Android developer

doxxer Victoria I also can be available right after the session in our sandbox that's located at MG. So, can you please stop by? Ask questions will also have members from the Google pay T-Mobile about tomorrow. If you can't make it today sub shop. I asked questions. If you're done without girl, so if you want to learn more about Google Play, we also have two more sessions tomorrow. The first is like by our payments ux team and it's a walkthrough like design principles out here. You can optimize conversion using Google pay And for learning about how you

doin tablespoons actions for the assistant check out the session and adding transactional capability to your actions tomorrow afternoon. That's hosted by her assistant team. Finally, we have a hackathon coming up next month. For those of you on the west coast. It's in San Francisco. It's in June so you can sign up at the lake there or stop by a Sandbox one more information. We always develop events globally. So if you'd like to see an event near you or do you want to say to you and when I'm coming events, you can stop going to sign up for a developer documentation and will keep you posted. And

that's it. Thank you so much for attending. Enjoy the rest of your life.

Cackle comments for the website

Buy this talk

Access to the talk “What’s new for online checkout”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free

Access to all the recordings of the event

Get access to all videos “2018 Google I/O”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Ticket

Interested in topic “IT & Technology”?

You might be interested in videos from this event

September 28, 2018
Moscow
16
173
app store, apps, development, google play, mobile, soft

Similar talks

Gerardo Capiel
Director Product Management at Google
+ 1 speaker
Varouj Chitilian
Senior Director Of Engineering, Consumer Payments at Google
+ 1 speaker
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Jenny Gove
Mobile Payments UX Lead at Google
+ 1 speaker
Brandon Herring
Software Engineer at Google
+ 1 speaker
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free
Jenny Gove
Mobile Payments UX Lead at Google
+ 1 speaker
Pete LePage
Developer Advocate at Google
+ 1 speaker
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free

Buy this video

Video

Access to the talk “What’s new for online checkout”
Available
In cart
Free
Free
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
646 conferences
26471 speakers
9831 hours of content
Tony Chen
Avnish Miduthuri