I commercianti possono utilizzare la conferma di pagamento sicura (SPC, Secure Payment Confirmation) nell'ambito di un processo di autenticazione forte del cliente (SCA) per una determinata carta di credito o conto bancario. WebAuthn esegue l'autenticazione (spesso tramite la biometria). WebAuthn deve essere registrato in anticipo, come spiegato nella sezione Registrare una conferma di pagamento sicura.
Come funziona una tipica implementazione
L'SPC viene utilizzato più di frequente quando un cliente effettua un acquisto sul e l'emittente della carta di credito o la banca richiedono l'autenticazione del pagatore.
Esaminiamo il flusso di autenticazione:
- Un cliente fornisce le proprie credenziali di pagamento, ad esempio la carta di credito informazioni) al commerciante.
- Il commerciante chiede l'emittente o la banca corrispondenti delle credenziali di pagamento
(parte proprietaria o parte soggetta a limitazioni) se il pagatore ha bisogno di un'autenticazione separata. Questo
può avvenire, ad esempio, con
EMV® 3-D Secure.
- Se la parte soggetta a limitazioni desidera che il commerciante utilizzi l'SPC e se l'utente ha precedentemente registrati, la parte soggetta a limitazioni risponde con un elenco di ID credenziali registrati chi paga e una sfida.
- Se non è necessaria l'autenticazione, il commerciante può continuare completare la transazione.
- Se è necessaria un'autenticazione, il commerciante stabilisce se il browser supporta SPC.
- Se il browser non supporta SPC, procedi con lo script esistente non è un flusso di autenticazione.
- Il commerciante richiama l'SPC. Il browser mostra una finestra di dialogo di conferma.
- Se non sono presenti ID credenziali trasmessi dalla parte soggetta a limitazioni, utilizza il flusso di autenticazione esistente. Dopo un'autenticazione riuscita, valuta la possibilità di utilizzare la registrazione SPC per semplificare le autenticazioni future.
- L'utente conferma e autentica l'importo e la destinazione del sbloccando il dispositivo.
- Il commerciante riceve una credenziale dall'autenticazione.
- La parte soggetta a limitazioni riceve la qualifica dal commerciante e verifica la sua autenticità.
- La parte soggetta a limitazioni invia i risultati della verifica al commerciante.
- Il commerciante mostra all'utente un messaggio per indicare se il pagamento è stato effettuato hanno successo o meno.
Rilevamento delle caratteristiche
Per rilevare se il servizio SPC è supportato nel browser, puoi inviare una chiamata falsa a
canMakePayment()
Copia e incolla il codice seguente per rilevare l'SPC sul sito web di un commerciante.
const isSecurePaymentConfirmationSupported = async () => {
if (!'PaymentRequest' in window) {
return [false, 'Payment Request API is not supported'];
}
try {
// The data below is the minimum required to create the request and
// check if a payment can be made.
const supportedInstruments = [
{
supportedMethods: "secure-payment-confirmation",
data: {
// RP's hostname as its ID
rpId: 'rp.example',
// A dummy credential ID
credentialIds: [new Uint8Array(1)],
// A dummy challenge
challenge: new Uint8Array(1),
instrument: {
// Non-empty display name string
displayName: ' ',
// Transparent-black pixel.
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==',
},
// A dummy merchant origin
payeeOrigin: 'https://non-existent.example',
}
}
];
const details = {
// Dummy shopping details
total: {label: 'Total', amount: {currency: 'USD', value: '0'}},
};
const request = new PaymentRequest(supportedInstruments, details);
const canMakePayment = await request.canMakePayment();
return [canMakePayment, canMakePayment ? '' : 'SPC is not available'];
} catch (error) {
console.error(error);
return [false, error.message];
}
};
isSecurePaymentConfirmationSupported().then(result => {
const [isSecurePaymentConfirmationSupported, reason] = result;
if (isSecurePaymentConfirmationSupported) {
// Display the payment button that invokes SPC.
} else {
// Fallback to the legacy authentication method.
}
});
Autentica l'utente
Per autenticare l'utente, richiama il metodo PaymentRequest.show()
con
Parametri secure-payment-confirmation
e WebAuthn:
PublicKeyCredentialRequestOptions
- Altri parametri specifici per i pagamenti sulla piattaforma del commerciante.
Ecco i parametri da fornire alla proprietà data
del metodo di pagamento, SecurePaymentConfirmationRequest
.
Dai un'occhiata a questo codice di esempio:
// After confirming SPC is available on this browser via a feature detection,
// fetch the request options cross-origin from the RP server.
const options = fetchFromServer('https://rp.example/spc-auth-request');
const { credentialIds, challenge } = options;
const request = new PaymentRequest([{
// Specify `secure-payment-confirmation` as payment method.
supportedMethods: "secure-payment-confirmation",
data: {
// The RP ID
rpId: 'rp.example',
// List of credential IDs obtained from the RP server.
credentialIds,
// The challenge is also obtained from the RP server.
challenge,
// A display name and an icon that represent the payment instrument.
instrument: {
displayName: "Fancy Card ****1234",
icon: "https://rp.example/card-art.png",
iconMustBeShown: false
},
// The origin of the payee (merchant)
payeeOrigin: "https://merchant.example",
// The number of milliseconds to timeout.
timeout: 360000, // 6 minutes
}
}], {
// Payment details.
total: {
label: "Total",
amount: {
currency: "USD",
value: "5.00",
},
},
});
try {
const response = await request.show();
// response.details is a PublicKeyCredential, with a clientDataJSON that
// contains the transaction data for verification by the issuing bank.
// Make sure to serialize the binary part of the credential before
// transferring to the server.
const result = fetchFromServer('https://rp.example/spc-auth-response', response.details);
if (result.success) {
await response.complete('success');
} else {
await response.complete('fail');
}
} catch (err) {
// SPC cannot be used; merchant should fallback to traditional flows
console.error(err);
}
La funzione .show()
genera un
PaymentResponse
ad eccezione del fatto che details
contiene una credenziale di chiave pubblica con un
clientDataJSON
che contiene i dati delle transazioni
(payment
)
per la verifica da parte della parte soggetta a limitazioni.
La credenziale risultante deve essere trasferita multiorigine alla parte soggetta a limitazioni e verificati.
In che modo la parte soggetta a limitazioni verifica la transazione
La verifica dei dati delle transazioni sul server RP è il passaggio più importante la procedura di pagamento.
Per verificare i dati della transazione, la parte soggetta a limitazioni può seguire la procedura di verifica dell'asserzione di autenticazione di WebAuthn.
Inoltre, devono
verifica il payment
.
Un esempio di payload di clientDataJSON
:
{
"type":"payment.get",
"challenge":"SAxYy64IvwWpoqpr8JV1CVLHDNLKXlxbtPv4Xg3cnoc",
"origin":"https://spc-merchant.glitch.me",
"crossOrigin":false,
"payment":{
"rp":"spc-rp.glitch.me",
"topOrigin":"https://spc-merchant.glitch.me",
"payeeOrigin":"https://spc-merchant.glitch.me",
"total":{
"value":"15.00",
"currency":"USD"
},
"instrument":{
"icon":"https://cdn.glitch.me/94838ffe-241b-4a67-a9e0-290bfe34c351%2Fbank.png?v=1639111444422",
"displayName":"Fancy Card 825809751248"
}
}
}
rp
corrisponde all'origine della parte soggetta a limitazioni.- Il valore
topOrigin
corrisponde all'origine di primo livello prevista dalla parte soggetta a limitazioni (il valore dell'origine del commerciante nell'esempio precedente). - Il
payeeOrigin
corrisponde all'origine del beneficiario che avrebbe dovuto essere mostrati all'utente. - Il
total
corrisponde all'importo della transazione che avrebbe dovuto essere visualizzato all'utente. - Il
instrument
corrisponde ai dettagli dello strumento di pagamento che dovrebbero essere mostrati all'utente.
const clientData = base64url.decode(response.clientDataJSON);
const clientDataJSON = JSON.parse(clientData);
if (!clientDataJSON.payment) {
throw 'The credential does not contain payment payload.';
}
const payment = clientDataJSON.payment;
if (payment.rp !== expectedRPID ||
payment.topOrigin !== expectedOrigin ||
payment.payeeOrigin !== expectedOrigin ||
payment.total.value !== '15.00' ||
payment.total.currency !== 'USD') {
throw 'Malformed payment information.';
}
Una volta superati tutti i criteri di verifica, la parte soggetta a limitazioni può indicare al commerciante che la transazione è andata a buon fine.
Passaggi successivi
- Leggi la panoramica della conferma del pagamento sicuro.
- Informazioni sulla registrazione con la conferma del pagamento sicuro