পেমেন্ট রিকোয়েস্ট API এ পরিবর্তন

ক্রোম 62

Payment DetailsModifier এখন উপলব্ধ

একটি অর্থপ্রদানের অনুরোধে, এমন কিছু ক্ষেত্রে রয়েছে যেখানে আপনি একটি ডিসকাউন্ট বা অতিরিক্ত চার্জ প্রদান করতে চান যা একজন গ্রাহক বেছে নেওয়া অর্থপ্রদানের পদ্ধতির উপর নির্ভর করে। PaymentDetailsModifier হল এমন একটি বৈশিষ্ট্য যা আপনি এটি অর্জন করতে ব্যবহার করতে পারেন।

PaymentRequest কনস্ট্রাক্টরের দ্বিতীয় আর্গুমেন্টে PaymentDetailsModifier অবজেক্টের সাথে modifiers প্রপার্টি যোগ করুন যা গ্রাহকের পছন্দের অর্থপ্রদানের পদ্ধতির উপর নির্ভর করে কীভাবে প্রদর্শন আইটেম এবং মোট পরিবর্তন করা উচিত তার ঘোষণামূলক নিয়ম।

নিম্নলিখিত উদাহরণ দেখায় যে আপনি কীভাবে একজন ব্যবহারকারীকে ক্রেডিট কার্ডের অর্থপ্রদান বেছে নেওয়ার জন্য $3 প্রসেসিং ফি চার্জ করা হবে বলে ঘোষণা করেন৷

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 নিম্নলিখিত প্যারামিটার রয়েছে:

সম্পত্তির নাম
supportedMethods কোন পেমেন্ট পদ্ধতি এই নিয়ম প্রযোজ্য তা উল্লেখ করুন।
additionalDisplayItems অতিরিক্ত ডিসপ্লে আইটেম আপনি ডিসকাউন্ট বা অতিরিক্ত চার্জ যোগ করতে চান।
total অতিরিক্ত ডিসপ্লে আইটেম যোগ করার পর মোট মূল্য।
data basic-card পেমেন্টের জন্য, এটি supportedTypes সাথে নির্দিষ্ট কার্ডের প্রকারগুলি ফিল্টার করার উপায় হিসাবে ব্যবহার করা হবে। অন্যথায় এই প্যারামিটারের ব্যবহার অর্থপ্রদানের পদ্ধতির (পেমেন্ট অ্যাপ) উপর নির্ভর করে। প্রতিটি অর্থপ্রদান পদ্ধতি প্রদান করে ডকুমেন্টেশন পড়ুন।

যখন শিপিংয়ের বিকল্পগুলি থাকে, তখন জিনিসগুলি কিছুটা জটিল হয়ে যায়, কারণ modifiers মোট মূল্য স্থির হতে পারে না এবং গতিশীল পরিবর্তনের প্রয়োজন হয়৷

এটি অর্জন করার জন্য, আপনি modifiers সম্পত্তির additionalDisplayItems এবং total shippingaddresschange এবং shippingoptionchange ইভেন্টে পরিবর্তন করবেন ঠিক যেমন আপনি 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'
}];

ক্রোম 61

মৌলিক কার্ডে সমর্থিত প্রকারগুলি উপলব্ধ

যখন supportedMethods ' basic-card ' হয়, তখন আপনি এখন ' credit ', ' debit ', এবং ' prepaid ' এর মধ্যে কোন ধরনের কার্ড সমর্থিত তা নির্দেশ করতে supportedTypes প্রদান করতে পারেন।

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

আপনার পেমেন্ট গেটওয়ে দিয়ে কার্ডের ধরনটি দুবার চেক করা নিশ্চিত করুন কারণ এই ফিল্টারিংটি কোথা থেকে উৎসারিত হয়েছে তার উপর নির্ভর করে পুরোপুরি কাজ নাও করতে পারে।

ক্রোম 57

PaymentRequest এখন iframes-এর ভিতরে উপলব্ধ

পেমেন্ট রিকোয়েস্ট এপিআই এখন iframe এলিমেন্টে allowpaymentrequest অ্যাট্রিবিউট যোগ করে একটি iframe থেকে কল করা যেতে পারে।

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

ক্রোম 56

মুলতুবি

অর্থপ্রদানের আইটেম তথ্যের অংশ হিসাবে, বিকাশকারীরা pending যুক্ত করতে পারে নির্দেশ করতে পারে যে মূল্য এখনও সম্পূর্ণরূপে নির্ধারিত হয়নি। pending ক্ষেত্র একটি বুলিয়ান মান গ্রহণ করে।

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

এটি সাধারণত শিপিং বা ট্যাক্সের পরিমাণের মতো লাইন আইটেমগুলি দেখানোর জন্য ব্যবহৃত হয় যা শিপিং ঠিকানা বা শিপিং বিকল্পের নির্বাচনের উপর নির্ভর করে। Chrome অর্থপ্রদানের অনুরোধের জন্য UI-তে মুলতুবি থাকা ক্ষেত্রগুলি নির্দেশ করে৷

অনুরোধ প্রদানকারীর নাম

শিপিং বিকল্পের অংশ হিসাবে ( PaymentRequest এর তৃতীয় যুক্তি), ডেভেলপাররা এখন শিপিং ঠিকানার তথ্য থেকে আলাদা অর্থ প্রদানকারীর নাম অনুরোধ করতে requestPayerName যোগ করতে পারেন। requestPayerName একটি বুলিয়ান মান গ্রহণ করে।

শিপিং টাইপ

শিপিং বিকল্পের অংশ হিসাবে ( PaymentRequest এর তৃতীয় যুক্তি), বিকাশকারীরা এখন shippingType যোগ করতে পারেন যাতে অনুরোধ করা যায় যে UI "শিপিং" এর পরিবর্তে "ডেলিভারি" বা "পিকআপ" দেখায়৷ shippingType স্ট্রিং shipping (ডিফল্ট), delivery বা pickup গ্রহণ করে।

শিপিং টাইপ = 'ডেলিভারি'
শিপিং টাইপ="ডেলিভারি"
শিপিং টাইপ = 'পিকআপ'
শিপিং টাইপ="পিকআপ"

সিরিয়ালাইজার ফাংশন PaymentResponse এবং PaymentAddress এ উপলব্ধ

PaymentResponse অবজেক্ট এবং PaymentAddress অবজেক্ট এখন JSON-ক্রমিক। ডেভেলপাররা toJSON() ফাংশন কল করে একটি JSON অবজেক্টে রূপান্তর করতে পারে এবং কষ্টকর toDict() ফাংশন তৈরি করা এড়াতে পারে।

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

পেমেন্ট করতে পারেন

API উপলভ্যতা ছাড়াও, আপনি পেমেন্ট অনুরোধ API চালু করার আগে একজন ব্যবহারকারীর একটি সক্রিয় অর্থপ্রদানের পদ্ধতি আছে কিনা তা দেখতে পারেন। মনে রাখবেন যে এটি ঐচ্ছিক কারণ ব্যবহারকারীরা এখনও পেমেন্ট UI এ একটি নতুন অর্থপ্রদানের পদ্ধতি যোগ করতে পারেন।

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

ক্রোম 62

Payment DetailsModifier এখন উপলব্ধ

একটি অর্থপ্রদানের অনুরোধে, এমন কিছু ক্ষেত্রে রয়েছে যেখানে আপনি একটি ডিসকাউন্ট বা অতিরিক্ত চার্জ প্রদান করতে চান যা একজন গ্রাহক বেছে নেওয়া অর্থপ্রদানের পদ্ধতির উপর নির্ভর করে। PaymentDetailsModifier হল এমন একটি বৈশিষ্ট্য যা আপনি এটি অর্জন করতে ব্যবহার করতে পারেন।

PaymentRequest কনস্ট্রাক্টরের দ্বিতীয় আর্গুমেন্টে PaymentDetailsModifier অবজেক্টের সাথে modifiers প্রপার্টি যোগ করুন যা গ্রাহকের পছন্দের অর্থপ্রদানের পদ্ধতির উপর নির্ভর করে কীভাবে প্রদর্শন আইটেম এবং মোট পরিবর্তন করা উচিত তার ঘোষণামূলক নিয়ম।

নিম্নলিখিত উদাহরণ দেখায় যে আপনি কীভাবে একজন ব্যবহারকারীকে ক্রেডিট কার্ডের অর্থপ্রদান বেছে নেওয়ার জন্য $3 প্রসেসিং ফি চার্জ করা হবে বলে ঘোষণা করেন৷

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 নিম্নলিখিত প্যারামিটার রয়েছে:

সম্পত্তির নাম
supportedMethods কোন পেমেন্ট পদ্ধতি এই নিয়ম প্রযোজ্য তা উল্লেখ করুন।
additionalDisplayItems অতিরিক্ত ডিসপ্লে আইটেম আপনি ডিসকাউন্ট বা অতিরিক্ত চার্জ যোগ করতে চান।
total অতিরিক্ত ডিসপ্লে আইটেম যোগ করার পর মোট মূল্য।
data basic-card পেমেন্টের জন্য, এটি supportedTypes সাথে নির্দিষ্ট কার্ডের প্রকারগুলি ফিল্টার করার উপায় হিসাবে ব্যবহার করা হবে। অন্যথায় এই প্যারামিটারের ব্যবহার অর্থপ্রদানের পদ্ধতির (পেমেন্ট অ্যাপ) উপর নির্ভর করে। প্রতিটি অর্থপ্রদান পদ্ধতি প্রদান করে ডকুমেন্টেশন পড়ুন।

যখন শিপিংয়ের বিকল্পগুলি থাকে, তখন জিনিসগুলি কিছুটা জটিল হয়ে যায়, কারণ modifiers মোট মূল্য স্থির হতে পারে না এবং গতিশীল পরিবর্তনের প্রয়োজন হয়৷

এটি অর্জন করার জন্য, আপনি modifiers সম্পত্তির additionalDisplayItems এবং total shippingaddresschange এবং shippingoptionchange ইভেন্টে পরিবর্তন করবেন ঠিক যেমন আপনি 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'
}];

ক্রোম 61

মৌলিক কার্ডে সমর্থিত প্রকারগুলি উপলব্ধ

যখন supportedMethods ' basic-card ' হয়, তখন আপনি এখন ' credit ', ' debit ', এবং ' prepaid ' এর মধ্যে কোন ধরনের কার্ড সমর্থিত তা নির্দেশ করতে supportedTypes প্রদান করতে পারেন।

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

আপনার পেমেন্ট গেটওয়ে দিয়ে কার্ডের ধরনটি দুবার চেক করা নিশ্চিত করুন কারণ এই ফিল্টারিংটি কোথা থেকে উৎসারিত হয়েছে তার উপর নির্ভর করে পুরোপুরি কাজ নাও করতে পারে।

ক্রোম 57

PaymentRequest এখন iframes-এর ভিতরে উপলব্ধ

পেমেন্ট রিকোয়েস্ট এপিআই এখন iframe এলিমেন্টে allowpaymentrequest অ্যাট্রিবিউট যোগ করে একটি iframe থেকে কল করা যেতে পারে।

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

ক্রোম 56

মুলতুবি

অর্থপ্রদানের আইটেম তথ্যের অংশ হিসাবে, বিকাশকারীরা pending যুক্ত করতে পারে নির্দেশ করতে পারে যে মূল্য এখনও সম্পূর্ণরূপে নির্ধারিত হয়নি। pending ক্ষেত্র একটি বুলিয়ান মান গ্রহণ করে।

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

এটি সাধারণত শিপিং বা ট্যাক্সের পরিমাণের মতো লাইন আইটেমগুলি দেখানোর জন্য ব্যবহৃত হয় যা শিপিং ঠিকানা বা শিপিং বিকল্পের নির্বাচনের উপর নির্ভর করে। Chrome অর্থপ্রদানের অনুরোধের জন্য UI-তে মুলতুবি থাকা ক্ষেত্রগুলি নির্দেশ করে৷

অনুরোধ প্রদানকারীর নাম

শিপিং বিকল্পের অংশ হিসাবে ( PaymentRequest এর তৃতীয় যুক্তি), ডেভেলপাররা এখন শিপিং ঠিকানার তথ্য থেকে আলাদা অর্থ প্রদানকারীর নাম অনুরোধ করতে requestPayerName যোগ করতে পারেন। requestPayerName একটি বুলিয়ান মান গ্রহণ করে।

শিপিং টাইপ

শিপিং বিকল্পের অংশ হিসাবে ( PaymentRequest এর তৃতীয় যুক্তি), বিকাশকারীরা এখন shippingType যোগ করতে পারেন যাতে অনুরোধ করা যায় যে UI "শিপিং" এর পরিবর্তে "ডেলিভারি" বা "পিকআপ" দেখায়৷ shippingType স্ট্রিং shipping (ডিফল্ট), delivery বা pickup গ্রহণ করে।

শিপিং টাইপ = 'ডেলিভারি'
শিপিং টাইপ="ডেলিভারি"
শিপিং টাইপ = 'পিকআপ'
শিপিং টাইপ="পিকআপ"

সিরিয়ালাইজার ফাংশন PaymentResponse এবং PaymentAddress এ উপলব্ধ

PaymentResponse অবজেক্ট এবং PaymentAddress অবজেক্ট এখন JSON-ক্রমিক। ডেভেলপাররা toJSON() ফাংশন কল করে একটি JSON অবজেক্টে রূপান্তর করতে পারে এবং কষ্টকর toDict() ফাংশন তৈরি করা এড়াতে পারে।

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

পেমেন্ট করতে পারেন

API উপলভ্যতা ছাড়াও, আপনি পেমেন্ট অনুরোধ API চালু করার আগে একজন ব্যবহারকারীর একটি সক্রিয় অর্থপ্রদানের পদ্ধতি আছে কিনা তা দেখতে পারেন। মনে রাখবেন যে এটি ঐচ্ছিক কারণ ব্যবহারকারীরা এখনও পেমেন্ট UI এ একটি নতুন অর্থপ্রদানের পদ্ধতি যোগ করতে পারেন।

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

ক্রোম 62

Payment DetailsModifier এখন উপলব্ধ

একটি অর্থপ্রদানের অনুরোধে, এমন কিছু ক্ষেত্রে রয়েছে যেখানে আপনি একটি ডিসকাউন্ট বা অতিরিক্ত চার্জ প্রদান করতে চান যা একজন গ্রাহক বেছে নেওয়া অর্থপ্রদানের পদ্ধতির উপর নির্ভর করে। PaymentDetailsModifier হল এমন একটি বৈশিষ্ট্য যা আপনি এটি অর্জন করতে ব্যবহার করতে পারেন।

PaymentRequest কনস্ট্রাক্টরের দ্বিতীয় আর্গুমেন্টে PaymentDetailsModifier অবজেক্টের সাথে modifiers প্রপার্টি যোগ করুন যা গ্রাহকের পছন্দের অর্থপ্রদানের পদ্ধতির উপর নির্ভর করে কীভাবে প্রদর্শন আইটেম এবং মোট পরিবর্তন করা উচিত তার ঘোষণামূলক নিয়ম।

নিম্নলিখিত উদাহরণ দেখায় যে আপনি কীভাবে একজন ব্যবহারকারীকে ক্রেডিট কার্ডের অর্থপ্রদান বেছে নেওয়ার জন্য $3 প্রসেসিং ফি চার্জ করা হবে বলে ঘোষণা করেন৷

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 নিম্নলিখিত প্যারামিটার রয়েছে:

সম্পত্তির নাম
supportedMethods কোন পেমেন্ট পদ্ধতি এই নিয়ম প্রযোজ্য তা উল্লেখ করুন।
additionalDisplayItems অতিরিক্ত ডিসপ্লে আইটেম আপনি ডিসকাউন্ট বা অতিরিক্ত চার্জ যোগ করতে চান।
total অতিরিক্ত ডিসপ্লে আইটেম যোগ করার পর মোট মূল্য।
data basic-card পেমেন্টের জন্য, এটি supportedTypes সাথে নির্দিষ্ট কার্ডের প্রকারগুলি ফিল্টার করার উপায় হিসাবে ব্যবহার করা হবে। অন্যথায় এই প্যারামিটারের ব্যবহার অর্থপ্রদানের পদ্ধতির (পেমেন্ট অ্যাপ) উপর নির্ভর করে। প্রতিটি অর্থপ্রদান পদ্ধতি প্রদান করে ডকুমেন্টেশন পড়ুন।

যখন শিপিংয়ের বিকল্পগুলি থাকে, তখন জিনিসগুলি কিছুটা জটিল হয়ে যায়, কারণ modifiers মোট মূল্য স্থির হতে পারে না এবং গতিশীল পরিবর্তনের প্রয়োজন হয়৷

এটি অর্জন করার জন্য, আপনি modifiers সম্পত্তির additionalDisplayItems এবং total shippingaddresschange এবং shippingoptionchange ইভেন্টে পরিবর্তন করবেন ঠিক যেমন আপনি 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'
}];

ক্রোম 61

মৌলিক কার্ডে সমর্থিত প্রকারগুলি উপলব্ধ

যখন supportedMethods ' basic-card ' হয়, তখন আপনি এখন ' credit ', ' debit ', এবং ' prepaid ' এর মধ্যে কোন ধরনের কার্ড সমর্থিত তা নির্দেশ করতে supportedTypes প্রদান করতে পারেন।

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

আপনার পেমেন্ট গেটওয়ে দিয়ে কার্ডের ধরনটি দুবার চেক করা নিশ্চিত করুন কারণ এই ফিল্টারিংটি কোথা থেকে উৎসারিত হয়েছে তার উপর নির্ভর করে পুরোপুরি কাজ নাও করতে পারে।

ক্রোম 57

PaymentRequest এখন iframes-এর ভিতরে উপলব্ধ

পেমেন্ট রিকোয়েস্ট এপিআই এখন iframe এলিমেন্টে allowpaymentrequest অ্যাট্রিবিউট যোগ করে একটি iframe থেকে কল করা যেতে পারে।

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

ক্রোম 56

মুলতুবি

অর্থপ্রদানের আইটেম তথ্যের অংশ হিসাবে, বিকাশকারীরা pending যুক্ত করতে পারে নির্দেশ করতে পারে যে মূল্য এখনও সম্পূর্ণরূপে নির্ধারিত হয়নি। pending ক্ষেত্র একটি বুলিয়ান মান গ্রহণ করে।

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

এটি সাধারণত শিপিং বা ট্যাক্সের পরিমাণের মতো লাইন আইটেমগুলি দেখানোর জন্য ব্যবহৃত হয় যা শিপিং ঠিকানা বা শিপিং বিকল্পের নির্বাচনের উপর নির্ভর করে। Chrome অর্থপ্রদানের অনুরোধের জন্য UI-তে মুলতুবি থাকা ক্ষেত্রগুলি নির্দেশ করে৷

অনুরোধ প্রদানকারীর নাম

শিপিং বিকল্পের অংশ হিসাবে ( PaymentRequest এর তৃতীয় যুক্তি), ডেভেলপাররা এখন শিপিং ঠিকানার তথ্য থেকে আলাদা অর্থ প্রদানকারীর নাম অনুরোধ করতে requestPayerName যোগ করতে পারেন। requestPayerName একটি বুলিয়ান মান গ্রহণ করে।

শিপিং টাইপ

শিপিং বিকল্পের অংশ হিসাবে ( PaymentRequest এর তৃতীয় যুক্তি), বিকাশকারীরা এখন shippingType যোগ করতে পারেন যাতে অনুরোধ করা যায় যে UI "শিপিং" এর পরিবর্তে "ডেলিভারি" বা "পিকআপ" দেখায়৷ shippingType স্ট্রিং shipping (ডিফল্ট), delivery বা pickup গ্রহণ করে।

শিপিং টাইপ = 'ডেলিভারি'
শিপিং টাইপ="ডেলিভারি"
শিপিং টাইপ = 'পিকআপ'
শিপিং টাইপ="পিকআপ"

সিরিয়ালাইজার ফাংশন PaymentResponse এবং PaymentAddress এ উপলব্ধ

PaymentResponse অবজেক্ট এবং PaymentAddress অবজেক্ট এখন JSON-ক্রমিক। ডেভেলপাররা toJSON() ফাংশন কল করে একটি JSON অবজেক্টে রূপান্তর করতে পারে এবং কষ্টকর toDict() ফাংশন তৈরি করা এড়াতে পারে।

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

পেমেন্ট করতে পারেন

API উপলভ্যতা ছাড়াও, আপনি পেমেন্ট অনুরোধ API চালু করার আগে একজন ব্যবহারকারীর একটি সক্রিয় অর্থপ্রদানের পদ্ধতি আছে কিনা তা দেখতে পারেন। মনে রাখবেন যে এটি ঐচ্ছিক কারণ ব্যবহারকারীরা এখনও পেমেন্ট UI এ একটি নতুন অর্থপ্রদানের পদ্ধতি যোগ করতে পারেন।

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