diff --git a/README.md b/README.md index 6c62c20..1936f23 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ Using FIDO-based authentication to securely confirm payments initiated via the Payment Request API. +This work is currently in incubation within [W3C Web Payments Working Group](https://www.w3.org/Payments/WG/). + ![Screenshot](https://raw.githubusercontent.com/rsolomakhin/secure-payment-confirmation/master/payment.png) The rest of the document is organized into these sections: @@ -113,7 +115,7 @@ const securePaymentConfirmationCredentialCreationOptions = { // This returns a PaymentCredential, which is a subtype of PublicKeyCredential. const credential = await navigator.credentials.create({ - securePaymentCredentialCreationOptions + payment: securePaymentCredentialCreationOptions }); ``` @@ -153,7 +155,7 @@ const securePaymentConfirmationCredentialCreationOptions = { // Bind |instrument| to |credentialId|, or create a new credential if |credentialId| doesn't exist. const credential = await navigator.credentials.create({ - securePaymentCredentialCreationOptions + payment: securePaymentCredentialCreationOptions }); // |credential.createdCredential| is true if the specified credential does not exist and a new one is created instead. @@ -195,7 +197,7 @@ dictionary SecurePaymentConfirmationRequest { SecurePaymentConfirmationAction action; required FrozenArray credentialIds; // Opaque data about the current transaction provided by the issuer. As the issuer is the RP - // of the credential, |networkData| provides protection against replay attacks. + // of the credential, `networkData` provides protection against replay attacks. required BufferSource networkData; unsigned long timeout; required USVString fallbackUrl; @@ -226,7 +228,7 @@ Example usage: ```javascript const securePaymentConfirmationRequest = { action: 'authenticate', - credentialIds: ["Q1J4AwSWD4Dx6q1DTo0MB21XDAV76"], + credentialIds: [Uint8Array.from(atob('Q1J4AwSWD4Dx6q1DTo0MB21XDAV76'), c => c.charCodeAt(0))], networkData, timeout, fallbackUrl: "https://fallback.example/url" @@ -238,13 +240,14 @@ const request = new PaymentRequest( }], {total: {label: 'total', amount: {currency: 'USD', value: '20.00'}}}); const response = await request.show(); +await response.complete('success'); -// Merchant validates |response.merchantData| and sends |response| to issuer for authentication. +// Merchant validates |response.merchantData| and sends |response| to the issuer for authentication. ``` Note that in M86 the `SecurePaymentConfirmationResponse` is actually just a `PaymentResponse` with the authentication details in `response.details`. -If the payment instrument specified by `instrumentId` is not available or if the user failed to authenticate, the desired long-term solution is for the user agent to open `fallbackUrl` inside the Secure Modal Window and somehow extract a response from that interaction. 🚧 **The exact mechanism for support this flow still needs to be designed.** +If no payment instrument specified by `credentialIds` is available or if the user failed to authenticate, the desired long-term solution is for the user agent to open `fallbackUrl` inside the Secure Modal Window and somehow extract a response from that interaction. 🚧 **The exact mechanism for support this flow still needs to be designed.** 🚨 As a hack for the [pilot], the user agent will simply resolve `request.show()` with an exception. The caller is responsible for constructing a second Payment Request to open `fallbackUrl` inside a Secure Modal Window by utilizing the Just-in-Time registration and skip-the-sheet features of Payment Handler API. diff --git a/developer-guide.md b/developer-guide.md new file mode 100644 index 0000000..a61a721 --- /dev/null +++ b/developer-guide.md @@ -0,0 +1,27 @@ +# Secure Payment Confirmation Developer Guide + +The experimental Secure Payment Confirmation is available for developer testing in Chrome as an [Origin Trial](https://github.com/GoogleChrome/OriginTrials). This document describes how to start using this API on your website. + +## Step 1: Get a compatible computer + +Currently, the Secure Payment Confirmation trial is only available on MacOS with built-in TouchID enabled (e.g. 2016 MacBookPro or later). + +## Step 2: Get a compatible version of Chrome + +* Stable channel: 86.0.4240.75 or later +* Canary channel: 87.0.4280.0 or later + +You can verify that you have the right version of Chrome by trying out this [test page](https://rsolomakhin.github.io/pr/spc/). + +## Step 3: Enable the Origin Trial on your website + +Follow the [Origin Trial Developer Guide](https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md) to obtain a trial token and use it on your website. + +## Frequently Asked Questions + +### Q: What are the maximum dimensions of the payment instrument icon when registering a PaymentCredential? +A: Chrome's current implementation expects an icon that is 32px wide by 20px high. + +## Need help? + +Please contact payments-dev@chromium.org.