Deze pagina is vertaald door de Cloud Translation API.

Wijzigingen in de betaalverzoek-API

Eiji Kitamura

Chroom 62

PaymentDetailsModifier is nu beschikbaar

Bij een betaalverzoek zijn er gevallen waarin u een korting of een extra toeslag wilt opgeven, afhankelijk van de betaalmethode die een klant kiest. PaymentDetailsModifier is de functie die u kunt gebruiken om dit te bereiken.

Voeg de eigenschap modifiers toe aan het tweede argument van de PaymentRequest constructor, samen met een array van PaymentDetailsModifier objecten, die declaratieve regels zijn voor hoe weergave-items en totaal moeten worden gewijzigd, afhankelijk van de betalingsmethode van de keuze van de klant.

In het volgende voorbeeld ziet u hoe u aangeeft dat een gebruiker $ 3 verwerkingskosten in rekening moet brengen voor het kiezen van 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 daadwerkelijke betalingsverzoekblad ziet een gebruiker, zodra hij een creditcardbetaling kiest, een extra weergave-item met de naam "Verwerkingskosten" met $ 3 kosten, met een totale prijs van $ 71,00.

PaymentDetailsModifier bevat de volgende parameters:

Eigendomsnaam
`supportedMethods`	Geef aan welke betaalmethode deze regel toepast.
`additionalDisplayItems`	Extra display-items waaraan u kortingen of extra kosten wilt toevoegen.
`total`	Totale prijs na het toevoegen van de aanvullendeDisplayItems.
`data`	Voor `basic-card` wordt dit gebruikt als een manier om specifieke kaarttypen te filteren met `supportedTypes` . Anders is het gebruik van deze parameter afhankelijk van de betaalmethode (betaalapp). Raadpleeg de documentatie die elke betaalmethode biedt.

Als er verzendopties zijn, wordt het een beetje lastig, omdat de totale prijs van modifiers niet statisch kan zijn en dynamische aanpassing nodig heeft.

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

de eigenschap SupportMethods heeft nu een tekenreeks nodig

supportedMethods in PaymentMethodData object (het eerste argument voor de PaymentRequest constructor) heeft een array van tekenreeksen gebruikt die een betalingsmethode aangeven. Er wordt nu een enkele string als argument gebruikt.

Houd er rekening mee dat het opgeven van een array voorlopig blijft werken.

Niet doen

Oud - werkt voorlopig nog.

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

Doen

Nieuw - de nieuwe manier.

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

Chroom 61

ondersteunde typen in basiskaart zijn beschikbaar

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

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

Zorg ervoor dat u het kaarttype nogmaals controleert bij uw betalingsgateway, aangezien deze filtering mogelijk niet perfect werkt, afhankelijk van waar de kaart vandaan komt.

Chroom 57

PaymentRequest is nu beschikbaar in iframes

De Payment Request API kan nu vanuit een iframe worden aangeroepen door het allowpaymentrequest attribuut aan het iframe element toe te voegen.

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

PaymentMethodData ondersteunt "basiskaart"

Het eerste argument voor PaymentRequest() constructor is een array met betalingsmethodegegevens. Het PaymentMethodData formaat is in deze release gewijzigd.

Niet doen

Oud - werkt voorlopig nog.

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

Doen

Nieuw - de nieuwe structuur.

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

Het formaat van de data eigenschap is afhankelijk van de waarde in supportedMethods en is gebaseerd op de Basic Card- specificatie. Houd er rekening mee dat de specificatie supportedTypes omvat die credit , debit of prepaid accepteert, maar 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

Als onderdeel van de betalingsiteminformatie kunnen ontwikkelaars pending toevoegen om aan te geven dat de prijs nog niet volledig is bepaald. Het pending veld accepteert een Booleaanse waarde.

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

Dit wordt vaak gebruikt om regelitems weer te geven, zoals verzendkosten of belastingbedragen die afhankelijk zijn van de selectie van het verzendadres of de verzendopties. Chrome geeft velden in de gebruikersinterface voor het betalingsverzoek aan.

verzoekPayerName

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

verzendingType

Als onderdeel van de verzendoptie (derde argument voor PaymentRequest ) kunnen ontwikkelaars nu shippingType toevoegen om te verzoeken dat de gebruikersinterface 'bezorging' of 'afhalen' weergeeft in plaats van 'verzending'. shippingType accepteert de strings shipping (standaard), delivery of pickup .

shippingType='levering' — shippingType = "levering"

shippingType='afhalen' — shippingType = "ophalen"

Serializer-functies beschikbaar voor PaymentResponse en PaymentAddress

PaymentResponse-object en PaymentAddress object zijn nu JSON-serialiseerbaar. Ontwikkelaars kunnen er één naar een JSON-object converteren door de functie toJSON() aan te roepen en voorkomen dat er omslachtige toDict() functies worden gemaakt.

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

kanBetalen

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, omdat gebruikers nog steeds een nieuwe betaalmethode kunnen toevoegen aan de betalingsinterface.

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