<!DOCTYPE html><htmllang="en-US"><head><title>Web Payment APIs</title><metaproperty="og:title"content="Web Payment APIs"><metaname="description"content="A short talk on Web Payment APIs"><metaproperty="og:description"content="A short talk on Web Payment APIs"><linkrel="canonical"href="https://captnemo.in/talks/webpayments/"><metaproperty="og:url"content="https://captnemo.in/talks/webpayments/"><metacharset="UTF-8"><metaname="viewport"content="width=device-width,height=device-height,initial-scale=1.0"><metaname="apple-mobile-web-app-capable"content="yes"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><metaproperty="og:type"content="website"><metaname="twitter:card"content="summary"><style>.bespoke-marp-note,.bespoke-marp-osc,.bespoke-progress-parent{display:none;transition:none}@mediascreen{body[data-bespoke-view=""].bespoke-marp-parent>.bespoke-marp-osc>button,body[data-bespoke-view=next].bespoke-marp-parent>.bespoke-marp-osc>button,body[data-bespoke-view=presenter].bespoke-marp-presenter-container.bespoke-marp-presenter-info-containerbutton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;color:inherit;cursor:pointer;font-size:inherit;opacity:.8;outline:none;padding:0;transition:opacity.2slinear;-webkit-tap-highlight-color:transparent}body[data-bespoke-view=""].bespoke-marp-parent>.bespoke-marp-osc>button:disabled,body[data-bespoke-view=next].bespoke-marp-parent>.bespoke-marp-osc>button:disabled,body[data-bespoke-view=presenter].bespoke-marp-presenter-container.bespoke-marp-presenter-info-containerbutton:disabled{cursor:not-allowed;opacity:.15!important}body[data-bespoke-view=""].bespoke-marp-parent>.bespoke-marp-osc>button:hover,body[data-bespoke-view=next].bespoke-marp-parent>.bespoke-marp-osc>button:hover,body[data-bespoke-view=presenter].bespoke-marp-presenter-container.bespoke-marp-presenter-info-containerbutton:hover{opacity:1}body[data-bespoke-view=""].bespoke-marp-parent>.bespoke-marp-osc>button:hover:active,body[data-bespoke-view=next].bespoke-marp-parent>.bespoke-marp-osc>button:hover:active,body[data-bespoke-view=presenter].bespoke-marp-presenter-container.bespoke-marp-presenter-info-containerbutton:hover:active{opacity:.6}body[data-bespoke-view=""].bespoke-marp-parent>.bespoke-marp-osc>button:hover:not(:disabled),body[data-bespoke-view=next].bespoke-marp-parent>.bespoke-marp-osc>button:hover:not(:disabled),body[data-bespoke-view=presenter].bespoke-marp-presenter-container.bespoke-marp-presenter-info-containerbutton:hover:not(:disabled){transition:none}body[data-bespoke-view=""].bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=next].bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=prev],body[data-bespoke-view=presenter].bespoke-marp-presenter-container.bespoke-marp-presenter-info-containerbutton.bespoke-marp-presenter-info-page-prev{background:transparenturl("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNNjggOTBMMjggNTBsNDAtNDAiLz48L3N2Zz4=")no-repeat50%;background-size:contain;overflow:hidden;text-indent:100%;white-space:nowrap}body[data-bespoke-view=""].bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=next].bespoke-marp-parent>.bespoke-marp-osc>button[data-bespoke-marp-osc=next],body[data-bespoke-view=presenter].bespoke-marp-presenter-container.bespoke-marp-presenter-info-containerbutton.bespoke-marp-presenter-info-page-next{background:transparenturl("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI1IiBkPSJNMzIgOTBsNDAtNDAtNDAtNDAiLz48L3N2Zz4=")no-repeat50%;background-size:contain;overflow:hidden;text-ind
<p>The goal is to create a safe, decentralized system and a set of open, patent and royalty-free specifications that allow people on the Web to send each other money as easily as they exchange instant messages and e-mail today.</p>
<p>Try to understand how we can complete a payment entirely from within your browser <em>without relying on any proprietary APIs</em> (as a processor/merchant), and yet <em>being compatible with any payment instrument</em>.</p>
<p>The <strong>payment method</strong>: the means that the payer uses to pay the payee (e.g., a basic card payment). They are uniquely identified via a <strong>Payment Method Identifier</strong> (PMI)</p>
<p>The <strong>payment method provider</strong> establishes the ecosystem to support that payment method.</p>
<p>The details of how to fulfill a payment request for a given payment method is an implementation detail of a <strong>payment handler</strong>, which is a Web application that can handle a request for payment on behalf of the user.</p>
<p>allows the curators of a defined payment method or owners of a proprietary payment method to authorize (via a manifest file) which payment handlers may be used to fulfill the payment method.</p>
<p>humanized: defines the "how-to-process" action of a specific payment method. The one for <code>basic-card</code> is standardized in a <ahref="https://w3c.github.io/webpayments-methods-card/">specification already</a>.</p>
<p><code>user-agent</code> can go next to <code>https://alicepay.com/pay/app/webappmanifest.json</code> to <em>install</em> the AlicePay application.</p>
<p>A payment application hosted at either <code>alicepay.com</code>, <code>beta.alicepay.com</code>, or <code>bobpay.com</code> is now authorized for the payment method <code>https://alicepay.com</code>.</p>
<p>A PaymentManager is an additional attribute to the <code>ServiceWorker</code> specification, which allows a piece of code to run/listen in background in your browser, even after the tab is closed.</p>
// Visa Card ending <spanclass="hljs-keyword">in</span> **<spanclass="hljs-number">1214</span>
<spanclass="hljs-type">name</span>;
// Visa icon
icons;
// PMI
<spanclass="hljs-keyword">method</span>;
// Can be used <spanclass="hljs-keyword">to</span><spanclass="hljs-keyword">restrict</span> card <spanclass="hljs-keyword">usage</span><spanclass="hljs-keyword">by</span> network <spanclass="hljs-keyword">for</span> eg.
<p>Instead of using service-workers now, your payment application can rely on platform-specific APIs for the same purpose. Android uses Intents, for eg.</p>
<li>Google Pay is already using Payments API to support cross-platform Payments, by declaring a new "<ahref="https://google.com/pay">https://google.com/pay</a>" payment method.</li>
<li>Apple Pay runs in browsers <ahref="https://webkit.org/blog/8182/introducing-the-payment-request-api-for-apple-pay/">using the Payment Request API</a>.</li>
<li>So does <ahref="https://medium.com/samsung-internet-dev/how-to-take-payments-on-the-web-with-the-payment-request-api-a523f6fc7c1f">Samsung Pay</a></li>
<li>Payment processors are adding support for it: <ahref="https://stripe.com/docs/payment-request-api">Stripe</a>, <ahref="https://developers.braintreepayments.com/guides/payment-request/overview">BrainTree</a>, <ahref="https://blog.worldline.tech/2018/07/25/new-web-standards.html">Worldline</a></li>
<li>Facebook implements it within their in-app browser for the Mobile SDK.</li>
</script></foreignObject></svg></div><divclass="bespoke-marp-note"data-index="2"tabindex="0"><p>Talk about all the innovations that have happened over the last 2 decades because of the internet and how none of them relate to money transfer (except for bitcoin)</p></div><divclass="bespoke-marp-note"data-index="5"tabindex="0"><p>: standardizes an API to allow merchants (i.e., Web sites selling physical or digital goods) to utilize one or more payment methods with minimal integration. User agents (e.g., browsers) facilitate the payment flow between merchant and user, mediating the user experience and providing consistency between different merchants and providers.</p><p>: defines the validation and (where applicable) registration of identifiers used for matching purposes by other W3C payments specifications.</p><p>:defines capabilities that enable Web applications to handle payment requests. The specification defines how Web-based payment handlers register their capabilities with the user agent, how the user agent communicates with them, and what information is exchanged. Note: Based on experience with the Payment Handler API, the Working Group is discussing creation of a new UI component where payments, authentication, and other activities can occur. This functionality would generalize some of the current payment-specific functionality of Payment Handler API.</p><p>: allows the curators of a defined payment method or owners of a proprietary payment method to authorize (via a manifest file) which payment handlers may be used to fulfill the payment method. The scope of this work extends to all types of payment handlers, including native mobile apps and Web apps.</p></div><divclass="bespoke-marp-note"data-index="6"tabindex="0"><p>- [Payment Request API](https://w3c.github.io/payment-request/)</p><p>: standardizes an API to allow merchants (i.e., Web sites selling physical or digital goods) to utilize one or more payment methods with minimal integration. User agents (e.g., browsers) facilitate the payment flow between merchant and user, mediating the user experience and providing consistency between different merchants and providers.</p><p>- [Payment Method Identifiers](https://w3c.github.io/payment-method-id/)</p><p>: defines the validation and (where applicable) registration of identifiers used for matching purposes by other W3C payments specifications.</p><p>- [Payment Handler API](https://w3c.github.io/payment-handler/)</p><p>:defines capabilities that enable Web applications to handle payment requests. The specification defines how Web-based payment handlers register their capabilities with the user agent, how the user agent communicates with them, and what information is exchanged. Note: Based on experience with the Payment Handler API, the Working Group is discussing creation of a new UI component where payments, authentication, and other activities can occur. This functionality would generalize some of the current payment-specific functionality of Payment Handler API.</p><p>- [Payment Method Manifest](https://w3c.github.io/payment-method-manifest/)</p><p>: allows the curators of a defined payment method or owners of a proprietary payment method to authorize (via a manifest file) which payment handlers may be used to fulfill the payment method. The scope of this work extends to all types of payment handlers, including native mobile apps and Web apps.</p></div><script>!function(){"usestrict";vare=function(e,t){varn,r=1===(e.parent||e).nodeType?e.parent||e:document.querySelector(e.parent||e),s=[].filter.call("string"==typeofe.slides?r.querySelectorAll(e.slides):e.slides||r.children,(function(e){return"SCRIPT"!==e.nodeName})),a={},o=function(e,t){return(t=t||{}).index=s.indexOf(e),t.slide=e,t},i=function(e,t){a[e]=(a[e]||[]).filter((function(e){returne!==t}))},l=function(e,t){return(a[e]||[]).reduce((function(e,n){returne&&!1!==n(t)}),!0)},c=function(e,t){s[e]&&(n&&l("deactivate",o(n,t)),n=s[e],l("activate",o(n,t)))},d=function(e,t){varr=s.indexOf(n)+e;l(e>0?"next":"prev",o(n,t))&&c(r,t)},u={off:i,on:funct