58
edits
(wiki syntax :-)) |
(small text corrections) |
||
Line 5: | Line 5: | ||
== How It Works == | == How It Works == | ||
Traditionally, the checkout process for an e-commerce website has been loaded in [https://en.wikipedia.org/wiki/Web_content web content]. As a result, the shopper has filled out payment-related details (credit card number, card expiration date, card security code, billing address, shipping address, etc.) at the merchant site, often over | Traditionally, the checkout process for an e-commerce website has been loaded in [https://en.wikipedia.org/wiki/Web_content web content]. As a result, the shopper has filled out payment-related details (credit card number, card expiration date, card security code, billing address, shipping address, etc.) at the merchant site, often in a workflow spread over several web pages. When the user has provided all required information and is satisfied with the final order details, the shopper clicks a button like "Place Order" and the shopper's payment instrument (e.g., a debit card) is authorized to pay the amount due. Although [[Firefox/Features/Form_Autofill|form autofill]] can make the checkout process somewhat less inconvenient, the user experience varies from merchant to merchant and can contain various security vulnerabilities. | ||
By using the [https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API W3C Payment Request API], the web payments feature will present a standardized checkout flow in a trusted browser dialog window. At a high level, the workflow is as follows: | By using the [https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API W3C Payment Request API], the web payments feature will present a standardized, more secure checkout flow in a trusted browser dialog window. At a high level, the workflow is as follows: | ||
# At the merchant website, the user chooses items to purchase and clicks a "Pay" button of some kind. | # At the merchant website, the user chooses items to purchase and clicks a "Pay" button of some kind. | ||
# The merchant website invokes the PaymentRequest.show() method in the browser. | # The merchant website invokes the PaymentRequest.show() method in the browser. | ||
# Firefox presents a browser dialog window to complete the purchase. | # Firefox presents a browser dialog window to complete the purchase. | ||
# In the browser dialog window, the user provides information requested by the merchant (credit card number, shipping address, etc.), optionally | # In the browser dialog window, the user provides information requested by the merchant (credit card number, shipping address, etc.), optionally directing Firefox to save the information locally for re-use in future transactions. | ||
# When the user completes the in-browser workflow, the browser sends a PaymentResponse to the merchant website with the requested information. | # When the user completes the in-browser workflow, the browser sends a PaymentResponse to the merchant website with the requested information. | ||
# Optionally the merchant website might ask the user to correct an error (e.g., an invalid postal code) and would then call the PaymentRequest.retry() method; the user would then correct the error and finish the workflow. | # Optionally the merchant website might ask the user to correct an error (e.g., an invalid postal code) and would then call the PaymentRequest.retry() method; the user would then correct the error and finish the workflow. |
edits