Google Pay API Webinar

Key Takeaways

you you you good afternoon everyone welcome to our London webinar for Google pay I'm over here in the London office I'm joined by Natasha and Jam and Dom as well and were also joined by Tony over in the New York office so let's jump straight in to introduce myself I'm Rowan I'm a developer advocate for the web and Chrome my team focuses on ecommerce so obviously payments is very interesting to me and hopefully it is also interesting to you now if you have got this link from a contact at Google then they are also your link for following up after this we're on the live stream if you've never been on a live stream before then you should see on the right hand side you have a place where you can chat so Natasha is watching that chat for your questions and towards the end of this she'll be relaying those to myself I'm Tony and we will be doing our best to answer those for you let's jump in then with an agenda for the session today when I start with an overview of Google pay kind of a bit of history and where we are now we'll take a look at some of the design considerations both inside of Google pay and for your own checkout then we're going to take a look at the implementation on web and once we've done a quick run-through of that we're going to go into more detail and actually just go into some code and a live demo and finally we'll wrap up with Q&A at the end ok to set the scene a little bit for you to show you how much of a priority is that this is for Google here's a quote from sundar CEO from our most recent earnings call and inside of there you can see that he's really talking about the importance as we move from just being a search engine that answers questions to really providing complete actions for users and of course that includes transactions and a big part of that is making them frictionless across all of googles properties now Google has the ability to reach users at a tremendous scale we've got over 1 billion users on Chrome and over 2 billion Android users but previously with Android pay we weren't really tapping into all of this scale we were only servicing tokenized credentials and that was just on Android devices as well now what we're trying to do with Google pay is really take advantage of that massive scale and this is our works so anytime a Google user transacts on a Google property and has chosen to save their payment details with us and that means on properties like YouTube Chrome the Play Store and so on we are now using Google pay to tap into that collection of cards on file and also make them available to partner applications and partner sites to create those transactions that means we've really increased the scale of our payment product to now include hundreds of millions of users who are ready to pay right now and we've also really focused on making it easy to use that means if a user has a card on file with Google they're ready to go they can use Google pay to pay for things now to give you some context this is a little different from how it used to be where maybe you'd have to download the Android Play app or maybe you'd actually have to active we add that card back to your account to make the payment so now stress that again nothing is required on behalf of the user if they have a payment method saved then they can go onto one of these properties and they can start making transactions and to give you an idea one of the phrases we have here is eating our own dog food so we've actually started really migrating all of our first party products to use Google pay as a touch point so that means when you're going through YouTube when you're going through the Play Store you're gonna start seeing the Google Play the Google pay round there so we're really looking to make ways the consumer awareness for this and it's not just surfacing there on sites and apps and inside of Google properties we're trying to make Google pay available on all the surfaces where users interact with Google that means if they're using the Google home then they're using Google pay to complete those transactions if they're using NFC for tap and pay in stores then it's Google pay that they're seeing on their phone when it makes that payment we really focus stop creating this delightful simple experience for users across all these surfaces where they interact with us and as well it's not just about making it easier for our customers we want to make it easier for you our partners and developers to actually build D scalable solutions so Google pay means that we are now available with a single API integration across web and very similar API for Android globally in over 60 countries and that Web API is across desktop and mobile web and is supported in all major browsers so Chrome Firefox in Safari and again this is the change from what we used to have before with Android Bay where the user was having to download the app rely on adding that card as well okay so if that's the scene set let's talk a little bit more about what it means to use Google pay on an online store now if we look at the problem we can see the checker is really a huge pain point for our partners as you can see here 69% of users will abandon a site or an app because there are too many steps in purchase so if we can improve that by just a few percentage points then that really represents a pretty big win for transaction volume and let's take a look in a bit more detail about where those problems come so here's a kind of average checkout example you can see the multiple steps all of the decisions that were asking the user to make and a lot of people will just abandon this with the intention to maybe come back later but generally they do one of my personal favorites on this is when you're trying to enter your credit card number and someone hasn't actually marked up the field as a number correctly so you're trying to convince your phone not to keep swapping back to the letter keyboard and so on so on average when we look at something like this to complete a checkout it can take the user about 120 tabs or clicks which is like three to five minutes of their time to complete that flow so you can start to see why people are dropping out of experiences like this now with Google pay when I was talking about those saved payment methods before it's an just the payment method that we're trying to do here we're really trying to improve the checkout experience and provide that consistent seamless experience to the users so you can see that when I come in with this I'm selecting my shipping method and when I tap something like the Jeep a button it's popping up with the saved payment methods I have the inside of Google Bay you can also ask for additional details like the users email address their telephone number their shipping address their billing address so we really provide a uniform and consistent method for getting that entire checkout experience into just one set of you eyes you can also see in this screenshot if you look closely that you can link your PayPal account into the into the Google paid app as well so again we're really trying to streamline this to make it a single experience for users okay so to recap on that this is all about that consistent and seamless experience for users that means if the user is logged in and has a card on file with us then they are ready to pay with Google pay we have one API that enables that across web very similar API that enables that across app and also it is incredibly simple I know we have a bullet point here that says integrate in just a few days which everybody always says that about that product but we have some partners who have actually done this it is one developer week of time that it is taken certain partners to implement we're available globally the checkout we are really streamlining this so it is becoming just a few clicks to get through and we also really want to stay there we're fully invested in this we're moving all of our first party products to be Google pay so you can expect this brand to be future proof and be a good investment for long term and finally we don't charge any fees on the transaction in this so implementing this is no additional cost beyond the development investment okay and a few examples of people who have got this out in the wild already these are a few this is a bit American centric on this site but you can see a couple of me partners in here as well so Airbnb is is one of them hotel tonight and kayak I think as well just eat does this who I use more than I would like to admit I enjoy a group a mix that a little bit too easy okay and a few things that our partners are saying about this as well so you can see that customers who are using Google pay here was 65% more likely to complete their booking flow we've also found as well that the ease of Google pay means that users are coming back and they're actually using more inside of the app so their order amount is increasing and you can see as well that it's much easier for new users to come into the app there's no more additional adding of a payment method saving with a payment method inputting your address again all of that is saved so it's just a couple taps for the for a new user to be acquired and get their transaction in this department okay let's go into what's involved in doing that integration on the web then so to give you a very lightweight idea it's a three-stage process look at the design as in how Google pay is going to fit into your existing checkout do the implementation which is really two main steps you check if they're ready to pay ie is Google pays supported on that platform for the payment methods you care about and then you load the payment data and that's where you're expressing your configuration and the transaction that you want to do and then finally when the user has completed that you use your payment processor to process the transaction okay let's look at design first then one of the things we recommend is to display Google early and prominently as a payment method this is because the user has the recognition that when they start the process that they are going to be able to get to the end and just tap the button to complete the transaction you also want to make sure that you are displaying all of the relevant purchase information the price the items and services before confirming the transaction because as we'll see what the Google paid interface shows the user is the information they are sharing with you not the transaction that you are completing and also it's always a good idea to ensure that the information you get back in the payment API you've echo that in your site as well so display that back to the user and when you send them okay receipt email an invoice email you may also use the Google pay logo there to let them know that that was the payment method they use and we also say use only the official button styles and logo assets in your app will provide links to the documentation where you can find all this guidance and these assets okay now let's actually dive into a little bit of code and look at the implementation on what the first thing you want to do is load the Google page of a script client library this is pretty straightforward if you've used any of our api's before then you'll be used to this pattern as well you specify the payment jsv page AS library and then when that's done you can specify a callback for unload which is where you'll initialize the API inside of here you can see that we are creating a payment client we just go back because that's a little bit corrupted on the screen we are creating a payment client so you can see here that we're passing through the environment text this is the only parameter to the creation of the client at the moment so it's either test or its production then you make the API call is ready to pay now what's this this is doing is taking the payment methods and the transaction information that you have provided and telling you if that browser is ready to make that paper this is supported as of June across Google Chrome Safari and Firefox and this is on desktop and mobile so these are your options for the Google pay button we have both long and short versions and black and white versions so we recommend to use the black button on a light background and use the white bun on a dark background okay now this is an example of the data that you're actually passing through when you're setting up the API you specify the types of cards that you want to accept you can either accept generic cards so this is much like autofill that you would receive in the browser or you can accept a tokenized card so this is the standard tokenized card that is saved within Google pay you can then also specify the card networks that you accept so you can see here at american express discover mastercard and so on and then below you specify the tokenization parameters for how you're going to process this so hopefully or in the majority of cases you'll be using a payment gateway you can see here I'm just using the example one but on the site you'll see the supported gateways such as world a slightly and so on we also have a direct method here where we will return the details to you and you are responsible for decrypting those passing those on to your payment processor and this also means that you're responsible for the PCI compliance on that side as well now finally you're going to add the transaction info to that request as well you can see here that I've specified a final status but you can also have a non final status here if you don't actually know what the price is going to be now this could be for a number of reasons because as I said you can also request the shipping address from Google pay and once you get the users shipping address that might affect the final price that you need to charge them so once you've done this it's always important to make sure that you display that updated version the updated final total to the user before you actually complete the payment okay and this is the final bit when you get that response back from the Google pay API it will include a payment method token inside of there and that is what you are passing on to your processor library to make that actual payment okay so with that done we are going to go into a live demo without any safety net or anything so let's see how this goes so I'm just going to stop screen sharing for a moment so I can switch over to the demo okay so actually you just give me one sec because I need to reset the demo for you so that it's makes a bit more sense than just showing you this finished in the meantime while you're waiting for me to mess around this is a good point to get together any questions that you might have and start putting them in the chat so that we can answer those in a little bit Oh another interesting point on this one as well is what I wanted to do in this demo will show you this on an actual phone but conveniently when you see the Google pay UI on a phone this is actually marked as private or sensitive inside of Android which means that you're prevented from screen sharing which is a very good feature but it does make it a little harder to demo for you so since on the live stream you are no doubt on your phone at the moment anyway you can actually just follow this link to go take a look at the demo on your phone while we go so let me open up the screen sharing of Karen okay so I've got a demo here which I'm just using glitch to host so that contribute the changes fairly quickly so if I jumped in to start with I go up the top you can see that all I've got here is an empty div which is where we are going to put our Google paper so if we go right back down to the bottom again the first thing I'm going to do is import the library so like you can see it's the page is file down and my callback is going to be on google pay loaded so let's make sure that we actually have that method available and just to reiterate as well what I'm doing is I'm going through the tutorial that we have available on the site so after this you can actually go along to the tutorial and this is exactly the same code that I'm using there so you can see in here the first thing I'm doing is getting the payments client and I need to do this a couple times so we've actually wrapped this up in a function of its own for here so let's uncomment that so we can take a look so you can here see it's the Google payments client so we're calling the library that we've just imported and as you can see I'm asking for the test environment so just in case you're worried about clicking the button when you're playing along at home I'm not gonna be charging you any money for this demo okay so let's take a look what we've got over here and make sure we've done it right okay so you can see that what's happening is inside of here just in my console I've just got a response result equals true and that's because what I'm doing is I've got the payment client and I'm calling that is ready to pay method so you can see in here I'm passing through the allowed payments parameter let me show you the allowed payment methods which I've saved at the time so for allowed payment methods I've said I accept both card and tokenized card so that means that we're pretty likely to be ready to pay on one of these methods so let's jump back down again now is ready to pay is we're telling a promise and we use the them keyword to resolve that promise and inside of there we're getting a response and the response is what we're examining the result inside of the response if it's true we know we're ready to pay we're good to go ahead and show the button so let's do that I've wrapped that up in the add Google pay button watch I'm gonna open up here so you can see here again just calling get Google payments client and then create button which unsurprisingly is going to create a button for us the primary thing on that is we need an unclick handler so I've got that just up here uncomment that I'm just going to keep it empty at the moment just so we've got a function that it can call and you can do some configuration on the button so let's just verify they were actually showing the button first so there we go we've got a short black button there but like you can see I can go in and I can change just mine and wait here refresh that and we've got the long called white version but if you were paying attention doing the slides we said that this is against the design guidelines so we're going to change that back to be short and dark to match our white background and you can see here as well that the create button method is just returning a button element for us which I'm just appending to the container element that we created earlier on so that's just refresh to ensure that that's working there we go okay the other thing that we want to do is well alongside creating that button is just kind of warm up the API as well so they it's going to be super quick when the user actually taps on so we can actually prefetch some of that information from the API so I wrapped that up in my prefetch function up here and I'll show you that so what I'm doing is I'm getting my payment data app configuration which I've wrapped up in this little function here now effectively this is the configuration for your site so you can see my merchant ID you can see the tokenization parameters which are specific to your network so if I jump up here tokenization type as payment gateway could also be direct in seeing here I've got example a merchant ID now each of the gateways accept their own set of parameters here so you'll do something different depending on the configuration I also pass in my allowed payment methods again and the allowed card networks and you can see here as well I'm actually requesting some additional information I'm gonna comment this out for now so you can see a basic request first and then we'll see how that changes is we make some calls okay and so with that in place even though we're prefetching we do need a transaction attached to that but we're basically just saying we don't currently know what it is it's gonna be even powers you get the client again and we just say prefetch the payment data that's one interesting one for us so let's just hop back over to our demo and make sure everything is still working which it is so we've got our button as you can see if I tap it nothing happens at the moment because we've just got them D callback so let's actually go ahead and respond to that tap so over here I'm gonna get that payment data configuration again so that's the same thing I got before including my tokenization parameters my payment method and so on but this time I'm actually gonna add the real transaction inflow to it so you can see I've saved some transaction info up here in this case I'm saying it's final I'm setting a total price this is basically you go and get the contents of your car and pass this through to the transaction okay so now I've got that I can call the load payment data method and this is what is going to trigger the Google pay UI for the user and that's another promise so when the user completes that I they accept it or they cancel it then the promise is going to resolve and where you're going to get the payment data back for us to process now in the process payment method since this is a little demo you can see that I'm not doing very much at all all I'm doing is taking the payment data and I'm just logging down to the console so now that we've got all that together let's take a look at what that looks like this is the moment of truth I press pay you can see the Google pay UI popping up if you're playing along on web you should see something very similar happen here and you can see that because I already have a payment method saved that this is appearing in here if I didn't have a payment method saved already then I'd get the in the insight UI to actually add a new card and save that as well so I'm going to say continue here and make the paper and you can see the response that I'm just logging that I get back that has the card info class this is just for display purposes so you can show this back to the user to confirm the payment method in the transaction that they make and then you can also see the payment method token here and this is the actual token ization the token that comes back which is what you are going to pass to your processor to make that payment okay hopefully that was pretty straightforward and you've been following along so let's take a look at what happens if we ask for a bit more information there as well so if I say ask for email required then you just take a look at the data that we've got there currently which is our card info and pain method by refresh now and I press pay and continue you can see in here that now my email address has been captured and pass back in the response as well I'm likewise I can keep going I can ask for a shipping address and if i refresh okay you can see that now the UI is changed to show me my address selection I can either select from multiple addresses about what and if I just do continue inside and fair I come back and now I've got shipping address added in there if you take a look through it the documentation you'll see that there are actually a number of things you can ask for you can ask for phone number you can ask for billing address as well those will all come back in exactly the same form okay so with that we've done our demo that will remain live for a little bit so you can continue to play with that or grab the glitch link and mix it if you want and now you're on to the Q&A so Tony we're going to hand over to you to answer a few of these and then go back great thank you so much ruined for a great presentation so yes so it seems that we do have a few questions here and so I'm going to just read around and try to answer also go see if you have any questions please I mean a free free tool to send that our way so the folks first question that we got is um so somebody asked if there is a discussion forum for Google pay API so the difference is no currently we don't have such forum but then you know probably in the future we're gonna have one but then we have a very good um development documentation website where there's also a forum for you to submit questions to us and so if we run into any problems try to integrating Google pay to your existing solution you can just also through our dev site submit question to it and we'll try to answer get that back to you as soon as possible and the second questions that we receive is somebody as if you know can you call is ready to pay even without having applied to production access um so here so he giving us a context here says that I would like to check to see how many of our user could benefit from using Google API there's a great question so on so as you can see our row in just show as a demo without even having a production access so you can use on a I you can connect to the test environment and then from there you can cause called is ready to pay API so in order to connect to our production environment you have to have a we have to apply for production access first but then you can use is ready to pay by connecting to the test environment so yeah and I think a quick note on that as well Tony is will notice if you tried the demo on a mobile device if you actually bring up the payment sheet it does provide a little disclaimer saying that this is not a trusted application for you as well so users indication that you know they are in a test environment this is a real check out exactly and you know also when you are connecting to the test environment you can only the the payment token that your return will be a Africa it has token so you won't be able to pass that token to your payment gateway processor to process that so only when you all have a production environment access then Google pay we return a valid or production payment token for you to pass that to your payment processor and on the next question that we got is somebody asked if these work on any operating system so earlier we are rolling already mentioned that we support all the major browser on the desktop and mobile devices so um so the question is kind is it a yes so because is um is a browser depending on when we're talking about our web um so you know support Windows Mac Linux so as long as with the browser is supported by google pay then you shouldn't have any problems so on the mobile side we'll meet only Google pay API only support Android so no iOS at the moment yet and we've got another question here which is can payment detail be saved from Google pay to own to your own back-end system for example if a user check out we Google pay can they account details for example than be saved for future use in that user account that's very good question so um if you are using a gateway on integration meaning that the payment gateway that that you are using is support the support Google pay the payment token returned by Google pay only has a expression day of about seven days so that's basically they're talking only can only be we expire after seven days so you cannot really save that and use it beyond the seven day now if for example if you want to do something like a recurring payment is it possible but then that is outside go go pay already so you would have to walk across with your payment processor to handle that because Google pays will return a payment method back to you and then you know you then you wait according you know what were your payment processes we're using the API to do our recurring payment now if another case is if your payment gateway is not doesn't support Google pay you still can use Google pay but then on the integration would be a little bit more involved as we mentioned earlier we now when you use Google pay you have to pass the direct there's a parameter called tokenization time you have to tell that okay it's a direct meaning that you have to implement the description of the payment data payload that returned back to you in a PCI compliant environment from there you will see you know then once you descript that payment data you can see the the creditor information right the whole critical number expiration day and then all those information and from there you can you know save that and process it for your recurring payment all right so moving on to the next questions what happended question we're good questions so on the next one is on somebody asked if you know they want to do on a and B a a B testing first before rowing out other user do I have to do anything different than the tutorial suggest I would say no because so for I am be testing now you have to design you know which subset of user I would be using Google pay API basically if this user you whatever criteria that you design you know you will show that Google pay our button for the people that you don't want them to use Google API and then you just don't show that buttons age the details will be weighted to the currently supporting Google pay and the answer is yes yes there is you go into the payments documentation scroll down a little bit and you will see the full destroy processes that are supported and hopefully that would be growing list over time as well the next one this is a good Tony I think I might choose to bounce this to you as it possible to change the language of the button in text yes it is possible so on I think right now we are starting moving over six or seven different languages so when you call that create button functions in the JavaScript library it would automatically detect what language to own that you can use and then it will localize that so instead I should take for example if a person's is let's say on calling Google you know is your your your customer is you know doing their transaction in Germany for example and then the Google pay API will be able to detect that what browser what localization language they are using and then automatically switch the language to German instead of using English on that buttons so yeah is possible so if there is handle by D on the API automatically you should be able to try that out on the demo if you switch your browser's language should actually picks up that language change there was another question here is there an option for the customer to use saved address in the account will overwrite the existing address on the webshop and if yes is there any address check or validation planned so what I would say here is this is actually down to your implementation so you're going to make the you're going to request those transaction details from Google pay those are going to come back to you and it's up to you whether you decide to present that to the user to say would you like to make this your default address would you like to save this as an address in your account on the shop the other question was about validation on there as well we do we do some validation but like with all of these things anything that's coming back from a third party always validated yourself as well don't just always assume that we've done the right thing the other thing that I would double check here is you should also be able to you can request the billing address not just the shipping address so on that the billing address is obviously linked to the card so that's a bit stricter in terms of validation that's right and also when to just elaborate a little bit on the address validation - so on you know when you making the call to Google bi you can set that okay on requesting address and even though Google on on the pop-up choose the payment method chooser when you ask for the user for your customer to enter a shipping address it does not write validate the address but then when they entering the address on the Google API would use on the Google map API to make the address entry much faster much quicker and you know and so that helped the user enter a you know a correct address easier and one of the other things we didn't cover that you can look at the API is you can you can set the country codes that you want to accept but for example if you are asking for a shipping address and say it's a you're a very large country and you don't ship everywhere you are going to have to do that validation as well when the shipping address comes back you need to ensure that you can achieve ship to that location if you can't you're going to need to bounce the user back and have been either cancel the transaction or longer again to select different address the next question was the whole demo was presented as a front-end integration so is there way to implement calls in the backend with PHP instead of JavaScript as an example so not as far as I know we don't have like a server-side REST API for this because you are you're relying on accessing the users information so obviously that's that's quite privacy sensitive its links to their Google account in the browser hence the front-end nature of this but at the same time there is nothing say limiting this just being like a fully single page app or anything if you're doing server-side rendering this kind of JavaScript is going to work in exactly the same way as most of the other payment providers work great so on that our next question is somebody asking us for the link to the documentation so on the end of the presentation there here we were going to give you a link that point to our development documentation website oh you if you just google on you know Google pay API and then you will see that right away pops up on the top of the search result on the slides as well so you should have those links great Thank You Robin and um the next question um it's a very good question somebody asked how the refund work and all some of the transact you know all the operation website so that's um so that is outside for cuoco pay already on the Google pay API the Google API pay API will return you to payment method so once you get that payment methods then you will just process you know use their payment to continue with uh with the buy flow right charging you know charging the customer you know doing the arm and then later on capturing the payment after the whatever think that the your customer odd is shifted and now for refund you were going to you that would be did we be depend on on your payment your payment gateways depending on the the API that they used so I would say this this wouldn't be any changes on the on the existing way that your systems working we hindering you know we regard to hindering of the refunds on the next questions that we receive is what is the process through when 3d security is requested by the bank either a nice example process fraud documented so that's very good question so we currently we don't the process flow in term on the Google pay API is the same um but then this on the dock on the development documentation there's some additional parameters that you we have to pass then yeah so if you you can check that on the documentation for more detail information like that yes so we got another question which is are you able to change the value of the transaction for example adding an optional during charged yes so um you can change that after you receive the payment methods back from the Google pay but then I remember during the demo Roman show as that you saw when you make that our payment data request on this a parameters for the price status that you pass to Google pay so using so if you know that the arm the the final amount of the transaction will be changed depending on the shipping address because the the sales tax or the shipping cost we we tell it depending on you know we change them you would instead of passing final you can pass you know unknown status or some other value to tell that you know the total amount would change but then we do recommend you to show you know the total amount before your customer confirm the order right so we have another question here which said from calling is ready to pay but doing I'm not doing any payment let's say we have a ten thousand customer I want to find out how many of them could benefit from Coco pay API with AC at calling these functions so when you call is ready to pay there's no UI there's no pop-up that we show the user that you're calling it so um so yes so the short answer is note the user at the end user won't see that you are calling is ready to pay um yeah I will say though if you take a look at the demo if you open up the Google console and say comment out the actual payment result you can see the calls that are being made when you load the API and when you load ready to pay and obviously if you are adding that here site then anyone looking at feed the console will be able to see the calls that are being made as well right exactly alright so we have an out the follow up questions from the question that we just answered so that's Google pay API actually do the payments oh it can also be used to just request payment info and we handle the payment so so the answer is Google pay API doesn't do us but if you said I think that do the actual payment you mean you know kept capturing and doing the resettlement also if you're referring to that part of the distance action so so the answer is no Google pay API doesn't do that Google API only returned the payment information back from - to you and then you we have to you we have to handle all those on a payment actions any other questions I mean that's very good question I think that brings us up to the end unless we brought me any final pieces just we're looking at the live stream here while it just catches up so we can see if there any last questions before we go well no hopefully hopefully we've explained everything to you so thank you very much to Tony for joining us early in the morning in New York and thank you to Natasha for really wrangling the live stream give the questions in front of us as well and thank you to Tom for the expert camera control thinking - Jan for being the moral support here as well we have recorded all of this so this will this recording will be made available so if you need to share this or reference back to anything and of course the links here for the documentation and for the sample as well so with that thank you very much and we hope to hear more feedback from