 Let us buy something online we have done this many times, so we have done this many times we probably have done it on mobile web too or you go to a site you add something to your you know check out card then go in add your card details then proceed then buy probably you get an OTP and do some two factor authentication and finally you have your product there which is ready to ship right or probably you just wanted to buy some fruits online and you had to build some shipping address and the payment options what is the shipping address what your payment address should be what is the payment type and things like this. So, here is a study done by Beymar the second most reason where people were abandoning their check out card was because of the complicated check out process right. The first one of course was like creating an account which kind of solved now with many ways to authenticate and log in the users. Can you make a guess on how long the average check out time is measured in terms of check out steps 5 to 7 steps. I was seeing a someone flashing a 5 there that is almost close it is 5.42 I think those guys for the why guys who have done lot of check out on different websites that was a very good guess right. So, around 5.42 steps and the check out length measured in terms of form fields the number of form fields you have to fill before your check out is you know unformed. It is around 10, 20, 15 shall we average it out. 14.88 is getting someone at the back got it right. What if we had this suppose our sites makes a call to some API and then that API orchestrates all our pain points of filling a check out form which already has your shipment address it has shipment modes like can it ship pass can it do a normal shipping or can it ship on a drone or something or make it faster than you or it also has your you know account information the user information mobile number and the card different type cards that the user already has and there is no form to fill it just goes and clicks on the checkout button and there is an API which takes care of all this headache and the user just clicks pay and you get the card information and then you pass the same data to your payment gateway and you are good to go. Wouldn't it be good if we have such kind of a one button checkout experience? Welcome to web payments or we are talking about what web payments is in general and specifically about the API called as payment request API. Chapter one the structure of the payment message I will probably try to dive a bit on what the API looks like what are the structures like and then we will probably look into a demo to get more clarity. So I think most of them are aware of this beautiful JSON structure which we use in our day to day for data exchange right. So I am just giving a quick overview for people who aren't really yet there like it is just a key value pair you can assume that you have a title you have a type and you have properties and you have something like required which is an array so basically it is a JSON object. So before we see what the API looks like we need to get few key terminologies or key jargons right nothing very complex there it is this term called pay, pay is the entity that receives the fund right and then we have pair the guy who is paying to the pay and there is the payment service provider that can be your card, institutions, electronic payment message, post office, post office here we still have post office but that is directly from the spec. So these are the key terminologies that we need to keep in our mind as we proceed. So how does the payment request look like? So payment request basically will have a type or description, payment terms, payment details and payment options. So this is how it would look again it is a JSON object. So you have a type we are saying it is a payment request and the description like payment to 50p dot in and payment terms you have a payment method that is just like legacy card payment on my site it is an endpoint just for the one of it and then the payment amount 4.35 dollars it can be INR or it can be any currency value you want to set and then you would get a response from the API what would the response look like? The response would have a type description, payment terms and payment options. So something like this where we have the type description payment and the payment method specific response details will be plugged in there and we have the payment options. Chapter 1 the payment roles what are the payment roles? So assume that this API is like a mediator. So is he sitting between your browser and your payment gateway and he is taking care of all the hard work that you would have normally done with you know same probably saving the card on your side securely or having less form fields or trying to use autofill form fields to make things easier and faster. So assume that this API is like a mediator who is sitting there between the payer and the paying and helping things to get smoother. So what basically happens is the the payer comes in and adds something to his card and then goes to checkout. So then we mediate the checkout process to this mediator API which kicks in and helps to identify the card and add it and get the card details and pass it on back to the site because he is a mediator he does not really work at the payment gateway. He gives the details back to your site and you then process validate to whatever you want on that and then pass that information on the backend to the gateway get it authenticated and get the payment here. So on the front end for the user there is there is these things are very opaque he does not really see all the all the complex stuff that is going behind it just just a click for him and the mediator takes care. So if you see here we have your payment app we have a payment app and we have the mediator we have the payee and the payment network. So the payment network can be any of it can be either those cards default cards what we have or it can be the external APS like probably like Google Pay, Alipay or like even Apple Pay. These are kind of the fundamental payment networks that are supported on the request API. There are proposals to integrate other services probably even I saw a few stalls here on Razer pay or pay you guys even they could probably integrate. Only thing is it is a bit of a complex process everything should all this payment you know gateways or the app should be PCI compliance. There is something called as PCI compliance where if you are trying to make an online transaction using a credit or a debit card you should have some compliance rules you should adhere to some rules. So that you are assuring that the card is secure and you are not doing something fruity on that card. So there is also a proposal which says we could also get in cryptocurrencies as one of the payment methods. So as of now we have credit cards as basic card payments and the Alipay and Google Pay whatever it is. So here is a flow of the pair registration of a new app which I was talking about. So there is the mediator operated by the pair right. So that makes a request to the payment app. The payment app gives a registered true or false like was the registration successful and then the payment app says a payment app registered it says like hey I was registered with this mediator then there is this enrolled payment instruction instrumentation that goes in and the payment instrumentation enrolled gives a handshake. This basically the handshake that happens when you are registering a new payment app. This is the flow where the pair buys from the merchant website or maybe a small web app or a normal app. This the whole idea is to have the you know the checkout process on a browser web mobile browser to be very smooth and effective. Here is the example where the mediator the pair clicks on the buy button on the website and then the payment request is sent to the mediator where the mediator makes a check on select payment app for transaction details and the payment request is sent to the payment app and there is again the payment response the dance that happens and the payment response goes to the website and then the payment instructions goes to the payment network that is like your visa or credit card or debit those kind of network and those validate and say hey it was successful I was able to do the request what you sent to me and then finally the purchase is successful. This is the whole dance that happened but for the user as I have been mentioned it would just be I want to pay this amount and then he would probably hit his cvb or cvc number and that is it that is it. So, at any point of time if you have some clarification here you can just stop right away and we can discuss I wanted to be a more of a conversation than just one way and then the q and a they have integrated. So, you can have it I can have a Google Pay or Alipay endpoint I will probably show it when I talk about the API in detail. So, the question was if Alipay or Google Pay already integrated with this spec just WP spec is on payment request API is a WP spec it is a standard it is not like a Google AP or anything it is open and it is integrated in a few process I will be talking about what process supports me and I will think about it. But yeah of course because they are PCI compliant and then there is a process for getting users. The Google Pay you can have. I am sorry if you are going to ask a question you need to have a microphone otherwise our live stream viewers cannot hear you. So, raise your hand if you want to ask the question would be happy to bring you a mic. Kind of I repeated the question. So, the chapter two is the payment request API. So, here summarizing everything in one picture this is from the edge document where we have our web server web page in the browser and the wallet. So, we have this method called show on the API which we will dive in right after this and that would show a dialogue box which is within the browser you need not worry about making your own dialogue box for getting all the user inputs. So, it is basically check out form less check out. Sounds a bit cranky, but that is how it is there is no forms that the user will and the user chooses a shipping address he can choose where it should be shipped and if it is saved in his browser's autofill the same list will be shown here in the dialogue as well. He can update the shopping you know shipping address he can modify ads things like that and then the payment request API goes in he makes a purchase there is a success or a failure. So, we have a control whether there was a success or a failure say how could what would be the different cases where the success or failure happened. Say there the user selects an address. So, you have total control when the user selects or changes an address. So, you will get a callback which has the address in it and then you can decide whether you have the ability to ship to that address or not and right away show there in the dialogue box itself that you cannot really ship to this address rather than the user fills everything and then goes to check out and say hey sorry we cannot ship to this address it is pretty instantaneous there because you get callbacks on each and every change like there is an address change and there is a you know the shipment type where he wants to check and if it is there if it is say some kind of a prime kind of a service as what Amazon offer for example. So, it clicks on that and you get a callback again and you can check whether for this address for this item I am trying to ship can I give the service or not and decide on the fly and show him that sorry we cannot really provide you this and the payment could not the payment burden itself would not be active. So, APIs and demos these are the ingredients that goes into the API. First of all you need a modern browser then you need the method data details and options or what do you mean by modern browser to answering the answering to the question that the gentleman asked here. These are these are the browsers that are supported now like we Firefox has a plan to ship it Edge already has Chrome and Safari is there online. So, these are the the red ones are not there, but there are they have they have not given approvals to implement this API. So, it is on its way. So, can I have it how do how do I check whether I have the payment request API support in the browser or not it is very pretty simple you can just do a window dot payment request check for that if that exists well and good you have the payment request API with you or else you could you should fall back to your legacy payment process. So, it is talking about the method data right. So, the method data would have supported methods then it would have data, data would have supported networks and supported types. So, on the supported methods we say basic card. So, the basic cards include visa and master card there is also Mx or there is also a proposal for how do I handle gift cards. Suppose I have a my basic card I am doing the payment with visa, but I have a gift card I need to apply a gift card on it how do I do it. So, there is proposal on that and there is some discussion going on with that as well. And supported again on the on the method data you can have lot multiple supported methods and the supported networks for it. The second one here is example.com slash Bob Pay. So, this is where Alipay or Google Pay URL endpoint would come in and then the data would be very specific to the merchant. So, if you have your Google Pay setup then you would have your own merchant ID specific that is what you will you will pass it here in the data and suppose that API needs some options you could pass it in the data you know field of the method data. So, details, details is where we say what are all the items that we are is there in the checkout. So, you can say like the subtotal is this the total is this I am giving a discount of this and these are the summary like hey I am shipping you some noodles from my restaurant or you want to say some message or you want to say you have applied we have applied a discount coupon for you because you have been buying with us for consecutive 3 weeks or something like that right. All these descriptive messages that you want to show in your show in your checkout process is goes to the details object. So, in this example there is an ID for that store and the display items what are all the items that needs to be shown in the invoice basically right. So, you have the subtotal, the sales tax and the total due. So, here in this example it is like 55 dollars for the subtotal and the sales tax is 5 dollars, but then at the total amount you will you see that it is 65 that is that is because we need to add the shipping the selected shipping cost of if you want to add some cost whatever you want to display what is your extra like for us it is like GST or something you need to you can mention that there and it will show up in the invoice. And we can add some shipping options to like I was been mentioning you can have shipping options to be like standard or drone or whatever different type of shipping options you have and once the user clicks on the shipping option you will get a call back again to get the index of which shipping option that was selected. So, you need to say the user suppose the user selected drone and that locality does not have drone support then you can you can go through the index quickly see what that guy selected and take the location which you already have in your request call back and say hey I am not shipping I cannot ship to you for this just because my bot is dead or something like that right. So, you can give that customized message also. So, basically you will you will update your shipping options to the details object and finally, you have the options argument where you can you can decide what to ask during the you know checkout process if whether you want to ask the pair email ID name phone and shipping details all these are options you can keep all of them in then just the card will be there and you can you can decide based on what to do say for example, on the card you know where to ship already because it is users address is there with you and you do not want to ask him on the checkout process right. So, lot of edge cases have been thought through this API and it is pretty flexible and you have total control on what you want to show on what happens when the user clicks on. So, you need not have to write any extra logic to handle the different selection all of them are very need promise based APIs. Talk is cheap show me the fraud of course. So, I want to do a demo on my mobile we tried connecting it my pixel 2 is bit cranky I do not know why it was not able to detect. So, I got an idea of turning on my webcam and pointing my phone to the webcam so that you guys can see it on the screen. I have not tried this before let me see how it goes. Here is a simple demo which I have posted on my site. So, you guys can see it at least you are able to see the red checkout button. So, very bright I will probably go to the right mode and right I think this is fine. So, I have a checkout button you could you could do a thing as well you could if you have a mobile device or probably on your desktop also you can just go to hcmon.com slash demo slash payment refund request and this will load up. When I click checkout we basically see this dialog which says payment API request demo that is the title I have given and what is the card I already have and I could I could go and view the card. So, it shows the card which is there and I can go and edit or add a new card. So, adding card is pretty neat and it says these are the cards I have supported and it will validate for you whether the card is valid or not. So, you need not worry about doing all those validations. And after you add the card you just go ahead and hit the pay button and it says processing this I am just taking I do not have a server to process your card information, but you could you could definitely give me your card information. I would just ok here here is a deal it is asking for the CVV I would show you my CVV 1 2 3 easy and I just go and confirm and here we would see the JSON structure of what the response was. So, that was a demo experiment I will I will bring up the same here on the desktop it is not just the mobile web it here has the same experience I just wanted to show how good the pop-up looks within the mobile device. On the desktop is the same experience you have your payment option you can select the card and here are the details order summary and your friends and family discount I was talking about if we see it is in INR and I have given a discount of 500 rupees and then we just go and do a pay and it asks for CVV I hit confirm. So, we see this is what the response looks like. So, the method was a basic card the details had billing address address line 1 2 3 I was lazy to fill all the address. So, I just did that and and city was Bangalore current you get all the information you get my phone number as well and the card I will I have just masked here. So, you would basically on the response you would get the entire card number I have just masked it here for the demo and the security and you just go ahead and play here and let us see the code now. So, we will get more clarity on how it works should I just bump the fonts or is it ok. Yeah so, the magic happens with the init payment request. So, we are checking whether we have the payment request support in our browser or not if you have the support we will go and init the payment request. In init payment request we have networks like amix dinners discover all this master card visa and the types we have debit credit prepared and the method data which says supported methods is a basic card previously it was taken an array now it is like we have to just give a string which is like basic card that is what we are the basic card is what we are supporting in this use case and the data with supported networks with all the networks as mentioned above and supported types are the types like debit credit and prepaid. And the details object looks like this this is where I said buy some food from an Indian restaurant and currency is INR the value is so on. So, and the display items original amount friends and family discount. So, it is a very neat you know a structure. So, suppose they suppose they you would get you would get all this response from your service right. So, you are making a call your service gives your JSON. So, you could just massage it and put it put it your details object. So, it is very light on the front end. And then you have the payment request with method data and details I have not passed in the options here as the name says options is still optional where in options as I mentioned you could ask for the email address or phone number and things like that. So, I have a button here on clicking you on clicking off that button we would pass in the request. So, we would get the request here and request.show would result in this dialog box. So, request.show would result in the dialog box and that that is a promise with API. So, you would get the instrumented response that I was logging there you could pick up that instrumented response and pass to your server that is what we have to do to know whether the transaction went through or not. So, I am just faking the response faking the server call here just with some just some time off. And then we will get a complete success failure whether the transaction was successful or not on complete you will decide and pass a success on success I am just in this case I am just updating the DOM show the response right. So, it is a pretty easy thing to do. So, if you cancel the payment I am logging like a boarded request cancer. So, you could also just hit an escape and that would result in a cancel as well. So, any queries on this part of the code this here can you see it now. So, that is the here. So, in this use case I have not used options I will just. So, you could add options and see how it looks like I have definitely asked you to fiddle around with the code I just got a bell on the time. Hello. So, I was not really clear on where the payment actually happened like you got the response from the payment API was the payment already done by then. That is a good question it is not done. So, as I was been speaking this payment request API is just mediated does not do any payment for you, but handles all the hassles of filling the forms and collecting the card and stuff. It is abstracting the UI or the UX for the yes actually. If it does not. Basically payment gateway. Yeah. So, it you can assume that you have a big you had a big checkout form right basically where you would validate the card and everything all those processes handled by this and you just filling your card and if it is already added it you can just select the card and then in the response you will get all the information the card what was the amount and everything and you pick that and pass to your server and then your server will pass it on to the payment gateway and payment gateway will send the response and it takes the payment was successful or did it fail. I have also created a fiddle. Hemanthai. So, with this I mean when you mentioned that the payment service provider has to be PCI DSS compliant. Is he capturing the card details on the screen itself and then it is getting sent over the wire or how is it going to work? Yeah. So, there are two options here you enter the card details and it stays on your client. It does not it does not get stored anywhere it does not get you know stored in some server or something and it passes to the websites server call. So, there is there is no man in the middle attack I can expect that is what you are thinking sorry. So, if your your site is already a PCI compliant site and the obviously the provider would be if your site is already you would not be doing that and if you see all this online site where you can purchase there will be a certificate saying that these are the complaints we have. So, if that complaint is there they will make sure that it does not kind of leak over the abstraction or can get can happen a man in the middle attack and someone can steal your details that that will not really happen. And the other thing is you can authenticate with your say Google account and then you have saved your card details on your Google personal storage. So, that that details you can fetch up and say hey this is the card I see it will just be the last four digits and it will last for you for the cvp and you can hit there and it is like the token based authentication that happens. So, you have two different ways to do that. I have created one more fiddle where if you want you can go and play around in this fiddle and try to add different options and see how it behaves. In this case compared to the previous one it is a bit more verbose where you can choose the shipping address between these are all the shipping address that is saved in my Google Chrome browser right. So, these are all the shipping address and I can also choose my payment mode I can add a card the same process to be. And then I have my contact information here and like after I choose my shipping address this is the error scenario I was talking about it says you we cannot shift to this address. In this demo I wanted to show like how you could show whether you cannot can you shift to this address or not right. So, it is not like after paying or after going to the payment process we say hey sorry or it is this it says they are instantaneously. So, you can add a different address or choose a different address and after choosing you would get a payment method this fiddle I will probably tweet or something you can do or you can just go to jfiddle slash noomans and you will find it there. And probably you can you can take the conversation further offline and I am definitely I am happy to help and if I if I cannot get right answers I know folks few folks who are who are part of the development I can get interested in as well and see where it goes. Hope you like the payment request API and the web payments and hope you guys will use it on your you know mobile browsers and on your PWAs and make it even more sexy if I can call it. Thank you.