Chrome 62
PaymentDetailsModifier è ora disponibile
In una richiesta di pagamento, in alcuni casi potresti voler offrire uno sconto o un addebito extra a seconda del metodo di pagamento scelto dal cliente.
PaymentDetailsModifier è la funzionalità che puoi utilizzare per farlo.
Aggiungi la proprietà modifiers al secondo argomento del costruttore PaymentRequest insieme a un array di oggetti PaymentDetailsModifier che sono regole dichiarative su come gli elementi di visualizzazione e il totale devono essere modificati in base al metodo di pagamento scelto dal cliente.
L'esempio seguente mostra come dichiari a un utente l'addebito di 3 $di commissioni di elaborazione per la scelta di un 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 di richiesta di pagamento effettivo, non appena l'utente sceglie un pagamento con carta di credito, vedrà un elemento di visualizzazione aggiuntivo denominato "Commissione di elaborazione" con un addebito di 3 $, con un prezzo totale di 71,00 $.
PaymentDetailsModifier contiene i seguenti parametri:
| Nome proprietà | |
|---|---|
supportedMethods | Specifica il metodo di pagamento a cui si applica questa regola. |
additionalDisplayItems |
Altri elementi display a cui vuoi aggiungere sconti o costi aggiuntivi. |
total | Prezzo totale dopo l'aggiunta di altriDisplayItems. |
data | Per il pagamento con basic-card, questo valore verrà utilizzato per filtrare tipi di carte specifici con supportedTypes. In caso contrario, l'utilizzo di questo
parametro dipende dal metodo di pagamento (app di pagamento). Fai riferimento alla documentazione fornita da ciascun metodo di pagamento. |
Quando sono disponibili opzioni di spedizione, la situazione può essere complicata, perché il prezzo totale di modifiers
non può essere statico e richiede una modifica dinamica.
Per farlo, dovrai modificare additionalDisplayItems e total della proprietà modifiers in base agli eventi shippingaddresschange e shippingoptionchange, come faresti con la proprietà displayItems dell'oggetto PaymentDetails.
La proprietà supportedMethods ora accetta una stringa
La proprietà supportedMethods nell'oggetto PaymentMethodData (primo argomento del
costruttore PaymentRequest) accetta un array di stringhe che
indicano un metodo di pagamento. Ora accetta una singola stringa come argomento.
Tieni presente che, per il momento, continuerà a funzionare anche se fornisci un array.
Vecchio, ma funziona ancora per il momento.
var methodData = [{
supportedMethods: ['basic-card'],
data: {
supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
'diners', 'discover', 'mir', 'unionpay']
}
}, {
supportedMethods: ['https://bobpay.xyz']
}];
Nuovo, il nuovo modo.
var methodData = [{
supportedMethods: 'basic-card',
data: {
supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
'diners', 'discover', 'mir', 'unionpay']
}
}, {
supportedMethods: 'https://bobpay.xyz'
}];
Chrome 61
è disponibile il metodo supportato nella scheda di base
Quando il valore di 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']
}
}];
Assicurati di verificare il tipo di carta con il tuo gateway di pagamento, in quanto questo filtro potrebbe non funzionare perfettamente a seconda della fonte.
Chrome 57
PaymentRequest è ora disponibile all'interno degli iframe
Ora l'API Payment Request può essere chiamata da un iframe aggiungendo l'attributo allowpaymentrequest all'elemento iframe.
<iframe src="/totally/fake/url" allowpaymentrequest></iframe>
PaymentMethodData supporta "basic-card"
Il primo argomento del costruttore PaymentRequest() è un array di dati sul metodo di pagamento. Il formato PaymentMethodData è stato modificato in questa release.
Vecchio, ma funziona ancora per il momento.
var methodData = [{
supportedMethods: ['visa', 'mastercard', 'amex', 'jcb']
}];
var request = new PaymentRequest(methodData, details, options);
Nuovo: 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 in supportedMethods e si basa sulla specifica della scheda di base. Tieni presente che la specifica include supportedTypes che accetta credit, debit o prepaid, ma Chrome 57 ignora questa proprietà e tratta 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 stato completamente determinato. Il campo pending accetta un valore booleano.
{
label: "State tax",
amount: { currency: "USD", value : "5.00" },
pending: true
},
Questo approccio viene comunemente utilizzato per mostrare elementi pubblicitari come gli importi di spedizione o le imposte che dipendono dalla selezione dell'indirizzo di spedizione o delle opzioni di spedizione. Chrome indica i campi in attesa nell'interfaccia utente della richiesta di pagamento.
requestPayerName
Nell'ambito dell'opzione di spedizione
(terzo argomento di PaymentRequest), ora gli sviluppatori possono aggiungere requestPayerName
per richiedere il nome del pagatore separatamente dalle informazioni sull'indirizzo di spedizione.
requestPayerName accetta un valore booleano.
shippingType
Nell'ambito dell'opzione di spedizione
(terzo argomento di PaymentRequest), ora gli sviluppatori possono aggiungere shippingType per
richiedere che l'interfaccia utente mostri "consegna" o "ritiro" anziché "spedizione".
shippingType accetta le stringhe shipping (predefinita), delivery o
pickup.
Funzioni di serializzazione disponibili per PaymentResponse e PaymentAddress
L'oggetto PaymentResponse
e l'oggetto PaymentAddress ora sono serializzabili in JSON. Gli sviluppatori possono convertirne uno in un oggetto JSON chiamando la funzione toJSON() ed evitare di creare funzioni toDict() complicate.
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 invocare l'API Payment Request. Ricorda che questa opzione è facoltativa, in quanto gli utenti possono comunque aggiungere un nuovo metodo di pagamento nell'interfaccia utente di pagamento.
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.
});
}