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

Eiji Kitamura

Chrome 62

PaymentDetailsModifier अब उपलब्ध है

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

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

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

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 डॉलर होगी.

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

प्रॉपर्टी का नाम
supportedMethods	बताएं कि पैसे चुकाने के किस तरीके पर यह नियम लागू होता है.
additionalDisplayItems	अतिरिक्त डिसप्ले आइटम, जिन पर आपको छूट या अतिरिक्त शुल्क जोड़ना है.
total	additionalDisplayItems जोड़ने के बाद की कुल कीमत.
data	basic-card पेमेंट के लिए, इसका इस्तेमाल supportedTypes के साथ कार्ड के खास टाइप को फ़िल्टर करने के लिए किया जाएगा. ऐसा न होने पर, इस पैरामीटर का इस्तेमाल, पेमेंट के तरीके (पेमेंट ऐप्लिकेशन) पर निर्भर करता है. पैसे चुकाने के हर तरीके के लिए दिए गए दस्तावेज़ देखें.

शिपिंग के विकल्प होने पर, चीज़ें थोड़ी मुश्किल हो जाती हैं, क्योंकि 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 में "basic-card" का इस्तेमाल किया जा सकता है

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 स्ट्रिंग स्वीकार करता है.

shippingType="delivery"

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