-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathUsageInstructions.html
More file actions
115 lines (80 loc) · 15.9 KB
/
UsageInstructions.html
File metadata and controls
115 lines (80 loc) · 15.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>UsageInstructions</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*
This document has been created with Marked.app <http://markedapp.com>, Copyright 2013 Brett Terpstra
Content is property of the document author
Please leave this notice in place, along with any additional credits below.
---------------------------------------------------------------
Title: GitHub
Author: Brett Terpstra
Description: Github README style. Includes theme for Pygmentized code blocks.
*/
html,body{color:black}*:not('#mkdbuttons'){margin:0;padding:0}#wrapper{font:13.34px helvetica,arial,freesans,clean,sans-serif;-webkit-font-smoothing:subpixel-antialiased;line-height:1.4;padding:3px;background:#fff;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}p{margin:1em 0}a{color:#4183c4;text-decoration:none}#wrapper{background-color:#fff;padding:30px;margin:15px;font-size:14px;line-height:1.6}#wrapper>*:first-child{margin-top:0!important}#wrapper>*:last-child{margin-bottom:0!important}@media screen{#wrapper{box-shadow:0 0 0 1px #cacaca,0 0 0 4px #eee}}h1,h2,h3,h4,h5,h6{margin:20px 0 10px;padding:0;font-weight:bold;-webkit-font-smoothing:subpixel-antialiased;cursor:text}h1{font-size:28px;color:#000}h2{font-size:24px;border-bottom:1px solid #ccc;color:#000}h3{font-size:18px;color:#333}h4{font-size:16px;color:#333}h5{font-size:14px;color:#333}h6{color:#777;font-size:14px}p,blockquote,table,pre{margin:15px 0}ul{padding-left:30px}ol{padding-left:30px}ol li ul:first-of-type{margin-top:0}hr{background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x 0 0;border:0 none;color:#ccc;height:4px;padding:0}#wrapper>h2:first-child{margin-top:0;padding-top:0}#wrapper>h1:first-child{margin-top:0;padding-top:0}#wrapper>h1:first-child+h2{margin-top:0;padding-top:0}#wrapper>h3:first-child,#wrapper>h4:first-child,#wrapper>h5:first-child,#wrapper>h6:first-child{margin-top:0;padding-top:0}a:first-child h1,a:first-child h2,a:first-child h3,a:first-child h4,a:first-child h5,a:first-child h6{margin-top:0;padding-top:0}h1+p,h2+p,h3+p,h4+p,h5+p,h6+p,ul li>:first-child,ol li>:first-child{margin-top:0}dl{padding:0}dl dt{font-size:14px;font-weight:bold;font-style:italic;padding:0;margin:15px 0 5px}dl dt:first-child{padding:0}dl dt>:first-child{margin-top:0}dl dt>:last-child{margin-bottom:0}dl dd{margin:0 0 15px;padding:0 15px}dl dd>:first-child{margin-top:0}dl dd>:last-child{margin-bottom:0}blockquote{border-left:4px solid #DDD;padding:0 15px;color:#777}blockquote>:first-child{margin-top:0}blockquote>:last-child{margin-bottom:0}table{border-collapse:collapse;border-spacing:0;font-size:100%;font:inherit}table th{font-weight:bold;border:1px solid #ccc;padding:6px 13px}table td{border:1px solid #ccc;padding:6px 13px}table tr{border-top:1px solid #ccc;background-color:#fff}table tr:nth-child(2n){background-color:#f8f8f8}img{max-width:100%}code,tt{margin:0 2px;padding:0 5px;white-space:nowrap;border:1px solid #eaeaea;background-color:#f8f8f8;border-radius:3px;font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;color:#333}pre>code{margin:0;padding:0;white-space:pre;border:0;background:transparent}.highlight pre{background-color:#f8f8f8;border:1px solid #ccc;font-size:13px;line-height:19px;overflow:auto;padding:6px 10px;border-radius:3px}pre{background-color:#f8f8f8;border:1px solid #ccc;font-size:13px;line-height:19px;overflow:auto;padding:6px 10px;border-radius:3px}pre code,pre tt{background-color:transparent;border:0}.poetry pre{font-family:Georgia,Garamond,serif!important;font-style:italic;font-size:110%!important;line-height:1.6em;display:block;margin-left:1em}.poetry pre code{font-family:Georgia,Garamond,serif!important;word-break:break-all;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto;white-space:pre-wrap}sup,sub,a.footnote{font-size:1.4ex;height:0;line-height:1;vertical-align:super;position:relative}sub{vertical-align:sub;top:-1px}@media print{body{background:#fff}img,pre,blockquote,table,figure{page-break-inside:avoid}#wrapper{background:#fff;border:0}code{background-color:#fff;color:#333!important;padding:0 .2em;border:1px solid #dedede}pre{background:#fff}pre code{background-color:white!important;overflow:visible}}@media screen{body.inverted{color:#eee!important;border-color:#555;box-shadow:none}.inverted #wrapper,.inverted hr .inverted p,.inverted td,.inverted li,.inverted h1,.inverted h2,.inverted h3,.inverted h4,.inverted h5,.inverted h6,.inverted th,.inverted .math,.inverted caption,.inverted dd,.inverted dt,.inverted blockquote{color:#eee!important;border-color:#555;box-shadow:none}.inverted td,.inverted th{background:#333}.inverted h2{border-color:#555}.inverted hr{border-color:#777;border-width:1px!important}::selection{background:rgba(157,193,200,0.5)}h1::selection{background-color:rgba(45,156,208,0.3)}h2::selection{background-color:rgba(90,182,224,0.3)}h3::selection,h4::selection,h5::selection,h6::selection,li::selection,ol::selection{background-color:rgba(133,201,232,0.3)}code::selection{background-color:rgba(0,0,0,0.7);color:#eee}code span::selection{background-color:rgba(0,0,0,0.7)!important;color:#eee!important}a::selection{background-color:rgba(255,230,102,0.2)}.inverted a::selection{background-color:rgba(255,230,102,0.6)}td::selection,th::selection,caption::selection{background-color:rgba(180,237,95,0.5)}.inverted{background:#0b2531;background:#252a2a}.inverted #wrapper{background:#252a2a}.inverted a{color:#acd1d5}}.highlight .c{color:#998;font-style:italic}.highlight .err{color:#a61717;background-color:#e3d2d2}.highlight .k,.highlight .o{font-weight:bold}.highlight .cm{color:#998;font-style:italic}.highlight .cp{color:#999;font-weight:bold}.highlight .c1{color:#998;font-style:italic}.highlight .cs{color:#999;font-weight:bold;font-style:italic}.highlight .gd{color:#000;background-color:#fdd}.highlight .gd .x{color:#000;background-color:#faa}.highlight .ge{font-style:italic}.highlight .gr{color:#a00}.highlight .gh{color:#999}.highlight .gi{color:#000;background-color:#dfd}.highlight .gi .x{color:#000;background-color:#afa}.highlight .go{color:#888}.highlight .gp{color:#555}.highlight .gs{font-weight:bold}.highlight .gu{color:#800080;font-weight:bold}.highlight .gt{color:#a00}.highlight .kc,.highlight .kd,.highlight .kn,.highlight .kp,.highlight .kr{font-weight:bold}.highlight .kt{color:#458;font-weight:bold}.highlight .m{color:#099}.highlight .s{color:#d14}.highlight .na{color:#008080}.highlight .nb{color:#0086b3}.highlight .nc{color:#458;font-weight:bold}.highlight .no{color:#008080}.highlight .ni{color:#800080}.highlight .ne,.highlight .nf{color:#900;font-weight:bold}.highlight .nn{color:#555}.highlight .nt{color:#000080}.highlight .nv{color:#008080}.highlight .ow{font-weight:bold}.highlight .w{color:#bbb}.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:#099}.highlight .sb,.highlight .sc,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx{color:#d14}.highlight .sr{color:#009926}.highlight .s1{color:#d14}.highlight .ss{color:#990073}.highlight .bp{color:#999}.highlight .vc,.highlight .vg,.highlight .vi{color:#008080}.highlight .il{color:#099}.highlight .gc{color:#999;background-color:#eaf2f5}.type-csharp .highlight .k,.type-csharp .highlight .kt{color:#00F}.type-csharp .highlight .nf{color:#000;font-weight:normal}.type-csharp .highlight .nc{color:#2b91af}.type-csharp .highlight .nn{color:#000}.type-csharp .highlight .s,.type-csharp .highlight .sc{color:#a31515}
</style>
</head>
<body class="normal">
<div id="wrapper">
<h1 id="howtousethephotopaycloudapp">How to use the PhotoPay Cloud App</h1>
<p>This is a short guide on how to use the <strong>PhotoPay Cloud</strong> app for simple and easy bill payment. We offer three different use-cases for paying paper or electronic bills, and we wil describe these use-cases here.</p>
<h2 id="firstrun">1. First run</h2>
<p>On the first run of the app you will be asked to register your email address. This address will be used
as your ID so we can identify your bills. It will also be used in the e-mail use case.</p>
<blockquote>
<p>Note: we will not send advertising to this address :) </p>
</blockquote>
<p><img src="Usage/register.png" alt="Registering e-mail address" style="width: 280px;"/></p>
<p>After you enter the address, you will see our home view - a place where your bills and documents are
stored.</p>
<p><img src="Usage/home_empty.png" alt="Home view" style="width: 280px;"/></p>
<h2 id="payingpaperbillsbytakingphotos">2. Paying paper bills by taking photos</h2>
<p>To pay a paper bill, launch the camera by tapping the big red camera button in the home view. Put the
bill on a flat surface, and position the camera so that the whole bill is visible in the photo. Keep the
device flat above the bill and wait for the camera to focus. When the photo looks sharp, take a photo
and confirm it. You can retake a photo if some parts of the bill are not visible on the photo or if it turns
out blurry.</p>
<p><img src="Usage/take_bill_photo.png" alt="Taking a bill photo" style="width: 520px;"/></p>
<p>The upload to the <strong>PhotoPay</strong> processing server starts after confirming the photo. Depending on your internet connection, it might take a few seconds, as the size of the photo is typically 100–200 kB.</p>
<p><img src="Usage/photo_upload.png" alt="Photo upload" style="width: 280px;"/></p>
<p>After uploading completes, document is queued for processing. Processing includes image enhancement, optical character recognition and payment data extraction. When the processing is done (typically in about 10–15 seconds), the document will automatically be refreshed in home view. You can examine payment details by tapping the document in home view and there you can make the payment.</p>
<blockquote>
<p>Note: the actual payment is currently not performed, as this is usually performed by a mobile banking app.</p>
</blockquote>
<p><img src="Usage/processing_done.png" alt="Processing is done" style="width: 280px;"/>
<img src="Usage/bill_details.png" alt="Bill details" style="width: 280px;"/></p>
<p>Payment data verification is a required step. Our processing server has a high data extraction accuracy, but 100% accuracy is technically impossible to achieve. That is why our app has an easy way to edit payment data or to select one of multiple values returned by the processing server (by pressing the arrow button besides a specific payment field that had multiple possible values detected).</p>
<p>If you have more than one paper bill to pay, you do not need to wait until the first bill is processed to send photos of other bills. Just take a photo of a bill, send it, take the next photo, send that one, etc. Upload and processing is performed simultaneously in the background.</p>
<p><img src="Usage/photo_upload_multiple.png" alt="Uploading multiple photos" style="width: 280px;"/>
<img src="Usage/home_bills_ready.png" alt="Bills ready" style="width: 280px;"/></p>
<h2 id="payingbillsattachedtoe-mails">3. Paying bills attached to e-mails</h2>
<p>Paying bills attached to e-mail has never been easier. Simply forward the bill with attached invoice to mybills@cloudbeta.photopay.net and that is it. The <strong>PhotoPay</strong> processing server will receive your email, identify you as the sender by the e-mail address that you entered previously, and when the payment data extraction is finished, notify the iOS app that the new bill is ready for payment.</p>
<p><img src="Usage/mailbox_bill.png" alt="E-mail with attached bill" style="width: 280px;"/>
<img src="Usage/forward_bill.png" alt="Forwarding the bill" style="width: 280px;"/>
<img src="Usage/notification.png" alt="Notification that the bill is ready" style="width: 280px;"/></p>
<p>That is why we required the email address on the first app run. That address is linked with the user account and used to identify which user has sent the e-mail with an attached bill. This means that PhotoPay can only process bills sent from registered e-mail addresses.</p>
<p>Also, the <strong>PhotoPay</strong> processing server performs e-mail sender verification. We use SPF and DKIM systems to check if the sender is really who he says he is. This means no email spoofing and no payment fraud.</p>
<p>(Note: Currently the <strong>PhotoPayCloud</strong> processing server supports only PDF and TXT documents. But support for other formats (.doc, .xls, .html, .xml, etc) will also be added in the future, as they are also often used as bill document formats.)</p>
<h2 id="openin">4. “Open In…”</h2>
<p>There is one more way to pay a bill using <strong>PhotoPay Cloud</strong>. For example, if someone shares a bill with you on Dropbox, you can open that bill in Dropbox app, press the “Share” button (as showed on the image down below), choose “Open In…” option, and select “Open in PhotoPay”. This will launch <strong>PhotoPay Cloud</strong> app, send that bill to <strong>PhotoPay</strong> processing server, and notify you when the payment data extraction is done. Typically, for PDF documents, this takes 2–3 seconds.</p>
<p><img src="Usage/dropbox_bills.png" alt="Dropbox bills" style="width: 280px;"/>
<img src="Usage/orange_bill.png" alt="Orange bill" style="width: 280px;"/>
<img src="Usage/share.png" alt="Sharing the bill" style="width: 280px;"/>
<img src="Usage/open_in.png" alt="Open it in PhotoPay" style="width: 280px;"/>
<img src="Usage/orange_received.png" alt="Orange bill is ready to be paid" style="width: 280px;"/></p>
<p>The “Open In…” feature of iOS is used by many iOS apps. You can open a bill with <strong>PhotoPay Cloud</strong> from any of them - we used Dropbox as just one example. So if you use some other applications, e.g the Safari web browser, Google Drive, etc, the bill payment is just as easy.</p>
<h2 id="archiveofbills">5. Archive of bills</h2>
<p>All paid bills are archived in the Archive section of the Home view. This is a secure and reliable storage
for all bills you have ever paid. The original bill, or a photo of a bill is also saved, so you can always go
back and review that information and never lose your payment history.</p>
<p><img src="Usage/archive.png" alt="Bill archive" style="width: 280px;"/></p>
<h2 id="wrapup">6. Wrap up</h2>
<p><strong>PhotoPay Cloud</strong> provides not just unmatched simplicity when paying bills, but also an complete archive of bills and bill payments, which is an great value by itself. </p>
<p>Let us know what you think about these use-cases on <a href="mailto:info@photopay.net">info@photopay.net</a>.</p>
</div>
</body>
</html>