Chrome versione 62
PaymentDetailsModifier è ora disponibile
In una richiesta di pagamento, ci sono casi in cui vuoi offrire uno sconto o un costo extra a seconda del metodo di pagamento scelto dal cliente.
Puoi utilizzare la funzionalità PaymentDetailsModifier
per raggiungere questo obiettivo.
Aggiungi la proprietà modifiers
al secondo argomento del costruttore PaymentRequest
insieme a un array di oggetto PaymentDetailsModifier
, che rappresenta le regole dichiarative
di come gli elementi display e il totale devono essere modificati in base al metodo di
pagamento scelto dal cliente.
L'esempio seguente mostra come dichiarare a un utente che deve essere addebitata una commissione di elaborazione di 3 $per la scelta del pagamento con carta di credito.
let methods = [{
supportedMethods: 'basic-card',
data: {
supportedNetworks: ['visa', 'mastercard']
supportedTypes: ['credit', 'debit']
}
}];
let details = {
displayItems: [{
label: 'T-shirt',
amount: { currency: 'USD', value: '68.00' }
}],
total: {
label: 'Total price',
amount: { currency: 'USD', value: '68.00' }
},
modifiers: [{
supportedMethods: 'basic-card',
data: {
supportedTypes: ['credit']
},
additionalDisplayItems: [{
label: 'Processing fee',
amount: { currency: 'USD', value: '3.00' }
}],
total: {
label: 'Credit card price',
amount: {currency: ‘USD’, value: ‘71.00’}}
}]
};
let options = {};
let request = new PaymentRequest(methods, details, options);
Nel foglio della richiesta di pagamento effettivo, non appena prende un pagamento con carta di credito, un utente visualizza la voce aggiuntiva "Commissione di elaborazione" con un addebito di 3 $, con un prezzo totale di 71 $.
PaymentDetailsModifier
contiene i seguenti parametri:
Nome proprietà | |
---|---|
supportedMethods | Specifica quale metodo di pagamento applica questa regola. |
additionalDisplayItems |
Altri elementi display che vuoi aggiungere sconti o costi aggiuntivi. |
total | Prezzo totale dopo l'aggiunta di altri DisplayItems. |
data | Per
i pagamenti tramite basic-card , verrà utilizzata come metodo per filtrare tipi
di carte specifici con supportedTypes . In caso contrario, l'utilizzo di questo parametro dipende dal metodo di pagamento (app per i pagamenti). Consulta la documentazione fornita da ciascun metodo di pagamento. |
Quando ci sono opzioni di spedizione, le cose si complicano perché il prezzo totale di modifiers
non può essere statico e necessita di modifiche dinamiche.
Per raggiungere questo obiettivo, modificherai additionalDisplayItems
e total
della proprietà modifiers
al verificarsi degli eventi shippingaddresschange
e shippingoptionchange
proprio come fai nella proprietà displayItems
dell'oggetto PaymentDetails
.
la proprietàsupportedMethods ora accetta una stringa
La proprietà supportedMethods
nell'oggetto PaymentMethodData
(il primo argomento per
il costruttore PaymentRequest
) ha assunto un array di stringhe che
indicano un metodo di pagamento. Ora prende una singola stringa come argomento.
Tieni presente che l'invio di un array continuerà a funzionare per il momento.
Vecchio, funziona ancora per il momento.
var methodData = [{ supportedMethods: ['basic-card'], data: { supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'] } }, { supportedMethods: ['https://bobpay.xyz'] }];
Un modo tutto nuovo.
var methodData = [{ supportedMethods: 'basic-card', data: { supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'] } }, { supportedMethods: 'https://bobpay.xyz' }];
Chrome versione 61
nella scheda di base è disponibile
Quando supportedMethods
è "basic-card
", ora puoi fornire supportedTypes
per indicare i tipi di carte supportati tra "credit
", "debit
" e "prepaid
".
var methodData = [{
supportedMethods: 'basic-card',
data: {
supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
'diners', 'discover', 'mir', 'unionpay']
supportedTypes: ['credit', 'debit', 'prepaid']
}
}];
Controlla attentamente il tipo di carta con il gateway di pagamento, poiché questo filtro potrebbe non funzionare perfettamente a seconda della provenienza.
Chrome 57
PaymentRequest è ora disponibile negli iframe
Ora l'API Payment Request può essere chiamata dall'interno di un iframe
aggiungendo
l'attributo allowpaymentrequest
all'elemento iframe
.
<iframe src="/totally/fake/url" allowpaymentrequest></iframe>
PaymentMethodData supporta il metodo "basic-card"
Il primo argomento del costruttore PaymentRequest()
è un array di dati del metodo di pagamento. Il formato PaymentMethodData
è stato modificato in questa release.
Vecchio, funziona ancora per il momento.
var methodData = [{ supportedMethods: ['visa', 'mastercard', 'amex', 'jcb'] }]; var request = new PaymentRequest(methodData, details, options);
Nuova: la nuova struttura.
var methodData = [{ supportedMethods: ['basic-card'], data: { supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'] } }]; var request = new PaymentRequest(methodData, details, options);
Il formato della proprietà data
dipende dal valore nel campo supportedMethods
e si basa sulla specifica Scheda base. Tieni presente che la specifica include supportedTypes
, che accetta credit
, debit
o prepaid
, ma Chrome 57 ignora questa proprietà e considera tutti i valori in supoprtedNetworks
come carte di credito.
var methodData = [{
supportedMethods: ['basic-card'],
data: {
supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
'diners', 'discover', 'mir', 'unionpay'],
supportedTypes: ['credit'] <= not available
}
}];
Chrome 56
in attesa
Nell'ambito delle informazioni sugli elementi di pagamento, gli sviluppatori possono aggiungere pending
per indicare che il prezzo non è ancora completamente determinato. Il campo pending
accetta un valore booleano.
{
label: "State tax",
amount: { currency: "USD", value : "5.00" },
pending: true
},
Di solito viene utilizzato per mostrare le voci, ad esempio gli importi delle spese di spedizione o delle tasse, che dipendono dalla selezione dell'indirizzo di spedizione o delle opzioni di spedizione. Chrome indica i campi in sospeso nella UI per la richiesta di pagamento.
requestPayerName
Nell'ambito dell'opzione di spedizione (terzo argomento per PaymentRequest
), ora gli sviluppatori possono aggiungere requestPayerName
per richiedere il nome del pagatore separato dalle informazioni dell'indirizzo di spedizione.
requestPayerName
accetta un valore booleano.
shippingType
Nell'ambito dell'opzione di spedizione (terzo argomento per PaymentRequest
), ora gli sviluppatori possono aggiungere shippingType
per richiedere che l'interfaccia utente mostri "consegna" o "ritiro" anziché "spedizione".
shippingType
accetta le stringhe shipping
(valore predefinito), delivery
o pickup
.
Funzioni di serializzatore disponibili per PaymentResponse e PaymentAddress
Gli oggetto PaymentResponse
e PaymentAddress
ora sono pubblicabili in formato JSON. Gli sviluppatori possono convertire
un oggetto in un oggetto JSON chiamando la funzione toJSON()
ed evitare di creare
le ingombranti funzioni toDict()
.
request.show().then(response => {
let res = response.toJSON();
});
canMakePayment
Oltre alla disponibilità dell'API, puoi verificare se un utente ha un metodo di pagamento attivo prima di richiamare l'API Payment Request. Ricorda che questa opzione è facoltativa, in quanto gli utenti possono comunque aggiungere un nuovo metodo di pagamento nell'interfaccia utente per i pagamenti.
let request = new PaymentRequest(methods, details, options);
if (request.canMakePayment) {
request.canMakePayment().then(result => {
if (result) {
// Payment methods are available.
} else {
// Payment methods are not available, but users can still add
// a new payment method in Payment UI.
}
}).catch(error => {
// Unable to determine.
});
}