Fix payment initiation image, add basic flow text.
authorManu Sporny <msporny@digitalbazaar.com>
Tue, 24 Feb 2015 01:04:28 -0500
changeset 33 ee58e24f9328
parent 32 a62b32169249
child 34 1435830f8718
Fix payment initiation image, add basic flow text.
latest/use-cases/images/payment-initiation.svg
latest/use-cases/index.html
--- a/latest/use-cases/images/payment-initiation.svg	Sun Feb 22 23:11:08 2015 -0500
+++ b/latest/use-cases/images/payment-initiation.svg	Tue Feb 24 01:04:28 2015 -0500
@@ -1,74 +1,104 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
-<svg width="38cm" height="10cm" viewBox="156 13 752 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="42cm" height="10cm" viewBox="45 35 832 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <g>
-    <rect style="fill: #ffffff" x="159" y="46.3142" width="165" height="40"/>
-    <rect style="fill: none; fill-opacity:0; stroke-width: 4; stroke: #000000" x="159" y="46.3142" width="165" height="40"/>
-    <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="241.5" y="70.2142">
-      <tspan x="241.5" y="70.2142">Payer</tspan>
-    </text>
-  </g>
-  <g>
-    <rect style="fill: #ffffff" x="158.8" y="142.9" width="165" height="40"/>
-    <rect style="fill: none; fill-opacity:0; stroke-width: 4; stroke: #000000" x="158.8" y="142.9" width="165" height="40"/>
-    <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="241.3" y="166.8">
-      <tspan x="241.3" y="166.8">Payment Agent</tspan>
+    <rect style="fill: #ffffff" x="49" y="65.3142" width="165" height="42.6858"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 4; stroke: #000000" x="49" y="65.3142" width="165" height="42.6858"/>
+    <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="131.5" y="90.5571">
+      <tspan x="131.5" y="90.5571">Payer</tspan>
     </text>
   </g>
   <g>
-    <rect style="fill: #ffffff" x="647.6" y="15.9" width="86.4" height="195.1"/>
-    <rect style="fill: none; fill-opacity:0; stroke-width: 4; stroke: #000000" x="647.6" y="15.9" width="86.4" height="195.1"/>
-    <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="690.8" y="117.35">
-      <tspan x="690.8" y="117.35">Payee</tspan>
+    <rect style="fill: #ffffff" x="47.8" y="188.9" width="165" height="40"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 4; stroke: #000000" x="47.8" y="188.9" width="165" height="40"/>
+    <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="130.3" y="212.8">
+      <tspan x="130.3" y="212.8">Payment Agent</tspan>
     </text>
   </g>
-  <line style="fill: none; fill-opacity:0; stroke-width: 4; stroke-dasharray: 4; stroke: #000000" x1="241.5" y1="86.3142" x2="241.3" y2="142.9"/>
-  <text font-size="12.8" style="fill: #bbbbff;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="321.592" y="109.771">
-    <tspan x="321.592" y="109.771">Payer controls</tspan>
-    <tspan x="321.592" y="125.771">their Payment Agent</tspan>
+  <text font-size="12.8" style="fill: #bbbbff;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:700" x="216.592" y="134.771">
+    <tspan x="216.592" y="134.771">Payer controls their </tspan>
+    <tspan x="216.592" y="150.771">User Agent and their</tspan>
+    <tspan x="216.592" y="166.771">Payment Agents</tspan>
   </text>
-  <g>
-    <line style="fill: none; fill-opacity:0; stroke-width: 4; stroke: #000000" x1="324" y1="66.3142" x2="635.6" y2="64.7358"/>
-    <polygon style="fill: #000000" points="635.625,69.7357 645.6,64.6851 635.575,59.7358 "/>
-    <polygon style="fill: none; fill-opacity:0; stroke-width: 4; stroke: #000000" points="635.625,69.7357 645.6,64.6851 635.575,59.7358 "/>
-  </g>
-  <g>
-    <line style="fill: none; fill-opacity:0; stroke-width: 4; stroke: #000000" x1="647.6" y1="162.225" x2="335.8" y2="162.875"/>
-    <polygon style="fill: #000000" points="335.79,157.875 325.8,162.896 335.81,167.875 "/>
-    <polygon style="fill: none; fill-opacity:0; stroke-width: 4; stroke: #000000" points="335.79,157.875 325.8,162.896 335.81,167.875 "/>
-  </g>
-  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="393.536" y="42.3284">
-    <tspan x="393.536" y="42.3284">1. Payer selects product or</tspan>
-    <tspan x="393.536" y="58.3284">    service to purchase</tspan>
+  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="415.536" y="49.3284">
+    <tspan x="415.536" y="49.3284">1. Payer selects product or</tspan>
+    <tspan x="415.536" y="65.3284">    service to purchase</tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="401.1" y="152.5">
+    <tspan x="401.1" y="152.5">3. Payment Request is sent to</tspan>
+    <tspan x="401.1" y="168.5">    Payment Agent via User Agent</tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="213.8" y="129.15">
+    <tspan x="213.8" y="129.15"></tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="748.6" y="132">
+    <tspan x="748.6" y="132">2. Payee generates</tspan>
+    <tspan x="748.6" y="148">    Payment Request</tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="224.3" y="296.15">
+    <tspan x="224.3" y="296.15"></tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="312.736" y="56.5834">
+    <tspan x="312.736" y="56.5834"></tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="820.586" y="175.667">
+    <tspan x="820.586" y="175.667"></tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="650.024" y="120.93">
+    <tspan x="650.024" y="120.93"></tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="352.3" y="134.95">
+    <tspan x="352.3" y="134.95"></tspan>
+  </text>
+  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="102" y="125">
+    <tspan x="102" y="125"></tspan>
   </text>
   <g>
-    <polyline style="fill: none; fill-opacity:0; stroke-width: 4; stroke: #000000" points="734,64.675 773,65 773,162 746,162.156 "/>
-    <polygon style="fill: #000000" points="745.971,157.156 736,162.213 746.029,167.156 "/>
-    <polygon style="fill: none; fill-opacity:0; stroke-width: 4; stroke: #000000" points="745.971,157.156 736,162.213 746.029,167.156 "/>
+    <rect style="fill: #ffffff" x="621.6" y="37.9" width="86.4" height="195.1"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 4; stroke: #000000" x="621.6" y="37.9" width="86.4" height="195.1"/>
+    <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="664.8" y="139.35">
+      <tspan x="664.8" y="139.35">Payee</tspan>
+    </text>
   </g>
-  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="347.1" y="154.5">
-    <tspan x="347.1" y="154.5">3. Payment Request is sent to Payment Agent</tspan>
-  </text>
-  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="432.8" y="127.15">
-    <tspan x="432.8" y="127.15"></tspan>
-  </text>
-  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="779.6" y="105">
-    <tspan x="779.6" y="105">2. Payee generates</tspan>
-    <tspan x="779.6" y="121">    Payment Request</tspan>
+  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="664.8" y="135.45">
+    <tspan x="664.8" y="135.45"></tspan>
   </text>
-  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="443.3" y="294.15">
-    <tspan x="443.3" y="294.15"></tspan>
-  </text>
-  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="531.736" y="54.5834">
-    <tspan x="531.736" y="54.5834"></tspan>
+  <g>
+    <path style="fill: none; fill-opacity:0; stroke-width: 4; stroke-linejoin: round; stroke: #000000" d="M 741,96.675 A 10,10 0 0 0 731,86.675"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 4; stroke-linejoin: round; stroke: #000000" x1="708" y1="86.675" x2="731" y2="86.675"/>
+    <path style="fill: none; fill-opacity:0; stroke-width: 4; stroke-linejoin: round; stroke: #000000" d="M 733.575,184.225 A 7.42462,7.42462 0 0 0 741,176.8"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 4; stroke-linejoin: round; stroke: #000000" x1="741" y1="96.675" x2="741" y2="176.8"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 4; stroke-linejoin: round; stroke: #000000" x1="733.575" y1="184.225" x2="720" y2="184.225"/>
+    <polygon style="fill: #000000" points="720,179.225 710,184.225 720,189.225 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 4; stroke: #000000" points="720,179.225 710,184.225 720,189.225 "/>
+  </g>
+  <g>
+    <polyline style="fill: none; fill-opacity:0; stroke-width: 4; stroke: #000000" points="391.35,86.675 393.35,86.675 619.6,86.675 609.6,86.675 "/>
+    <polygon style="fill: #000000" points="609.6,91.675 619.6,86.675 609.6,81.675 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 4; stroke: #000000" points="609.6,91.675 619.6,86.675 609.6,81.675 "/>
+  </g>
+  <g>
+    <path style="fill: none; fill-opacity:0; stroke-width: 4; stroke-linejoin: round; stroke: #000000" d="M 506.724,184.225 A 8.72393,8.72393 0 0 0 498,192.949"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 4; stroke-linejoin: round; stroke: #000000" x1="621.6" y1="184.225" x2="506.724" y2="184.225"/>
+    <path style="fill: none; fill-opacity:0; stroke-width: 4; stroke-linejoin: round; stroke: #000000" d="M 492.36,208.9 A 5.63955,5.63955 0 0 0 498,203.26"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 4; stroke-linejoin: round; stroke: #000000" x1="498" y1="192.949" x2="498" y2="203.26"/>
+    <line style="fill: none; fill-opacity:0; stroke-width: 4; stroke-linejoin: round; stroke: #000000" x1="492.36" y1="208.9" x2="224.8" y2="208.9"/>
+    <polygon style="fill: #000000" points="224.8,203.9 214.8,208.9 224.8,213.9 "/>
+    <polygon style="fill: none; fill-opacity:0; stroke-width: 4; stroke: #000000" points="224.8,203.9 214.8,208.9 224.8,213.9 "/>
+  </g>
+  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="457" y="144">
+    <tspan x="457" y="144"></tspan>
   </text>
-  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="785.586" y="102.667">
-    <tspan x="785.586" y="102.667"></tspan>
+  <g>
+    <rect style="fill: #ffffff" x="296.25" y="37.9" width="95.1" height="195.1"/>
+    <rect style="fill: none; fill-opacity:0; stroke-width: 4; stroke: #000000" x="296.25" y="37.9" width="95.1" height="195.1"/>
+    <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="343.8" y="139.35">
+      <tspan x="343.8" y="139.35">User Agent</tspan>
+    </text>
+  </g>
+  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="562" y="157">
+    <tspan x="562" y="157"></tspan>
   </text>
-  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="869.024" y="118.93">
-    <tspan x="869.024" y="118.93"></tspan>
-  </text>
-  <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="690.8" y="113.45">
-    <tspan x="690.8" y="113.45"></tspan>
-  </text>
+  <line style="fill: none; fill-opacity:0; stroke-width: 4; stroke-dasharray: 4; stroke: #000000" x1="131.5" y1="108" x2="130.3" y2="188.9"/>
+  <line style="fill: none; fill-opacity:0; stroke-width: 4; stroke-dasharray: 4; stroke: #000000" x1="214" y1="86.6571" x2="296.25" y2="86.675"/>
 </svg>
--- a/latest/use-cases/index.html	Sun Feb 22 23:11:08 2015 -0500
+++ b/latest/use-cases/index.html	Tue Feb 24 01:04:28 2015 -0500
@@ -70,10 +70,12 @@
           // Team Contact.
           wgPatentURI:  "http://www.w3.org/2004/01/pp-impl/73816/status",
 
-          preProcess: [ webpayments.preProcess ]/*,
+          preProcess: [ webpayments.preProcess ]
+          /*,
           alternateFormats: [ {uri: "diff-20111214.html", label: "diff to previous version"} ],
           */
       };
+      //respecEvents.sub('start-all', webpayments.preProcess.apply);
     </script>
   </head>
 <body>
@@ -172,13 +174,9 @@
       <dt><tdef>payment agent</tdef></dt>
       <dd>
 A piece of software operating on an <tref title="entity">entity's</tref>
-behalf that is capable of executing
+behalf that is capable of executing 
 <tref title="transaction">transactions</tref>.
       </dd>
-      <dt><tdef></tdef></dt>
-      <dd>
-
-      </dd>
     </dl>
   </section>
 
@@ -198,8 +196,18 @@
       </p>
       <section>
         <h4>Basic Flow</h4>
-        <img style="display: block; margin-left: auto; margin-right: auto;
-  max-height:100%; max-width:75%;" src="images/payment-initiation.svg">
+        <ol style="float: left;">
+          <li>
+<tref>Payer</tref> selects product or service to purchase.
+          </li>
+          <li>
+<tref>Payee</tref> generates payment request.
+          </li>
+          <li>
+Payment request sent to <tref>payment agent</tref>.
+          </li>
+        </ol>
+        <img style="display: block; max-height:100%; min-width: 40em; max-width:60%;" src="images/payment-initiation.svg"></img>
       </section>
       <section>
         <h4>Examples</h4>