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

Status Summary

Development Update - Milestones 1 - 3 Delivery

Below is a weekly engineering development update.

August 14 Update

  • Status: Green - In Development.
  • Team is currently working on Iteration #10 which runs from August 6 - August 17.
  • A cumulative completion of 54 bugs is required by the conclusion of Iteration #10 to remain on schedule.
  • Team has, to date, a cumulative completion of 64 bugs for Iteration #10.
  • Team has completed 95% of the entire Milestone 1 - 3 Backlog.
  • The forecast completion of the entire Milestone 1 - 3 Backlog is on September 28.
  • View Project Tracking Dashboard for current schedule progress and backlog.
Updated Weekly. Current Update - Tuesday, August 14.

Work Currently In Development

Full Query
ID Priority Summary Status Assigned to
1435161 P1 Implement PaymentResponse.retry() method ASSIGNED Eden Chuang[:edenchuang]
1463545 P1 Replace grid layout of <rich-option> subclasses with new UI spec ASSIGNED :prathiksha
1470178 P1 Address sync as it pertains to payment information ASSIGNED Jacqueline Savory [:jsavory] UX
1470184 P1 Fix the Preferences text and layout ASSIGNED Jacqueline Savory [:jsavory] UX
1470194 P1 Create visual/motion to show an updated total ASSIGNED Eric Pang [:epang] UX
1470199 P1 Create CVV Tooltip Image variations ASSIGNED Eric Pang [:epang] UX
1470206 P1 Spec out in IA the different No Profiles flows + add notes ASSIGNED Jacqueline Savory [:jsavory] UX
1470207 P1 Finalize images and strings for error screens ASSIGNED (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
1473662 P1 UX design for Card Type and Card Network ASSIGNED Eric Pang [:epang] UX
1475760 P1 Payer/contact picker dropdown labels need to take @address-fields into account ASSIGNED :prathiksha
1477105 P1 Add a card network dropdown to the credit card add/edit screen ASSIGNED Sam Foster [:sfoster]
1480886 P1 Position the form fields for the address-form and basic-card-form according to the spec ASSIGNED (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
1482220 P1 Figure out why add/edit form strings don't appear on Nightly builds ASSIGNED Matthew N. [:MattN] (PM if requests are blocking you)
1483470 P1 Navigating during paymentRequest.show() crashes the parent process ASSIGNED Eden Chuang[:edenchuang]

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

Work Available in Backlog

Full Query
ID Priority Summary Status
1470183 P2 Point to merchant site for any vague errors NEW
1470204 P2 add more context to "cards and addresses are from Firefox" string NEW
1478740 P2 Showing a 2nd payment request raises DOMException, "The operation was aborted". NEW

3 Total; 3 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)
1408234 P1 PaymentRequestService doesn't clear requests from closed documents RESOLVED Eden Chuang[:edenchuang]
1417698 P1 Use mozilla recommended eslint rules and remove rules duplicating those recommendations RESOLVED Nathan
1422164 P1 Create a rich-select Custom Element RESOLVED (away 8/20-8/27) 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 (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
1427947 P1 Dispatch `shippingoptionchange` when the shipping option is changed RESOLVED (away 8/20-8/27) 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 (away 8/20-8/27) 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]
1427961 P1 Do basic shipping address validation in the Payment Request dialog RESOLVED (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
1428152 P1 Setting a customElement observedAttribute property to false should remove the attribute RESOLVED (away 8/20-8/27) 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 (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
1429189 P1 Show shipping address errors on the summary screen RESOLVED (away 8/20-8/27) 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 (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
1429211 P1 Implement the "success" screen for when the merchant accepts the payment RESOLVED (away 8/20-8/27) 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 (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
1429260 P1 Handle request changes with updateWith - verify that state stays consistent RESOLVED Sam Foster [:sfoster]
1430200 P1 Add a mutation observer to rich-select to re-render when child options are added/removed RESOLVED (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
1431368 P1 Change from keypress to keydown per standards change RESOLVED (away 8/20-8/27) 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 (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
1434443 P1 Send the selected address to the webpage as part of the PaymentResponse RESOLVED (away 8/20-8/27) 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 (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
1435105 P1 Vary the payment request address label according to the `shippingType` RESOLVED (away 8/20-8/27) 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]
1435892 P1 Implement the basic first-time-use wizard state logic and footer buttons RESOLVED :prathiksha
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 (away 8/20-8/27) 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 (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
1440530 P1 Clean up some duplication in the webpayments mochitest-browser tests for setting up dialogs RESOLVED (away 8/20-8/27) 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 (away 8/20-8/27) 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]
1442453 P1 A TypeError is thrown and the payment service can get in a broken state if two requests are used in one document RESOLVED Blake Kaplan (:mrbkap) (leave, Aug. 16-Nov. 16)
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 (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
1447773 P1 Time out the PaymentResponse object after 5 seconds, behaving as if complete() was called with no arguments RESOLVED Henri Sivonen (:hsivonen)
1447777 P1 Handle the "timeout" completeStatus that is set when PaymentResponse.complete is not called VERIFIED Sam Foster [:sfoster]
1451143 P1 Intermittent toolkit/components/payments/test/browser/browser_card_edit.js | Check updated cc-name - "J. Smith" == "A. Nonymous" - RESOLVED (away 8/20-8/27) 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 (away 8/20-8/27) 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
1461477 P1 Duplicate implementations of the Luhn algorithm exist in the tree RESOLVED (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
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)
1462461 P1 Show the back button in the basic card page during on-boarding RESOLVED :prathiksha
1462779 P1 Show the billing address page on on-boarding when requestShipping is false and there are no saved addresses RESOLVED :prathiksha
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)
1463538 P1 JavaScript error: chrome://payments/content/paymentDialogWrapper.js, line 335: NS_ERROR_NOT_INITIALIZED RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1463547 P1 Hide the "edit" link in the pickers when no options are selected VERIFIED :prathiksha
1463554 P1 Use native <option> UI with <rich-select> in the open state RESOLVED :prathiksha
1463608 P1 Required `name` property is missing on temporary PR addresses RESOLVED Sam Foster [:sfoster]
1464221 P1 Investigate effort required to make the window modal Payment Request dialog usable RESOLVED (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
1466720 P1 Basic PaymentRequest dialog default styles RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1468153 P1 PaymentRequest dialog <button> strings VERIFIED (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
1468356 P1 Implement paymentmethodchange event RESOLVED Marcos Caceres [:marcosc]
1468644 P1 Add tests to verify unmasked card number is sent when using a temporary card for a payment VERIFIED Sam Foster [:sfoster]
1469464 P1 Update PaymentRequest header and footer match the visual specs RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1470110 P1 Crash in IPCError-browser | RecvRequestPayment RESOLVED Blake Kaplan (:mrbkap) (leave, Aug. 16-Nov. 16)
1470172 P1 Clarify language for 'Add', 'Save' and 'Update' buttons RESOLVED Eric Pang [:epang] UX
1470179 P1 Make errors feel less clickable RESOLVED Eric Pang [:epang] UX
1470202 P1 Reformat the Payment Method dropdown RESOLVED Eric Pang [:epang] UX
1470203 P1 Remove the "Your Payment" title RESOLVED Eric Pang [:epang] UX
1470205 P1 Figure out the UX for error details and behavior RESOLVED Eric Pang [:epang] UX
1470209 P1 Create rules and designs for Contact Information RESOLVED Eric Pang [:epang] UX
1470584 P1 If the PaymentRequest dialog is closed via the window manager, tell the PaymentUIService VERIFIED Sam Foster [:sfoster]
1471255 P1 bugs in dom/payments should be filed in Core::DOM: Web Payments RESOLVED Sebastian Hengst [:aryx] (needinfo on intermittent or backout)
1471263 P1 Re-enable the test_show_field_specific_error_on_addresschange test in browser_shippingaddresschange_error.js RESOLVED Sam Foster [:sfoster]
1472278 P1 Localize the required form asterisk on the address-form VERIFIED (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
1475080 P1 Cleanup the pickers to match the spec RESOLVED :prathiksha
1475521 P1 Payments shouldn't be processed without selecting a shipping address VERIFIED (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
1476204 P1 Credit card add/edit page error handling fixes VERIFIED Matthew N. [:MattN] (PM if requests are blocking you)
1476345 P1 Address add/edit page error handling fixes RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1476348 P1 Show missing field validation errors on the summary page VERIFIED (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
1476571 P1 Billing address is incorrectly pre-filled starting from the second flow VERIFIED :prathiksha
1477100 P1 Need to show in-field labels (small text and placeholder) RESOLVED (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
1477106 P1 checkbox for "Save credit card to Firefox" should be unchecked by default outside private browsing VERIFIED Sam Foster [:sfoster]
1477114 P1 Need an asterisk for in-field label on credit card number and CVV field. VERIFIED (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
1477183 P1 The “Pay” button is not grayed out when a generic merchant error message is displayed VERIFIED
1477699 P1 The generic merchant error message isn't displayed when it should VERIFIED (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
1478029 P1 The standard shipping option (default) is “null” for the worldwide multi-option shipping without pre-selection RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1478175 P1 Implement the branding in the lower left corner of the PaymentRequest dialog VERIFIED (away 8/20-8/27) Jared Wein [:jaws] (please needinfo? me)
1478321 P1 Intermittent browser/components/payments/test/browser/browser_payments_onboarding_wizard.js | [JavaScript Error: "TypeError: docShell is null" {file: "resource://gre/modules/BrowserUtils.jsm" line: 428}] - RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)
1480023 P1 The “Save” button is grayed out after editing the CC-number back to the valid form VERIFIED Sam Foster [:sfoster]
1480880 P1 Changing defaults preferences does not update the checkbox for saving address and credit cards in the payments UI VERIFIED Sam Foster [:sfoster]
1483401 P1 Fix scrollable area for the payment request page-body VERIFIED Matthew N. [:MattN] (PM if requests are blocking you)
1483425 P1 Form fields shouldn't be marked invalid immediately for an add form, only an edit form RESOLVED Matthew N. [:MattN] (PM if requests are blocking you)

121 Total; 0 Open (0%); 102 Resolved (84.3%); 19 Verified (15.7%);

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, P1 telemetry probes, 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