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

आइजी कितामुरा

Twitter GitHub Glitch Mastodon

Chrome 62

PaymentDetailsModifier अब उपलब्ध है

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

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

इस उदाहरण में दिखाया गया है कि कैसे आपने यह एलान किया है कि क्रेडिट कार्ड से पेमेंट करने पर, उपयोगकर्ता से तीन डॉलर का प्रोसेसिंग शुल्क लिया जाएगा.

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

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

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

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

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

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

supportMethods प्रॉपर्टी के लिए, अब एक स्ट्रिंग

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

बेसिक कार्ड में SupportTypes उपलब्ध है

अगर 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 में उपलब्ध है

भुगतान अनुरोध API को अब 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 को जोड़कर, यह अनुरोध कर सकते हैं कि यूज़र इंटरफ़ेस (यूआई) "shipping" के बजाय "डिलीवरी" या "पिकअप" दिखाए. shippingType, shipping (डिफ़ॉल्ट), delivery या pickup स्ट्रिंग को स्वीकार करता है.

shippingType="delivery"

shippingType="pickup"

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

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