पेमेंट रिक्वेस्ट एपीआई में बदलाव

Eiji Kitamura

Chrome 62

PaymentDetailsModifier अब उपलब्ध है

पेमेंट के अनुरोध में, कुछ मामलों में ग्राहक को पेमेंट के चुने गए तरीके के आधार पर छूट या अतिरिक्त शुल्क देना होता है. PaymentDetailsModifier की मदद से, ऐसा किया जा सकता है.

PaymentDetailsModifier ऑब्जेक्ट की कलेक्शन के साथ PaymentRequest कंस्ट्रक्टर के दूसरे तर्क में modifiers प्रॉपर्टी जोड़ें. यह जानकारी देने वाले नियम हैं कि ग्राहक की पसंद के पेमेंट के तरीके के आधार पर, डिसप्ले आइटम और कुल वैल्यू को कैसे बदला जाना चाहिए.

यहां दिए गए उदाहरण में बताया गया है कि क्रेडिट कार्ड से पेमेंट चुनने के लिए, उपयोगकर्ता से तीन डॉलर की प्रोसेसिंग फ़ीस ली जाने का एलान कैसे किया जाता है.

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

पेमेंट के अनुरोध की असल शीट में, क्रेडिट कार्ड से पेमेंट करने का विकल्प चुनते ही, उपयोगकर्ता को "प्रोसेसिंग शुल्क" नाम का एक अतिरिक्त डिसप्ले आइटम दिखेगा. इसमें 3 डॉलर का शुल्क दिखेगा और कुल कीमत 71.00 डॉलर होगी.

PaymentDetailsModifier में ये पैरामीटर शामिल हैं:

शिपिंग के विकल्प मौजूद होने पर, चीज़ें मुश्किल हो जाती हैं. इसकी वजह यह है कि modifiers की कुल कीमत में बदलाव नहीं किया जा सकता और इसमें डाइनैमिक तरीके से बदलाव करने की ज़रूरत होती है.

ऐसा करने के लिए, आपको shippingaddresschange और shippingoptionchange इवेंट के आधार पर, modifiers प्रॉपर्टी के additionalDisplayItems और total में बदलाव करना होगा. ठीक उसी तरह जैसे PaymentDetails ऑब्जेक्ट की displayItems प्रॉपर्टी में बदलाव किया जाता है.

supportedMethods प्रॉपर्टी में अब स्ट्रिंग का इस्तेमाल किया जा सकता है

PaymentMethodData ऑब्जेक्ट में supportedMethods प्रॉपर्टी (PaymentRequest कन्स्ट्रक्टर का पहला आर्ग्युमेंट), स्ट्रिंग का एक कलेक्शन ले रही है. इससे पेमेंट के तरीके का पता चलता है. अब इसमें किसी एक स्ट्रिंग को आर्ग्युमेंट के तौर पर इस्तेमाल किया जा रहा है.

ध्यान दें कि फ़िलहाल, ऐरे देने की सुविधा काम करती रहेगी.

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

Chrome 61

बुनियादी कार्ड में supportedTypes उपलब्ध है

जब supportedMethods 'basic-card' हो, तो अब supportedTypes का इस्तेमाल करके यह बताया जा सकता है कि 'credit',  'debit', और 'prepaid' में से किस तरह के कार्ड काम करते हैं.

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

अपने पेमेंट गेटवे से कार्ड टाइप की दोबारा जांच करना न भूलें. ऐसा इसलिए, क्योंकि यह फ़िल्टर करने की सुविधा, कार्ड के सोर्स के हिसाब से ठीक से काम नहीं कर सकती.

Chrome 57

PaymentRequest अब iframes में उपलब्ध है

पेमेंट का अनुरोध करने वाले एपीआई को अब iframe एलिमेंट में से कॉल किया जा सकता है. इसके लिए, iframe एलिमेंट में allowpaymentrequest एट्रिब्यूट जोड़ें.

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

PaymentMethodData, "बेसिक-कार्ड" के साथ काम करता है

PaymentRequest() कन्स्ट्रक्टर का पहला आर्ग्युमेंट, पेमेंट के तरीके के डेटा का कलेक्शन होता है. इस रिलीज़ में PaymentMethodData फ़ॉर्मैट में बदलाव किया गया है.

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

data प्रॉपर्टी का फ़ॉर्मैट, supportedMethods में दी गई वैल्यू पर निर्भर करता है. यह बुनियादी कार्ड के स्पेसिफ़िकेशन पर आधारित होता है. ध्यान दें कि खास जानकारी में supportedTypes शामिल है, जो credit, debit या prepaid को स्वीकार करता है. हालांकि, Chrome 57 इस प्रॉपर्टी को अनदेखा करता है और supoprtedNetworks में मौजूद किसी भी वैल्यू को क्रेडिट कार्ड मानता है.

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

Chrome 56

मंज़ूरी बाकी है

पेमेंट आइटम की जानकारी के हिस्से के तौर पर, डेवलपर pending जोड़ सकते हैं. इससे यह पता चलता है कि कीमत अभी पूरी तरह से तय नहीं हुई है. pending फ़ील्ड में बूलियन वैल्यू डाली जा सकती है.

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

इसका इस्तेमाल आम तौर पर, शिपिंग या टैक्स की रकम जैसे लाइन आइटम दिखाने के लिए किया जाता है. ये आइटम, शिपिंग के पते या शिपिंग के विकल्पों के हिसाब से तय होते हैं. Chrome, पेमेंट के अनुरोध के लिए यूज़र इंटरफ़ेस में, ऐसे फ़ील्ड दिखाता है जिन्हें भरना बाकी है.

requestPayerName

शिपिंग के विकल्प (PaymentRequest का तीसरा आर्ग्युमेंट) के तहत, डेवलपर अब requestPayerName जोड़ सकते हैं. इससे, पैसे चुकाने वाले व्यक्ति के नाम की जानकारी, शिपिंग के पते की जानकारी से अलग से मांगी जा सकती है. requestPayerName, बूलियन वैल्यू स्वीकार करता है.

shippingType

शिपिंग के विकल्प (PaymentRequest में तीसरा तर्क) के हिस्से के तौर पर, डेवलपर अब shippingType को अपने अनुरोध में जोड़ सकते हैं. इससे डेवलपर, यूज़र इंटरफ़ेस (यूआई) में "शिपिंग" के बजाय "डिलीवरी" या "पिकअप" दिखाने का अनुरोध कर सकते हैं. shippingType, shipping (डिफ़ॉल्ट), delivery या pickup स्ट्रिंग स्वीकार करता है.

PaymentResponse और PaymentAddress के लिए उपलब्ध Serializer फ़ंक्शन

PaymentResponse ऑब्जेक्ट और PaymentAddress ऑब्जेक्ट को अब JSON क्रम में लगाया जा सकता है. डेवलपर, toJSON() फ़ंक्शन को कॉल करके, किसी एक को JSON ऑब्जेक्ट में बदल सकते हैं. साथ ही, वे मुश्किल toDict() फ़ंक्शन बनाने से बच सकते हैं.

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

canMakePayment

एपीआई की उपलब्धता के अलावा, पेमेंट रिक्वेस्ट एपीआई का इस्तेमाल करने से पहले, यह भी पता किया जा सकता है कि उपयोगकर्ता के पास पेमेंट का कोई मौजूदा तरीका है या नहीं. ध्यान रखें कि यह ज़रूरी नहीं है, क्योंकि उपयोगकर्ता अब भी पेमेंट यूज़र इंटरफ़ेस (यूआई) पर, पेमेंट का नया तरीका जोड़ सकते हैं.

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