🏡 index : github.com/captn3m0/talks.git

author Nemo <me@captnemo.in> 2020-05-02 11:28:19.0 +05:30:00
committer Nemo <me@captnemo.in> 2020-05-02 11:28:19.0 +05:30:00
commit
945c4eccb4bf80985ba42c788ee625d8beb51e30 [patch]
tree
36380e4b4275b3d3238126e564e7698929c32f16
parent
e2ac12b718f77d194f3c7c7626e0e2e61dd80869
download
945c4eccb4bf80985ba42c788ee625d8beb51e30.tar.gz

Add samples and speakr notes



Diff

 webpayments/index.html | 111 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------
 webpayments/index.md   |  55 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 130 insertions(+), 36 deletions(-)

diff --git a/webpayments/index.html b/webpayments/index.html
index 3d93596..9719f18 100644
--- a/webpayments/index.html
+++ a/webpayments/index.html
@@ -14,7 +14,7 @@
(RFCs We Love, May 2020)</p>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="2" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="2" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="2" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="2" data-marpit-pagination-total="37" style="--paginate:true;">
<h1><code>whoami</code></h1>
<ul>
<li>Nemo <a href="mailto:me@captnemo.in">me@captnemo.in</a></li>
@@ -22,7 +22,7 @@
</ul>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="3" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="3" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>webpayments</h1>

<blockquote>
@@ -30,8 +30,9 @@
</blockquote>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="4" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="4" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="4" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="4" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>W3C</h1>

<ul>
<li>ActivityPub</li>
<li>CGI</li>
@@ -47,12 +48,12 @@
</ul>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="5" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="5" data-marpit-pagination-total="37" style="--paginate:true;">
<h1><a href="https://paymentrequest.show/demo">demo</a></h1>
<p>Before we start, let's do a quick demo of how it all comes together.</p>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="6" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="6" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="6" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="6" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>why?</h1>

<ul>
@@ -63,8 +64,9 @@
</ul>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="7" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="7" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="7" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="7" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>specifications*</h1>

<ul>
<li><a href="https://w3c.github.io/payment-request/">Payment Request API</a></li>
</ul>
@@ -85,7 +87,7 @@
<p>* working drafts</p>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="8" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="8" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>specifications*</h1>
<ul>
<li><a href="https://w3c.github.io/payment-request/">Payment Request API</a>: <em>how to initiate a payment</em></li>
@@ -95,43 +97,46 @@
</ul>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="9" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="9" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="9" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="9" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>Agenda</h1>

<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>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="10" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="10" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="10" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="10" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>Definitions</h1>

<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>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="11" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="11" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="11" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="11" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>Examples</h1>
<p><strong>payment method</strong>: Paytm Wallet Account, UPI, Card, Gift Card, Voucher Code, Bitcoin.</p>
<p><strong>Payment Method Identifier</strong>: <code>https://paytm.com</code>, <code>https://npci.org.in/upi</code>, <code>basic-card</code></p>
<p><strong>payment method provider</strong>: <code>Razorpay</code>, <code>Stripe</code>, <code>PayPal</code>, <code>NPCI/UPI</code>, <code>your-bank-goes-here</code></p>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="12" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="12" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="12" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="12" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>ecosytem overview</h1>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="13" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="13" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="13" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="13" data-marpit-pagination-total="37" style="--paginate:true;">
<p><img src="ecosystem2.png" alt="" /></p>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="14" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="14" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="14" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="14" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>Flow</h1>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="15" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="15" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="15" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="15" data-marpit-pagination-total="37" style="--paginate:true;">
<p><img src="flow.png" alt="" /></p>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="16" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="16" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="16" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="16" data-marpit-pagination-total="37" style="--paginate:true;">
<h1><a href="https://w3c.github.io/payment-method-id/">Payment Method Identifier</a></h1>

<ul>
<li>URL-based payment method identifier (say, <code>https://bitcoincore.org/</code> or <code>https://pay.wechat.com</code>).</li>
<li>or a standardized payment method identifier (currently only <code>basic-card</code> is on the registry).</li>
@@ -139,15 +144,16 @@
<p>humanized: how to identify and categorize various payment methods?</p>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="17" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="17" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="17" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="17" data-marpit-pagination-total="37" style="--paginate:true;">
<h1><a href="https://w3c.github.io/payment-method-manifest/">Payment Method Manifest</a></h1>

<blockquote>
<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>
</blockquote>
<p>humanized: defines the &quot;how-to-process&quot; action of a specific payment method. The one for <code>basic-card</code> is standardized in a <a href="https://w3c.github.io/webpayments-methods-card/">specification already</a>.</p>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="18" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="18" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="18" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="18" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>How to get to the manifest?</h1>
<pre><code><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap><span class="hljs-keyword">GET</span> <span class="hljs-string">/</span> HTTP/2
<span class="hljs-attribute">Host</span>: alicepay.com
@@ -158,7 +164,7 @@
<p>You can alternatively just redirect from your PMI URL, or serve the JSON directly on the PMI URL</p>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="19" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="19" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="19" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="19" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>What's inside a Manifest?</h1>
<p>A payment method manifest tells the user-agent &quot;how to process payments for a particular method&quot;.</p>
<p><code>URL: https://alicepay.com/pay/payment-manifest.json</code></p>
@@ -168,17 +174,27 @@
    <span class="hljs-string">"https://bobpay.xyz"</span>,
    <span class="hljs-string">"https://alicepay.friendsofalice.example"</span>
  ]
}
</span></span></foreignObject></svg></code></pre>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="20" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="20" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>Google Pay's Payment Method Manifest</h1>
<p><code>curl -A &quot;AppleWebKit/1 Chromium/1 Chrome/1&quot; https://pay.google.com/gp/p/payment_method_manifest.json</code></p>
<pre><code class="language-json"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>{
  <span class="hljs-attr">"default_applications"</span>: [<span class="hljs-string">"https://pay.google.com/gp/p/web_manifest.json"</span>],
  <span class="hljs-attr">"supported_origins"</span>: [<span class="hljs-string">"https://pay.google.com"</span>]
}
</span></span></foreignObject></svg></code></pre>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="20" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="20" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="21" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="21" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>what happens?</h1>
<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><code>supported_origins</code> defines which origins can be trusted to install an application for this payment method.</p>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="21" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="21" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="22" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="22" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>What's inside a Manifest (1)</h1>
<pre><code class="language-json"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>{
  <span class="hljs-comment">//...</span>
@@ -191,7 +207,7 @@
<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>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="22" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="22" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="23" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="23" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>What's inside a Manifest (2)</h1>
<pre><code class="language-json"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>{
  <span class="hljs-comment">//...</span>
@@ -201,7 +217,27 @@
<p>any third party is allowed to support the payment method.</p>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="23" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="23" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="24" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="24" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>Google Pay's Web Manifest</h1>
<p><em>Not part of the webpayments spec</em></p>
<p>URL: <code>https://pay.google.com/gp/p/web_manifest.json</code></p>
<p><img src="https://www.gstatic.com/instantbuy/icons/gpay_32.png" alt="" /></p>
<pre><code class="language-json"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>{
  <span class="hljs-attr">"short_name"</span>: <span class="hljs-string">"Google Pay"</span>,
  <span class="hljs-attr">"name"</span>: <span class="hljs-string">"Google Pay"</span>,
  <span class="hljs-attr">"icons"</span>: [{
    <span class="hljs-attr">"src"</span>: <span class="hljs-string">"https://www.gstatic.com/instantbuy/icons/gpay_24.png"</span>,
    <span class="hljs-attr">"sizes"</span>: <span class="hljs-string">"24x24"</span>
  },{
    <span class="hljs-attr">"src"</span>: <span class="hljs-string">"https://www.gstatic.com/instantbuy/icons/gpay_32.png"</span>,
    <span class="hljs-attr">"sizes"</span>: <span class="hljs-string">"32x32"</span>
  }],
  <span class="hljs-attr">"serviceworker"</span>: {
    <span class="hljs-attr">"src"</span>: <span class="hljs-string">"/gp/p/service_worker.js"</span>,
    <span class="hljs-attr">"use_cache"</span>: <span class="hljs-literal">true</span>
  }
}
</span></span></foreignObject></svg></code></pre>
<h1>recap</h1>
<p>So far, the user-agent has done the following:</p>
<ol>
@@ -214,7 +250,7 @@
<p>The application installation is based on W3C's <a href="https://www.w3.org/TR/appmanifest/">Web App Manifest specification</a>.</p>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="24" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="24" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="25" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="25" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>What's inside the Payment Handler?</h1>
<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>
<pre><code><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>PaymentManager {
@@ -231,7 +267,7 @@
</span></span></foreignObject></svg></code></pre>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="25" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="25" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="26" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="26" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>Payment Instrument</h1>
<p>Defines what all different instruments a user might have registered against this method (Multiple wallets, bank accounts, cards etc).</p>
<pre><code><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>PaymentInstrument {
@@ -247,7 +283,7 @@
</span></span></foreignObject></svg></code></pre>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="26" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="26" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="27" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="27" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>PaymentHandler API</h1>
<p>A payment handler listens on the <code>PaymentRequestEvent</code>, and returns a <code>PaymentHandlerResponse</code> once done.</p>
<pre><code><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>PaymentHandlerResponse {
@@ -262,9 +298,9 @@
</span></span></foreignObject></svg></code></pre>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="27" data-marpit-pagination-total="36" style="--paginate:true;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url(&quot;https://developers.google.com/web/fundamentals/payments/images/web-payment-apps/payment-handler-flow.png&quot;);background-size:contain;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="27" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="27" data-marpit-pagination-total="36" style="--paginate:true;" data-marpit-advanced-background="content"><footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="28" data-marpit-pagination-total="37" style="--paginate:true;" data-marpit-advanced-background="background"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url(&quot;https://developers.google.com/web/fundamentals/payments/images/web-payment-apps/payment-handler-flow.png&quot;);background-size:contain;"></figure></div></section></foreignObject><foreignObject width="1280" height="720"><section id="28" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="28" data-marpit-pagination-total="37" style="--paginate:true;" data-marpit-advanced-background="content"><footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="27" data-marpit-pagination-total="36"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="28" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="28" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section style="" data-marpit-advanced-background="pseudo" data-marpit-pagination="28" data-marpit-pagination-total="37"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="29" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="29" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>Payment Handler</h1>
<p>Each payment handler defines:</p>
<ol>
@@ -282,7 +318,7 @@
</blockquote>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="29" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="29" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="30" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="30" data-marpit-pagination-total="37" style="--paginate:true;">
<h1><a href="https://w3c.github.io/payment-request/">Payment Request API</a></h1>
<p>PaymentRequest interface</p>
<pre><code><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>id
@@ -300,7 +336,7 @@
</span></span></foreignObject></svg></code></pre>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="30" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="30" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="31" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="31" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>Native Applications?</h1>
<p>You can declare support for native applications via a few non-standardized changes to the payment method manifest:</p>
<pre><code class="language-json"><svg data-marp-fitting="svg" data-marp-fitting-code><foreignObject><span data-marp-fitting-svg-content><span data-marp-fitting-svg-content-wrap>{
@@ -318,14 +354,15 @@
</span></span></foreignObject></svg></code></pre>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="31" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="31" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="32" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="32" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>Native applications (2)</h1>
<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>
<p><img src="https://developers.google.com/web/fundamentals/payments/images/android-payment-apps/diagram5.png" alt="" /></p>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="32" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="32" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="33" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="33" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>In the Wild</h1>

<ul>
<li>Google Pay is already using Payments API to support cross-platform Payments, by declaring a new &quot;<a href="https://google.com/pay">https://google.com/pay</a>&quot; payment method.</li>
<li>Apple Pay runs in browsers <a href="https://webkit.org/blog/8182/introducing-the-payment-request-api-for-apple-pay/">using the Payment Request API</a>.</li>
@@ -336,7 +373,7 @@
<p>The &quot;Payment Handler&quot; for most of the above implementations is a close browser&lt;&gt;payment app coupling, with an application such as Samsung/Apple/Google Pay.</p>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="33" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="33" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="34" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="34" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>Current Status</h1>
<ul>
<li>All major browser implement Payment Request API to various degrees, primarily for the <code>basic-card</code> usecase.</li>
@@ -344,15 +381,16 @@
</ul>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="34" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="34" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="35" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="35" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>Future Scope</h1>
<ul>
<li>Installing a payment app is clunky, maybe we can just install the service-worker directly.</li>
<li>Lots of work happening towards standardization of non-card payments (such as SEPA, Tokenized Cards, credit-transfer).</li>
<li>Getting the drafts published as a W3C recommendation</li>
</ul>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="35" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="35" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="36" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="36" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>Questions?</h1>
<ul>
<li>Tweet to me <a href="https://twitter.com/captn3m0">@captn3m0</a></li>
@@ -360,17 +398,18 @@
</ul>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="36" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="36" data-marpit-pagination-total="36" style="--paginate:true;">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="37" data-paginate="true" data-footer="Slides: [captnemo.in/talks/webpayments](https://captnemo.in/talks/webpayments/)" data-marpit-pagination="37" data-marpit-pagination-total="37" style="--paginate:true;">
<h1>References</h1>
<ul>
<li><a href="https://www.w3.org/blog/wpwg/">Web Payments Working Group Blog</a></li>
<li><a href="https://www.w3.org/Payments/WG/charter-201912.html">Web Payments Working Group Charter</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API">Mozilla Developer Network docs</a></li>
<li><a href="https://github.com/w3c/payment-request-info">Developer information for Payment Request API</a></li>
</ul>
<footer>Slides: <a href="https://captnemo.in/talks/webpayments/">captnemo.in/talks/webpayments</a></footer>
</section>
<script>!function(){"use strict";function t(t){Array.from(document.getElementsByTagName("svg"),e=>{if(e.hasAttribute("data-marpit-svg")){const{clientHeight:r,clientWidth:a}=e;e.style.transform||(e.style.transform="translateZ(0)");const o=t||e.currentScale||1,i=e.viewBox.baseVal.width/o,n=e.viewBox.baseVal.height/o,s=Math.min(r/n,a/i);Array.from(e.querySelectorAll(":scope > foreignObject"),t=>{const e=t.x.baseVal.value,o=t.y.baseVal.value;Array.from(t.querySelectorAll(":scope > section"),t=>{t.style.transformOrigin||(t.style.transformOrigin="0 0");const l=(a-s*i)/2-e,c=(r-s*n)/2-o;t.style.transform=`translate3d(${l}px,${c}px,0) scale(${s}) translate(${e}px,${o}px)`})})}})}const e=(t,e,r)=>{if(t.getAttribute(e)!==r)return t.setAttribute(e,r),!0};function r(a=!0){for(const e of"Apple Computer, Inc."===navigator.vendor?[t]:[])e();Array.from(document.querySelectorAll('svg[data-marp-fitting="svg"]'),t=>{const r=t.firstChild,a=r.firstChild,{scrollWidth:o,scrollHeight:i}=a;let n,s=1;if(t.hasAttribute("data-marp-fitting-code")&&(n=t.parentElement.parentElement),t.hasAttribute("data-marp-fitting-math")&&(n=t.parentElement),n){const t=getComputedStyle(n),e=Math.ceil(n.clientWidth-parseFloat(t.paddingLeft)-parseFloat(t.paddingRight));e&&(s=e)}const l=Math.max(o,s),c=Math.max(i,1),p=`0 0 ${l} ${c}`;e(r,"width",""+l),e(r,"height",""+c),e(t,"preserveAspectRatio",getComputedStyle(t).getPropertyValue("--preserve-aspect-ratio")||"xMinYMin meet"),e(t,"viewBox",p)&&t.classList.toggle("__reflow__")}),a&&window.requestAnimationFrame(()=>r(a))}!function(){if("undefined"==typeof window)throw new Error("Marp Core's browser script is valid only in browser context.");window.marpCoreBrowserScript?console.warn("Marp Core's browser script has already executed."):(Object.defineProperty(window,"marpCoreBrowserScript",{value:!0}),r())}()}();
</script></foreignObject></svg></div><div class="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><div class="bespoke-marp-note" data-index="5" tabindex="0"><p>Bitcoin exists, and Amazon has been around for more than 2 decades, why do we need web payments?</p></div><div class="bespoke-marp-note" data-index="6" 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><div class="bespoke-marp-note" data-index="7" 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(){"use strict";var e=function(e,t){var n,r=1===(e.parent||e).nodeType?e.parent||e:document.querySelector(e.parent||e),s=[].filter.call("string"==typeof e.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){return e!==t}))},l=function(e,t){return(a[e]||[]).reduce((function(e,n){return e&&!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){var r=s.indexOf(n)+e;l(e>0?"next":"prev",o(n,t))&&c(r,t)},u={off:i,on:function(e,t){return(a[e]||(a[e]=[])).push(t),i.bind(null,e,t)},fire:l,slide:function(e,t){if(!arguments.length)return s.indexOf(n);l("slide",o(s[e],t))&&c(e,t)},next:d.bind(null,1),prev:d.bind(null,-1),parent:r,slides:s,destroy:function(e){l("destroy",o(n,e)),a={}}};return(t||[]).forEach((function(e){e(u)})),n||c(0),u};function t(e){e.parent.classList.add("bespoke-marp-parent"),e.slides.map(e=>e.classList.add("bespoke-marp-slide")),e.on("activate",t=>{e.slides.map(e=>e.classList.remove("bespoke-marp-active")),t.slide.classList.add("bespoke-marp-active")})}function n(e=2e3){return t=>{let n;function r(){n&&clearTimeout(n),n=setTimeout(()=>{t.parent.classList.add("bespoke-marp-inactive")},e),t.parent.classList.remove("bespoke-marp-inactive")}document.addEventListener("mousedown",r),document.addEventListener("mousemove",r),document.addEventListener("touchend",r),setTimeout(r,0)}}const r=["AUDIO","BUTTON","INPUT","SELECT","TEXTAREA","VIDEO"];function s(e){e.parent.addEventListener("keydown",e=>{if(!e.target)return;const t=e.target;(r.includes(t.nodeName)||"true"===t.contentEditable)&&e.stopPropagation()})}function a(e){window.addEventListener("load",()=>{for(const t of e.slides){const e=t.querySelector("[data-marp-fitting]")?"":"hideable";t.setAttribute("data-bespoke-marp-load",e)}})}function o(e){let t=0,n=0;Object.defineProperty(e,"fragments",{enumerable:!0,value:e.slides.map(e=>[null,...e.querySelectorAll("[data-marpit-fragment]")])});const r=r=>void 0!==e.fragments[t][n+r],s=(r,s)=>{t=r,n=s,e.fragments.forEach((e,t)=>{e.forEach((e,n)=>{if(null==e)return;const a=t<r||t===r&&n<=s;e.setAttribute("data-bespoke-marp-fragment",a?"active":"inactive"),t===r&&n===s?e.setAttribute("data-bespoke-marp-current-fragment","current"):e.removeAttribute("data-bespoke-marp-current-fragment")})}),e.fragmentIndex=s;const a={slide:e.slides[r],index:r,fragments:e.fragments[r],fragmentIndex:s};e.fire("fragment",a)};e.on("next",()=>{if(r(1))return s(t,n+1),!1;const a=t+1;e.fragments[a]&&s(a,0)}),e.on("prev",()=>{if(r(-1))return s(t,n-1),!1;const a=t-1;e.fragments[a]&&s(a,e.fragments[a].length-1)}),e.on("slide",({index:t,fragment:n})=>{let r=0;if(void 0!==n){const s=e.fragments[t];if(s){const{length:e}=s;r=-1===n?e-1:Math.min(Math.max(n,0),e-1)}}s(t,r)}),s(0,0)}var i,l=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e){
</script></foreignObject></svg></div><div class="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><div class="bespoke-marp-note" data-index="3" tabindex="0"><p>W3C is the internet-standards-body for the World Wide Web. You've likely used lots of their standards</p></div><div class="bespoke-marp-note" data-index="5" tabindex="0"><p>Bitcoin exists, and Amazon has been around for more than 2 decades, why do we need web payments?</p></div><div class="bespoke-marp-note" data-index="6" tabindex="0"><p>There are 4 published standards (all in draft stage) and a few more auxiliary publications from W3C's Web Payments Working Group</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>: 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><div class="bespoke-marp-note" data-index="7" 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><div class="bespoke-marp-note" data-index="8" tabindex="0"><p>While removing propreitary stuff isn't a goal for the specs, it is a byproduct.</p></div><div class="bespoke-marp-note" data-index="9" tabindex="0"><p>We'll be going bottomsup, and looking at the smallest building blocks first.</p></div><div class="bespoke-marp-note" data-index="15" tabindex="0"><p>You want a way to ensure that multiple payment processors work against the same initial payment request. Hence a need to standardize these identifiers.</p></div><div class="bespoke-marp-note" data-index="16" tabindex="0"><p>A payment method should be &quot;discoverable&quot;, and that implies a manifest of some sort where a user-agent can find more details about the payment method</p></div><div class="bespoke-marp-note" data-index="32" tabindex="0"><p>Is this available?</p></div><script>!function(){"use strict";var e=function(e,t){var n,r=1===(e.parent||e).nodeType?e.parent||e:document.querySelector(e.parent||e),s=[].filter.call("string"==typeof e.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){return e!==t}))},l=function(e,t){return(a[e]||[]).reduce((function(e,n){return e&&!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){var r=s.indexOf(n)+e;l(e>0?"next":"prev",o(n,t))&&c(r,t)},u={off:i,on:function(e,t){return(a[e]||(a[e]=[])).push(t),i.bind(null,e,t)},fire:l,slide:function(e,t){if(!arguments.length)return s.indexOf(n);l("slide",o(s[e],t))&&c(e,t)},next:d.bind(null,1),prev:d.bind(null,-1),parent:r,slides:s,destroy:function(e){l("destroy",o(n,e)),a={}}};return(t||[]).forEach((function(e){e(u)})),n||c(0),u};function t(e){e.parent.classList.add("bespoke-marp-parent"),e.slides.map(e=>e.classList.add("bespoke-marp-slide")),e.on("activate",t=>{e.slides.map(e=>e.classList.remove("bespoke-marp-active")),t.slide.classList.add("bespoke-marp-active")})}function n(e=2e3){return t=>{let n;function r(){n&&clearTimeout(n),n=setTimeout(()=>{t.parent.classList.add("bespoke-marp-inactive")},e),t.parent.classList.remove("bespoke-marp-inactive")}document.addEventListener("mousedown",r),document.addEventListener("mousemove",r),document.addEventListener("touchend",r),setTimeout(r,0)}}const r=["AUDIO","BUTTON","INPUT","SELECT","TEXTAREA","VIDEO"];function s(e){e.parent.addEventListener("keydown",e=>{if(!e.target)return;const t=e.target;(r.includes(t.nodeName)||"true"===t.contentEditable)&&e.stopPropagation()})}function a(e){window.addEventListener("load",()=>{for(const t of e.slides){const e=t.querySelector("[data-marp-fitting]")?"":"hideable";t.setAttribute("data-bespoke-marp-load",e)}})}function o(e){let t=0,n=0;Object.defineProperty(e,"fragments",{enumerable:!0,value:e.slides.map(e=>[null,...e.querySelectorAll("[data-marpit-fragment]")])});const r=r=>void 0!==e.fragments[t][n+r],s=(r,s)=>{t=r,n=s,e.fragments.forEach((e,t)=>{e.forEach((e,n)=>{if(null==e)return;const a=t<r||t===r&&n<=s;e.setAttribute("data-bespoke-marp-fragment",a?"active":"inactive"),t===r&&n===s?e.setAttribute("data-bespoke-marp-current-fragment","current"):e.removeAttribute("data-bespoke-marp-current-fragment")})}),e.fragmentIndex=s;const a={slide:e.slides[r],index:r,fragments:e.fragments[r],fragmentIndex:s};e.fire("fragment",a)};e.on("next",()=>{if(r(1))return s(t,n+1),!1;const a=t+1;e.fragments[a]&&s(a,0)}),e.on("prev",()=>{if(r(-1))return s(t,n-1),!1;const a=t-1;e.fragments[a]&&s(a,e.fragments[a].length-1)}),e.on("slide",({index:t,fragment:n})=>{let r=0;if(void 0!==n){const s=e.fragments[t];if(s){const{length:e}=s;r=-1===n?e-1:Math.min(Math.max(n,0),e-1)}}s(t,r)}),s(0,0)}var i,l=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e){
/*!
  * screenfull
  * v5.0.2 - 2020-02-13
diff --git a/webpayments/index.md b/webpayments/index.md
index b2136c4..c228c4a 100644
--- a/webpayments/index.md
+++ a/webpayments/index.md
@@ -33,6 +33,8 @@

# W3C

<!-- W3C is the internet-standards-body for the World Wide Web. You've likely used lots of their standards -->

- ActivityPub
- CGI
- CSS
@@ -66,6 +68,8 @@

# specifications*

<!-- There are 4 published standards (all in draft stage) and a few more auxiliary publications from W3C's Web Payments Working Group -->

- [Payment Request API](https://w3c.github.io/payment-request/)
<!-- : 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. -->
- [Payment Method Identifiers](https://w3c.github.io/payment-method-id/)
@@ -100,6 +104,8 @@
---


# Agenda

<!-- While removing propreitary stuff isn't a goal for the specs, it is a byproduct. -->

Try to understand how we can complete a payment entirely from within your browser _without relying on any proprietary APIs_ (as a processor/merchant), and yet _being compatible with any payment instrument_.

@@ -107,6 +113,8 @@

# Definitions

<!-- We'll be going bottomsup, and looking at the smallest building blocks first. -->

The **payment method**: the means that the payer uses to pay the payee (e.g., a basic card payment). They are uniquely identified via a **Payment Method Identifier** (PMI)

The **payment method provider** establishes the ecosystem to support that payment method.
@@ -144,6 +152,8 @@

# [Payment Method Identifier](https://w3c.github.io/payment-method-id/)

<!-- You want a way to ensure that multiple payment processors work against the same initial payment request. Hence a need to standardize these identifiers. -->

- URL-based payment method identifier (say, `https://bitcoincore.org/` or `https://pay.wechat.com`).
- or a standardized payment method identifier (currently only `basic-card` is on the registry).

@@ -152,6 +162,8 @@
---


# [Payment Method Manifest](https://w3c.github.io/payment-method-manifest/)

<!-- A payment method should be "discoverable", and that implies a manifest of some sort where a user-agent can find more details about the payment method -->

>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.


@@ -186,6 +198,19 @@
    "https://bobpay.xyz",

    "https://alicepay.friendsofalice.example"

  ]
}
```


---


# Google Pay's Payment Method Manifest

`curl -A "AppleWebKit/1 Chromium/1 Chrome/1" https://pay.google.com/gp/p/payment_method_manifest.json`

```json

{
  "default_applications": ["https://pay.google.com/gp/p/web_manifest.json"],
  "supported_origins": ["https://pay.google.com"]
}
```


@@ -227,7 +252,33 @@
any third party is allowed to support the payment method.

---


# Google Pay's Web Manifest

*Not part of the webpayments spec*

URL: `https://pay.google.com/gp/p/web_manifest.json`

![](https://www.gstatic.com/instantbuy/icons/gpay_32.png)

```json

{
  "short_name": "Google Pay",
  "name": "Google Pay",
  "icons": [{
    "src": "https://www.gstatic.com/instantbuy/icons/gpay_24.png",

    "sizes": "24x24"

  },{
    "src": "https://www.gstatic.com/instantbuy/icons/gpay_32.png",

    "sizes": "32x32"

  }],
  "serviceworker": {
    "src": "/gp/p/service_worker.js",

    "use_cache": true

  }
}
```


# recap

So far, the user-agent has done the following:
@@ -368,6 +419,8 @@
---


# In the Wild

<!-- Is this available? -->

- Google Pay is already using Payments API to support cross-platform Payments, by declaring a new "https://google.com/pay" payment method.
- Apple Pay runs in browsers [using the Payment Request API](https://webkit.org/blog/8182/introducing-the-payment-request-api-for-apple-pay/).
@@ -390,6 +443,7 @@

- Installing a payment app is clunky, maybe we can just install the service-worker directly.
- Lots of work happening towards standardization of non-card payments (such as SEPA, Tokenized Cards, credit-transfer).
- Getting the drafts published as a W3C recommendation

---


@@ -405,3 +459,4 @@
- [Web Payments Working Group Blog](https://www.w3.org/blog/wpwg/)
- [Web Payments Working Group Charter](https://www.w3.org/Payments/WG/charter-201912.html)
- [Mozilla Developer Network docs](https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API)
- [Developer information for Payment Request API](https://github.com/w3c/payment-request-info)