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 UniversityView 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.
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
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.
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
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
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.
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
Buy this talk
Access to all the recordings of the event
Buy this video
With ConferenceCast.tv, you get access to our library of the world's best conference talks.