Firefox/Features/Web Payments: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
m (→‎2018'H1 (Jan.~): 2018 team end)
 
(22 intermediate revisions by 3 users not shown)
Line 1: Line 1:
== Introduction ==
== Introduction ==


The [https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API Payment Request API] makes online purchases easier without having to fill in all of the personal and payment information over and over again. Together with the [[Firefox/Features/Form_Autofill|form autofill feature]], it saves user's time and effort when making online purchases by storing their personal and payment information in Firefox to be used when a merchant requests payment.  The Payment Request UI provides consistency across merchant sites.
The [https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API Payment Request API] makes online purchases easier without having to manually fill personal and payment information for every purchase. Together with the [[Firefox/Features/Form_Autofill|form autofill feature]], it saves user's time and effort when making online purchases by storing their personal and payment information in Firefox to be used when a merchant requests payment.  The Payment Request UI provides consistency across merchant sites.


The overall objective is to increase user engagement, satisfaction, and retention for frequent online shoppers. We believe this can be achieved by enabling users to complete forms and “check out” in e-commerce flows as quickly and securely as possible.  
The [https://www.w3.org/TR/payment-handler/ Payment Handler API] builds upon Payment Request by providing a pluggable protocol (based on service workers) which facilitates purchasing through third party payment providers. Payment Handlers allows web-based payment applications to act as Payment Request payment methods which can be integrated into merchant websites.


The [https://www.w3.org/TR/payment-request/ W3C Payment Request API] is a Candidate Recommendation and has already been implemented in other major web browsers. The API is extensible to any payment method without requiring the browser to be Payment Card Industry (PCI) compliant.
=== Related Project Pages ===


== Status Summary ==
==== Project Tracking ====


=== Development Update - Milestones 4 Delivery - Tuesday December 11 ===
* Dashboard - ''TBD''
<p> </p>
Below is a weekly engineering development update.
<p> </p>
* Status: '''Green''' - In Development.
* Team has completed 23 out of 26 bugs required by the conclusion of Iteration #5 (Dec 10 - Dec 21) to remain on schedule.
* Team has completed 88% of the entire Milestone 4 Backlog which is forecast to be completed on December 21.
* View [https://docs.google.com/spreadsheets/d/19ZsqjD_H4fOjg7iPKBsMQ_toM1ywAvvd5hqvI0p1QGI/edit#gid=1990398980 Project Tracking Dashboard] for current schedule progress and backlog.
* Bugzilla Queries:
** [https://mzl.la/2GoDoCJ Work Currently In Development]
** [https://mzl.la/2FDB7b4 Available Project Work]
** [https://mzl.la/2CgrKvg Completed Project Work]
<p> </p>


=== Tentative plan for 2018’H2 ===  
==== Mana ====
* Frontend: Basic card UI implementation. Known dependencies include:
** 1. (Completed)  UX design reiteration V1.7: Jacqueline. (see also: Web Payment - Basic Card (MVP) design doc.
** 2. Front-end Resources: 3 Engineers
** 3. (Confirmed) Reviewer’s availability: MattN
** 4. (Confirmed) No other feature dependency (e.g., Any Lockbox dependency?)
** 5. (Confirmed) Compliance for Basic card UI (or that’s only for Payment Handler?)? e.g., PA-DSS by PA-QSA


* Platform: Ensure Payment Request APIs “ready to enable” (disable until FE ready) in Q3
* [https://mana.mozilla.org/wiki/display/SRC/Web+Payments Web Payments Project Page]
** API Compat. test coverage / compliance
** Basic card spec. implementation
** (Q3 and more) Marcos keeps working on W3C spec of both the Payment Handler/Request
** (Q3 and more) Bridging UI and the Request API (subject to FE’s actual progress), including 2 parts:
*** Connecting UI: ongoing and will complete in Q3;
*** IntegrationL requires FE completion to start (e.g., fix bugs during UI integration and verification on merchant website like WooCommerce).


=== Achievement in 2017'H1 ===  
==== Wiki ====
** (Done) Payment Request API development.
* [https://wiki.mozilla.org/Firefox/Features/Form_Autofill Form Autofill General]
** (Done) User research of Payment Request (Basic Card) UX.
* [https://wiki.mozilla.org/Firefox/Features/Form_Autofill/Credit_Cards Credit Card Autofill]
** (Done) Payment Request Handler API Proposal. It's been merged into the renamed Payment "Handler" API (was the Payment "App" API) spec.
* TBD Addresses


== Development ==
== Bugzilla ==
'''Preference:''' dom.payments.request.enabled
 
=== Bug Queries ===
* [https://mzl.la/3gGRi5t MVP Project Work Currently In Development]
* [https://mzl.la/38F5GbP Available MVP Project Work]
* [https://mzl.la/2CoG6LO Completed MVP Project Work]
* [https://mzl.la/3elwT4B Bugs Requiring Triage]
* [https://bugzilla.mozilla.org/buglist.cgi?component=WebPayments%20UI&product=Firefox&bug_status=__open__ Firefox :: WebPayments UI] ([https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=WebPayments%20UI&status_whiteboard=%5Bwebpayments%5D%20%5Btriage%5D file a bug])
* [https://bugzilla.mozilla.org/buglist.cgi?component=DOM%3A%20Web%20Payments&product=Core&bug_status=__open__&list_id=13533834 DOM: Web Payments]
 
=== Bug Tagging ===
* ph1-mvp: Whiteboard tag for MVP bugs team is commiting to complete within the schedule.
* ph1-reserve: Whiteboard tag for low-priority bugs the team is not committing to complete within the schedule.
* ph-triage: Whiteboard tag for bugs that require triage (clear this tag once triaged).


=== Front-end ===
=== Bug Lists ===
* Bugzilla Component: [https://bugzilla.mozilla.org/buglist.cgi?component=WebPayments%20UI&product=Firefox&bug_status=__open__ Firefox :: WebPayments UI] ([https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=WebPayments%20UI&status_whiteboard=%5Bwebpayments%5D%20%5Btriage%5D file a bug])
* [https://docs.google.com/spreadsheets/d/1oHoMGVe-FtKmzxMQO-0FhHAe625LxjcVd8m0jB3OF9g/edit#gid=0 Front-end Work Breakdown]
* [[Firefox/Features/Web_Payments/Privacy_%26_Security_Considerations|Privacy & Security Considerations]]
* [[Firefox/Features/Web_Payments/Tokenization | Tokenization]]
* [https://firefox-source-docs.mozilla.org/browser/components/payments/docs/index.html Developer Documentation]


==== Milestones ====
==== All MVP Bugs ====
[https://docs.google.com/spreadsheets/d/1oHoMGVe-FtKmzxMQO-0FhHAe625LxjcVd8m0jB3OF9g/edit#gid=1193040724 from the breakdown document]
* [https://mzl.la/3iNNpNR View Bugzilla Query].


;M1
<bugzilla>
:End-to-end test with valid user data and merchant update/change events, no Fx validation, generic merchant error string, only already stored cards/addresses
{
;M2
        "whiteboard": "ph1-mvp",      
:add/edit screens, only basic validation (e.g. non-empty) and address-field-specific merchant-provided errors
        "include_fields":"id, summary, status, assigned_to, priority"
;M3 (Q3)
}
:FTU, data validation & error recovery, ready to enable on Nightly-only / Partner / End-to-end User Testing (not riding the trains)
</bugzilla>
;M4 (Q4)
:tab modal payment sheet, handling spec additions (e.g. retry, merchant field-specific errors, and new events) and UI bug fixes (not polish), gathering user testing and merchant feedback
;Later
:a11y, address autofill de-duplication fixes, security edge cases, final strings, P1 telemetry probes, "update" badge, UI feature complete, ready for release users, visual polish/animations


=== [[Firefox/Features/Web_Payments/DOM|DOM]] ===
==== All Reserve Bugs ====
See [[Firefox/Features/Web_Payments/DOM]] for more info.
* [https://mzl.la/2ZR6mql View Bugzilla Query].
* Bugzilla Component: [https://bugzilla.mozilla.org/buglist.cgi?component=DOM%3A%20Web%20Payments&product=Core&bug_status=__open__&list_id=13533834 DOM: Web Payments]
* [https://groups.google.com/forum/#!topic/mozilla.dev.platform/n-2o58jcTK8 Intent to Implement]
* [https://docs.google.com/presentation/d/1gevKHz3q3s2WoKWdrgUGKm4XHeE-kGYwJVwdp4u3vuY/edit#slide=id.g11edd6636a_0_0 Platform implementation Architecture]
* Old
** [https://github.com/edenchuang/gecko-dev DOM Code WIP Repository]


== Quality Assurance ==
<bugzilla>
* Softvision is verifying bugs
{
        "whiteboard": "ph1-reserve",       
        "include_fields":"id, summary, status, assigned_to, priority"
}
</bugzilla>


== Project Members ==
==== Bugs Requiring Triage ====
* [https://mzl.la/3elwT4B View Bugzilla Query].


===== 2018 (Jan.~Dec.) =====
<bugzilla>
* Product: Cindy Hsiang
{
* User Experience: Jacqueline Savory (UX), Erin Pang (VisD)
        "whiteboard": "ph-triage",      
* User Research: Sharon Bautista
        "include_fields":"id, summary, status, assigned_to, priority"
* Front-End Engineering: Justin Dolske, Matthew Noorenberghe (Tech Lead), Jared Wein, Samuel Foster
}
* Platform Engineering: Marcos Caceres, Peter Saint-Andre
</bugzilla>
* Program Management: Jean Gong


===== 2017'H2 (Sep.~) =====
== Debugging Tips ==
* Product: Jeff Griffiths
* User Experience: Jacqueline Savory (UX)
* Engineering: Justin Dolske, Matthew Noorenberghe (Tech Lead), Marcos Caceres (Architect), Jared Wein, Samuel Foster
* Program Management: Jean Gong


===== 2017'H1 (~Aug.) =====
'''Preference:''' dom.payments.request.enabled
* Product: Joe Cheng
* User Experience: Juwei Huang (UX), Fang Shih (Visual)
* Engineering: Marcos Caceres (Architect), Ben Tian (TDC Tech Lead), Alphan Chen, Eden Chuang, Matthew Noorenberghe (Front-end oversight)
* Program Management: Wesly Huang


== Discussion ==
== Discussion ==


* IRC: #payments  
* Slack: #payments-team, #payments-leads
* [https://goo.gl/czomYf Weekly Meeting Notes]
* Chat: tbd
* Web Payments Mailing list: [mailto:webpayments@mozilla.com webpayments@mozilla.com]
* [https://docs.google.com/document/d/1aS-lhG91H0ukUI5fs88uAdAmYRSrPHM6IdTcVsN-DEc/edit# Weekly Meeting Notes]
* Auto Fill Public Mailing list: [mailto:autofill@lists.mozilla.org autofill@lists.mozilla.org]


== References ==
== References ==


* Product/Project
=== W3C Specifications ===
** [https://docs.google.com/document/d/1Rk6SIH_O_wab1CsphHhuwmvT8gXCG-D0B0ki0R3dmC4/edit?ts=577b1d52#heading=h.ifofy8kjhyvh Product Requirements (shared with “Form-autofill”)]
** [https://docs.google.com/document/d/14T4C_ToW2XSCaKeGIG3fGMcm5OTnM0Ra8cBzbht7xx0/edit Meeting Notes]
** [https://docs.google.com/document/d/1BYTSOJq7_CNJk5WZpRosN6nRV1jthteJtdPyu017o8E/edit# Meeting Notes (2016-12-29 to 2017-08-16)]
** [https://docs.google.com/spreadsheets/d/1rtWflNUMuAEch8x8Bzhozq5KzF2GBpxc2ubpYivj-88/edit#gid=228952903 Project Tracking]
 
* W3C Specifications
** [https://w3c.github.io/payment-request/ W3C Payment Request API Specification]
** [https://w3c.github.io/payment-request/ W3C Payment Request API Specification]
** [https://w3c.github.io/payment-handler/ W3C Payment Handler API Specification]
** [https://w3c.github.io/payment-handler/ W3C Payment Handler API Specification]


* User Experience
=== Product/Project ===
** [https://mozilla.invisionapp.com/share/YAFI31XR3KP Basic Card UX Spec] ([https://mozilla.invisionapp.com/share/BJBRO1O27 old v1.6])
* [[Firefox/Features/Web_Payments/Privacy_%26_Security_Considerations|Privacy & Security Considerations]]
** [https://mozilla.invisionapp.com/share/SDFY4PA4EQ7 Basic Card UI Spec]
* [https://firefox-source-docs.mozilla.org/browser/components/payments/docs/index.html In-Tree Developer Documentation]
** Old
* [https://docs.google.com/presentation/d/1gevKHz3q3s2WoKWdrgUGKm4XHeE-kGYwJVwdp4u3vuY/edit#slide=id.g11edd6636a_0_0 Payment Request Implementation Architecture (slides)]
*** [https://mozilla.invisionapp.com/share/RDAIXK5JZ Interaction Mockup]
 
*** [https://mozilla.invisionapp.com/share/QHBQ4VD9Z Visual Mockup]
=== User Experience ===
*** [https://marcoscaceres.github.io/web-payments-proto/ Prototype for User Research] [https://youwenliang.github.io/web-payment/ Version 2]
 
== Historical ==
 
Payment Request was originally developed in 2017 and 2018. Development was halted prior to shipping. Below are links to some of the resources associated with that project.
 
* [https://docs.google.com/document/d/1Rk6SIH_O_wab1CsphHhuwmvT8gXCG-D0B0ki0R3dmC4/edit?ts=577b1d52#heading=h.ifofy8kjhyvh Product Requirements (shared with “Form-autofill”)]
* [https://docs.google.com/document/d/14T4C_ToW2XSCaKeGIG3fGMcm5OTnM0Ra8cBzbht7xx0/edit Meeting Notes]
* [https://docs.google.com/document/d/1BYTSOJq7_CNJk5WZpRosN6nRV1jthteJtdPyu017o8E/edit# Meeting Notes (2016-12-29 to 2017-08-16)]
* [https://docs.google.com/spreadsheets/d/1rtWflNUMuAEch8x8Bzhozq5KzF2GBpxc2ubpYivj-88/edit#gid=228952903 Project Tracking]
* [https://mozilla.invisionapp.com/share/YAFI31XR3KP Basic Card UX Spec] ([https://mozilla.invisionapp.com/share/BJBRO1O27 old v1.6])
* [https://mozilla.invisionapp.com/share/SDFY4PA4EQ7 Basic Card UI Spec]
* [https://mozilla.invisionapp.com/share/RDAIXK5JZ Interaction Mockup]
* [https://mozilla.invisionapp.com/share/QHBQ4VD9Z Visual Mockup]
* [https://marcoscaceres.github.io/web-payments-proto/ Prototype for User Research] [https://youwenliang.github.io/web-payment/ Version 2]


[[Category:Firefox]]
[[Category:Firefox]]

Latest revision as of 15:24, 9 July 2020

Introduction

The Payment Request API makes online purchases easier without having to manually fill personal and payment information for every purchase. Together with the form autofill feature, it saves user's time and effort when making online purchases by storing their personal and payment information in Firefox to be used when a merchant requests payment. The Payment Request UI provides consistency across merchant sites.

The Payment Handler API builds upon Payment Request by providing a pluggable protocol (based on service workers) which facilitates purchasing through third party payment providers. Payment Handlers allows web-based payment applications to act as Payment Request payment methods which can be integrated into merchant websites.

Related Project Pages

Project Tracking

  • Dashboard - TBD

Mana

Wiki

Bugzilla

Bug Queries

Bug Tagging

  • ph1-mvp: Whiteboard tag for MVP bugs team is commiting to complete within the schedule.
  • ph1-reserve: Whiteboard tag for low-priority bugs the team is not committing to complete within the schedule.
  • ph-triage: Whiteboard tag for bugs that require triage (clear this tag once triaged).

Bug Lists

All MVP Bugs

Full Query
ID Summary Status Assigned to Priority
1616863 Payment Request dialog container styles broken RESOLVED Marcos Caceres [:marcosc] P1
1645972 PaymentRequest's show() must consume user activation RESOLVED --
1651600 Re-enable mochitests and wpt tests for Payment Request RESOLVED P5
1652639 Stub PaymentHandler DOM bindings to allow prototyping NEW P3
1654227 Enable web platform tests for Payment Request RESOLVED Marcos Caceres [:marcosc] P1

5 Total; 1 Open (20%); 4 Resolved (80%); 0 Verified (0%);


All Reserve Bugs

No results.

0 Total; 0 Open (0%); 0 Resolved (0%); 0 Verified (0%);


Bugs Requiring Triage

No results.

0 Total; 0 Open (0%); 0 Resolved (0%); 0 Verified (0%);


Debugging Tips

Preference: dom.payments.request.enabled

Discussion

References

W3C Specifications

Product/Project

User Experience

Historical

Payment Request was originally developed in 2017 and 2018. Development was halted prior to shipping. Below are links to some of the resources associated with that project.

Retrieved from "https://wiki.allizom.org/index.php?title=Firefox/Features/Web_Payments&oldid=1228925"