Wijzigingen in de betaalverzoek-API

Eiji Kitamura

Chroom 62

PaymentDetailsModifier is nu beschikbaar

In een betaalverzoek kunt u soms korting of extra kosten toekennen, afhankelijk van de betaalmethode die een klant kiest. PaymentDetailsModifier is de functie die u hiervoor kunt gebruiken.

Voeg modifiers eigenschap toe aan het tweede argument van PaymentRequest constructor, samen met een array van PaymentDetailsModifier -object. Dit bevat declaratieve regels over hoe weergegeven items en totalen moeten worden gewijzigd, afhankelijk van de door de klant gekozen betaalmethode.

Het onderstaande voorbeeld illustreert hoe u aangeeft dat er $ 3 aan verwerkingskosten in rekening wordt gebracht aan een gebruiker die kiest voor een creditcardbetaling.

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);

Op het formulier voor betalingsverzoeken ziet een gebruiker, zodra hij of zij een creditcardbetaling selecteert, een extra item met de naam 'Verwerkingskosten' met een bedrag van $ 3,- en een totaalbedrag van $ 71,00.

PaymentDetailsModifier bevat de volgende parameters:

Als er verzendopties zijn, wordt het lastiger, omdat modifiers 'totale prijs' niet statisch kunnen zijn en dynamisch moeten worden aangepast.

Om dit te bereiken, wijzigt u de eigenschappen additionalDisplayItems en total modifiers bij de gebeurtenissen shippingaddresschange en shippingoptionchange , net zoals u dat doet met de eigenschappen displayItems van het object PaymentDetails .

De supportedMethods-eigenschap accepteert nu een tekenreeks

De eigenschap supportedMethods in PaymentMethodData object (het eerste argument van de PaymentRequest constructor) accepteerde een array met strings die een betaalmethode aangaven. Nu accepteert het één string als argument.

Houd er rekening mee dat het opgeven van een array voorlopig nog wel zal werken.

var methodData = [{
     supportedMethods: ['basic-card'],
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay']
     }
}, {
    supportedMethods: ['https://bobpay.xyz']
}];

var methodData = [{
     supportedMethods: 'basic-card',
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay']
     }
}, {
    supportedMethods: 'https://bobpay.xyz'
}];

Chroom 61

supportedTypes in basiskaart is beschikbaar

Wanneer supportedMethods ' basic-card ' is, kunt u nu supportedTypes opgeven om aan te geven welke typen kaarten worden ondersteund: ' credit ', ' debit ' en ' prepaid '.

var methodData = [{
 supportedMethods: 'basic-card',
 data: {
   supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
     'diners', 'discover', 'mir', 'unionpay']
   supportedTypes: ['credit', 'debit', 'prepaid']
 }
}];

Controleer het kaarttype goed bij uw betalingsgateway, want het filteren werkt mogelijk niet optimaal, afhankelijk van de bron van de betaling.

Chroom 57

PaymentRequest is nu beschikbaar in iframes

De API voor betalingsverzoeken kan nu worden aangeroepen vanuit een iframe door het kenmerk allowpaymentrequest toe te voegen aan het iframe element.

<iframe src="/totally/fake/url" allowpaymentrequest></iframe>

PaymentMethodData ondersteunt "basic-card"

Het eerste argument van PaymentRequest() constructor is een array met betaalmethodegegevens. De PaymentMethodData -indeling is in deze release aangepast.

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

var methodData = [{
     supportedMethods: ['basic-card'],
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay']
     }
}];
var request = new PaymentRequest(methodData, details, options);

De opmaak van de data eigenschap is afhankelijk van de waarde in supportedMethods en is gebaseerd op de Basic Card- specificatie. De specificatie bevat supportedTypes , die credit , debit en prepaid accepteert. Chrome 57 negeert deze eigenschap en behandelt alle waarden in supoprtedNetworks als creditcards.

var methodData = [{
     supportedMethods: ['basic-card'],
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay'],
       supportedTypes: ['credit'] <= not available
     }
}];

Chroom 56

in behandeling

Ontwikkelaars kunnen pending toevoegen aan de informatie over het betalingsitem om aan te geven dat de prijs nog niet volledig is vastgesteld. Het veld pending accepteert een Booleaanse waarde.

    {
      label: "State tax",
      amount: { currency: "USD", value : "5.00" },
      pending: true
    },

Dit wordt vaak gebruikt om posten weer te geven, zoals verzendkosten of belastingbedragen, die afhankelijk zijn van het geselecteerde verzendadres of de gekozen verzendopties. Chrome geeft in de gebruikersinterface aan welke velden nog in behandeling zijn voor het betalingsverzoek.

verzoekBetalerNaam

Als onderdeel van de verzendoptie (derde argument van PaymentRequest ) kunnen ontwikkelaars nu requestPayerName toevoegen om de naam van de betaler op te vragen, los van de verzendadresgegevens. requestPayerName accepteert een Booleaanse waarde.

verzendtype

Als onderdeel van de verzendoptie (het derde argument van PaymentRequest ) kunnen ontwikkelaars nu shippingType toevoegen om aan te geven dat de gebruikersinterface "delivery" of "pickup" weergeeft in plaats van "shipping". shippingType accepteert de tekenreeksen shipping (standaard), delivery en pickup .

Serializerfuncties beschikbaar voor PaymentResponse en PaymentAddress

Het PaymentResponse-object en PaymentAddress -object zijn nu JSON-serialiseerbaar. Ontwikkelaars kunnen een object converteren naar een JSON-object door de toJSON() functie aan te roepen en hoeven geen omslachtige toDict() functies te maken.

request.show().then(response => {
     let res = response.toJSON();
});

kanBetalingDoen

Naast de beschikbaarheid van de API kunt u controleren of een gebruiker een actieve betaalmethode heeft voordat u de Payment Request API aanroept. Houd er rekening mee dat dit optioneel is, aangezien gebruikers nog steeds een nieuwe betaalmethode kunnen toevoegen in de betaalinterface.

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.
     });
}