Modifiche all'API di richiesta di pagamento

Eiji Kitamura
Eiji Kitamura

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.

Cosa non fare

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']
}];
Cosa fare

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.

Cosa non fare

Vecchio, funziona ancora per il momento.

var methodData = [{
     supportedMethods: ['visa', 'mastercard', 'amex', 'jcb']
}];
var request = new PaymentRequest(methodData, details, options);
Cosa fare

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.

spedizioneType=&#39;delivery&#39;
shippingType="delivery"
spedizioneType=&#39;pickup&#39;
shippingType="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.
     });
}