Firefox/Features/Web Payments

From MozillaWiki
Jump to: navigation, search

Introduction

The 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 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 W3C PaymentRequest API is currently in draft stage and has momentum. The API is extensible to any payment source without requiring the browser to be Payment Card Industry (PCI) compliant.

Status Summary

Development Update - Milestones 1 - 3 Delivery

Below is a weekly engineering development update.

May 21 Update

  • Status: Green - In Development.
  • Team is currently working on Iteration #4 which runs from May 14 - May 25.
  • A cumulative completion of 20 bugs is required by the conclusion of Iteration #4 to remain on schedule.
  • Team has, to date, a cumulative completion of 26 bugs for Iteration #4.
  • Team has completed 74% of the entire Milestone 1 - 3 Backlog.
  • The forecast completion of the entire Milestone 1 - 3 Backlog is on August 17.
  • View Project Tracking Dashboard for current schedule progress and backlog.
Updated Weekly. Current Update - Monday May 21.

Work Currently In Development

Full Query
ID Priority Summary Status Assigned to
1408234 P1 PaymentRequestService doesn't clear requests from closed documents ASSIGNED EdenChuang(ChenYu Chuang)
1420853 P1 Ensure only fields valid for the given country are saved ASSIGNED Scott Wu [:scottwu]
1429260 P1 Handle request changes with updateWith - verify that state stays consistent ASSIGNED Sam Foster [:sfoster]
1435892 P1 Implement the basic first-time-use wizard state logic and footer buttons ASSIGNED :prathiksha
1461477 P1 Duplicate implementations of the Luhn algorithm exist in the tree ASSIGNED Jared Wein [:jaws] (please needinfo? me)
1462461 P1 Show the back button in the basic card page during on-boarding ASSIGNED :prathiksha
1462779 P1 Show the billing address page on on-boarding when requestShipping is false and there are no saved addresses ASSIGNED :prathiksha
1463608 P1 Required `name` property is missing on temporary PR addresses ASSIGNED Sam Foster [:sfoster]

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

Work Available in Backlog

Full Query
ID Priority Summary Status
1427961 P2 Do basic shipping address validation in the Payment Request dialog NEW
1429181 P2 Credit card type detection and validation upon input NEW
1429198 P2 Only allow users to select payments cards of the requested supportedTypes (credit/debit/prepaid) and supportedNetworks NEW
1438784 P2 WebPayments UI accessibility review NEW
1442453 P2 A TypeError is thrown and the payment service can get in a broken state if two requests are used in one document NEW
1446577 P2 Placeholder bug for <rich-select> UI/UX polish NEW
1447773 P2 Time out the PaymentResponse object after 5 seconds, behaving as if complete() was called with no arguments NEW
1447777 P2 Handle the "timeout" completeStatus that is set when PaymentResponse.complete is not called NEW
1460425 P2 Decide on what process the unprivileged PaymentRequest UI should live in NEW
1463545 P2 Replace grid layout of <rich-option> subclasses with new UI spec NEW
1463554 P2 Use native <option> UI with <rich-select> in the open state NEW
1464221 P2 Investigate effort required to make the window modal Payment Request dialog usable NEW

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

Completed Work

Full Query
ID Priority Summary Status Assigned to
1387221 P1 Shipping Address selector for when profiles exist in autofill storage RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1417698 P1 Use mozilla recommended eslint rules and remove rules duplicating those recommendations RESOLVED Nathan
1422164 P1 Create a rich-select Custom Element RESOLVED Jared Wein [:jaws] (please needinfo? me)
1427936 P1 Basic Payment Request Display Items list UI RESOLVED Sam Foster [:sfoster]
1427939 P1 Show additional list items (`additionalDisplayItems`) tied to payment methods in the UI RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1427945 P1 Implement a Payment Request Shipping Option Picker RESOLVED Jared Wein [:jaws] (please needinfo? me)
1427947 P1 Dispatch `shippingoptionchange` when the shipping option is changed RESOLVED Jared Wein [:jaws] (please needinfo? me)
1427950 P1 Implement a multi-line PaymentRequest shipping address picker RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1427954 P1 Factor the address and card edit forms out of the autofill edit dialogs to share with PaymentRequest VERIFIED Matthew N. [:MattN] (PM if requests are blocking you)
1427958 P1 Dispatch shippingaddresschange when selected shipping address is changed outside of dialog RESOLVED Sam Foster [:sfoster]
1427959 P1 Show field-specific shippingaddresschange errors on the add/edit screen RESOLVED Jared Wein [:jaws] (please needinfo? me)
1427960 P1 Add a Save the Address to Firefox toggle to the Add Address page RESOLVED Sam Foster [:sfoster]
1428152 P1 Setting a customElement observedAttribute property to false should remove the attribute RESOLVED Jared Wein [:jaws] (please needinfo? me)
1428414 P1 Initial Payment Request Basic Credit Card Add/Edit page RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1428415 P1 Add a "Save to Firefox" toggle to the Add Payment Card page RESOLVED Sam Foster [:sfoster]
1428472 P1 Default to the selected shipping address (if applicable) on the "add basic card" screen RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1429180 P1 Option to use a new billing address when adding a new payment card RESOLVED Jared Wein [:jaws] (please needinfo? me)
1429189 P1 Show shipping address errors on the summary screen RESOLVED Jared Wein [:jaws] (please needinfo? me)
1429195 P1 Implement the PaymentRequest payment card selector with the security code input RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1429205 P1 Implement the "processing" screen for when the pay button is clicked RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1429207 P1 Implement the "failure" screen for when the merchant rejects the payment and doesn't request retrying RESOLVED Jared Wein [:jaws] (please needinfo? me)
1429211 P1 Implement the "success" screen for when the merchant accepts the payment RESOLVED Jared Wein [:jaws] (please needinfo? me)
1429213 P1 Implement the "unknown"/timeout screen for when the merchant rejects the payment and doesn't request retrying RESOLVED Jared Wein [:jaws] (please needinfo? me)
1430200 P1 Add a mutation observer to rich-select to re-render when child options are added/removed RESOLVED Jared Wein [:jaws] (please needinfo? me)
1431368 P1 Change from keypress to keydown per standards change RESOLVED Jared Wein [:jaws] (please needinfo? me)
1431482 P1 Create and hook up the "View all items" button RESOLVED Sam Foster [:sfoster]
1432079 P1 Implement support for PaymentItem type member RESOLVED Henri Sivonen (:hsivonen)
1432921 P1 Show an address input form before the summary view for users without a saved address RESOLVED :prathiksha
1432927 P1 Show a payment card input form before the summary view for users without a saved payment card RESOLVED :prathiksha
1432952 P1 Add the ability to associate a saved billing address with a payment card in the add/edit card form RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1434415 P1 Move all hard-coded PaymentRequest strings to localization files RESOLVED Jared Wein [:jaws] (please needinfo? me)
1434443 P1 Send the selected address to the webpage as part of the PaymentResponse RESOLVED Jared Wein [:jaws] (please needinfo? me)
1434508 P1 paymentDetails and paymentMethods serialization RESOLVED Sam Foster [:sfoster]
1434839 P1 Rename some payments variables and files and add a button to debug the remote frame to ease development RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1435101 P1 Only show shipping (option & address) pickers in the payment request dialog when requestShipping is true RESOLVED Jared Wein [:jaws] (please needinfo? me)
1435105 P1 Vary the payment request address label according to the `shippingType` RESOLVED Jared Wein [:jaws] (please needinfo? me)
1435155 P1 Redact the full shipping address from the shippingaddresschange event RESOLVED Henri Sivonen (:hsivonen)
1435157 P1 Support fine-grained address field errors for PaymentRequest RESOLVED EdenChuang(ChenYu Chuang)
1435316 P1 Missing stylesheet for display items list RESOLVED Sam Foster [:sfoster]
1436903 P1 Shipping options are passed to the front-end even if requestShipping isn't true RESOLVED Henri Sivonen (:hsivonen)
1437879 P1 The shipping-option-picker doesn't show the selected option when the popup is closed RESOLVED Jared Wein [:jaws] (please needinfo? me)
1440041 P1 If changeShippingOption isn't called, the last selected=true option should be selected in the PaymentResponse RESOLVED EdenChuang(ChenYu Chuang)
1440499 P1 Implement the payerName/payerEmail/payerPhone contact picker RESOLVED Sam Foster [:sfoster]
1440504 P1 Basic Payment Request Contact/Payer Add/Edit page RESOLVED Jared Wein [:jaws] (please needinfo? me)
1440530 P1 Clean up some duplication in the webpayments mochitest-browser tests for setting up dialogs RESOLVED Jared Wein [:jaws] (please needinfo? me)
1440843 P1 Don't dispatch shipping*change events if requestShipping is false RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1441683 P1 response.complete() does not make the completeStatus available to the payment UI service RESOLVED Jared Wein [:jaws] (please needinfo? me)
1441692 P1 Add error option to the PaymentRequest debug panel RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1441709 P1 PaymentRequest.show() should take an optional details update promise RESOLVED EdenChuang(ChenYu Chuang)
1442078 P1 PaymentRequest.show() must only be triggered by user activation RESOLVED Jonathan Guillotte-Blouin [:jonathanGB]
1442724 P1 Use keydown instead of keypress to trigger display of the debugging panel RESOLVED Sam Foster [:sfoster]
1442757 P1 Forgot to call `sendMessageToContent` helper in "paymentDialogWrapper.js" RESOLVED Jonathan Guillotte-Blouin [:jonathanGB]
1443732 P1 Document the need to have e10s enabled for Web Payments RESOLVED Henri Sivonen (:hsivonen)
1443735 P1 Require non-Cancel address-related user interaction on the payment sheet before firing shippingaddresschange RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1443914 P1 Stale shipping options are passed to the front-end after an .updateWith() with no shipping options RESOLVED EdenChuang(ChenYu Chuang)
1444240 P1 Filter contacts in pickers to avoid duplicates and empty entries RESOLVED Sam Foster [:sfoster]
1444949 P1 Console logging for unprivileged payment dialog code RESOLVED Sam Foster [:sfoster]
1446179 P1 Use ES Modules for the unprivileged Payment Request dialog code RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1446203 P1 Basic Payment Request Shipping Address Add/Edit page RESOLVED Jared Wein [:jaws] (please needinfo? me)
1451143 P1 Intermittent toolkit/components/payments/test/browser/browser_card_edit.js | Check updated cc-name - "J. Smith" == "A. Nonymous" - RESOLVED Jared Wein [:jaws] (please needinfo? me)
1451179 P1 build failure on Linux: RuntimeError: File "../../../../browser/extensions/formautofill/content/autofillEditForms.js" not found RESOLVED Masayuki Nakano [:masayuki] (JST, +0900)
1454129 P1 Use nsIPaymentRequest.shippingOption to determine the selected shipping option RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1455151 P1 Support subdialog sizing of HTML documents from a stylesheet and use it for autofill edit dialogs RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1457287 P1 Move Payment Request UI code to browser/ RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1457316 P1 TypeError: window.parent.paymentRequest is undefined from payments debugging panel RESOLVED Sam Foster [:sfoster]
1457317 P1 Show a title for the add/edit pages RESOLVED Jared Wein [:jaws] (please needinfo? me)
1458376 P1 <select> popups aren't visible inside the Payment Request dialog RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1459253 P1 Hide the 'View All Items' button when there are no display items RESOLVED :prathiksha
1461455 P1 Show the total header in FTU wizard pages RESOLVED :prathiksha
1461886 P1 Pass appropriate properties to the FTU onboarding address page RESOLVED :prathiksha
1462149 P1 Use &brandShortName; instead of hard-coded "Firefox" in strings for the payments UI RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1463292 P1 Make form autofill's l10n.js work in the PaymentRequest dialog until we have Fluent RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)

72 Total; 0 Open (0%); 71 Resolved (98.61%); 1 Verified (1.39%);

Tentative plan for 2018’H2

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

    • (Done) Payment Request API development.
    • (Done) User research of Payment Request (Basic Card) UX.
    • (Done) Payment Request Handler API Proposal. It's been merged into the renamed Payment "Handler" API (was the Payment "App" API) spec.

Development

Preference: dom.payments.request.enabled

Front-end

Milestones

from the breakdown document

M1
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
add/edit screens, only basic validation (e.g. non-empty) and address-field-specific merchant-provided errors
M3
FTU, data validation & error recovery, "update" badge, telemetry, ready to enable on fx63 Nightly-only / Partner / End-to-end User Testing (not riding the trains)
M4
Tab modal widget (maybe do in parallel), UI feature complete, ready for release users, Visual Polish, cc logos
MVP
Ride the trains

DOM

See Firefox/Features/Web_Payments/DOM for more info.

Quality Assurance

  • TBD. The pure API development in H1 doesn't require QA involvement (UI level verification). We will have unit/autotest instead.

Project Members

2018'H1 (Jan.~)
  • Product: Cindy Hsiang
  • User Experience: Jacqueline Savory (UX), Erin Pang (VisD)
  • User Research: Sharon Bautista
  • Front-End Engineering: Justin Dolske, Matthew Noorenberghe (Tech Lead), Jared Wein, Samuel Foster
  • Platform Engineering: Marcos Caceres, Peter Saint-Andre
  • Program Management: Jean Gong
2017'H2 (Sep.~)
  • 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.)
  • 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

References