वेब पर आधारित पेमेंट ऐप्लिकेशन को वेब पेमेंट के मुताबिक कैसे बनाएं और ग्राहकों को बेहतर उपयोगकर्ता अनुभव कैसे दें.
वेब पर आधारित पेमेंट ऐप्लिकेशन को पेमेंट का अनुरोध मिलने और पेमेंट लेन-देन शुरू होने के बाद, सर्विस वर्कर कारोबारी या कंपनी और पेमेंट ऐप्लिकेशन के बीच बातचीत के लिए हब के तौर पर काम करेगा. इस पोस्ट में बताया गया है कि पेमेंट ऐप्लिकेशन, सर्विस वर्कर का इस्तेमाल करके, पेमेंट के तरीके, शिपिंग पते या संपर्क जानकारी के बारे में जानकारी, कारोबारी या कंपनी को कैसे दे सकता है.
कारोबारी या कंपनी को जानकारी देना
व्यापारी/कंपनी को इन बदलावों के बारे में बताना ज़रूरी है.
पेमेंट का तरीका बदलना
पेमेंट ऐप्लिकेशन, पेमेंट के अलग-अलग तरीकों के साथ-साथ पेमेंट करने के कई तरीके भी इस्तेमाल कर सकते हैं.
| ग्राहक | पेमेंट का तरीका | पेमेंट करने का तरीका |
|---|---|---|
| A | क्रेडिट कार्ड जारी करने वाला बैंक या कंपनी 1 | ****1234 |
| क्रेडिट कार्ड जारी करने वाला बैंक या कंपनी 1 | ****4242 |
|
| बैंक X | ******123 |
|
| B | क्रेडिट कार्ड जारी करने वाला दूसरा बैंक या कंपनी | ****5678 |
| बैंक X | ******456 |
उदाहरण के लिए, ऊपर दी गई टेबल में, ग्राहक A के वेब-आधारित वॉलेट में दो क्रेडिट कार्ड और एक बैंक खाता रजिस्टर है. इस मामले में, ऐप्लिकेशन पेमेंट करने के तीन तरीकों (****1234, ****4242, ******123) और पेमेंट के दो तरीकों (क्रेडिट कार्ड जारी करने वाली कंपनी 1 और बैंक X) को मैनेज कर रहा है. पेमेंट ऐप्लिकेशन, ग्राहक को पेमेंट करने के लिए, पेमेंट के किसी एक तरीके को चुनने और उसका इस्तेमाल करके कारोबारी या कंपनी को पेमेंट करने की सुविधा दे सकता है.
पेमेंट ऐप्लिकेशन, पेमेंट की पूरी जानकारी भेजने से पहले, कारोबारी या कंपनी को यह बता सकता है कि ग्राहक ने पेमेंट का कौनसा तरीका चुना है. यह तब काम आता है, जब कारोबारी या कंपनी को पेमेंट के किसी खास तरीके के लिए, छूट वाला कैंपेन चलाना हो. उदाहरण के लिए, पेमेंट के किसी खास ब्रैंड के लिए.
वेब पर आधारित Payment Handler API की मदद से, पेमेंट ऐप्लिकेशन किसी सर्विस वर्कर के ज़रिए कारोबारी या कंपनी को "पेमेंट का तरीका बदलने" का इवेंट भेज सकता है. इससे, पेमेंट के नए तरीके के आइडेंटिफ़ायर की सूचना दी जा सकती है. सर्विस वर्कर को पेमेंट के नए तरीके की जानकारी के साथ, PaymentRequestEvent.changePaymentMethod() को शुरू करना चाहिए.
पेमेंट ऐप्लिकेशन, PaymentRequestEvent.changePaymentMethod() के लिए वैकल्पिक दूसरे आर्ग्युमेंट के तौर पर methodDetails ऑब्जेक्ट को पास कर सकते हैं. इस ऑब्जेक्ट में, पेमेंट के तरीके की ऐसी जानकारी शामिल हो सकती है जो कारोबारी या कंपनी को बदलाव वाले इवेंट को प्रोसेस करने के लिए ज़रूरी है.
[payment handler] service-worker.js
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'PAYMENT_METHOD_CHANGED':
const newMethod = e.data.paymentMethod;
const newDetails = e.data.methodDetails;
// Redact or check that no sensitive information is passed in
// `newDetails`.
// Notify the merchant of the payment method change
details =
await payment_request_event.changePaymentMethod(newMethod, newDetails);
…
जब कारोबारी या कंपनी को Payment Request API से paymentmethodchange इवेंट मिलता है, तो वह पेमेंट के तरीके की जानकारी अपडेट कर सकती है और PaymentDetailsUpdate ऑब्जेक्ट के साथ जवाब दे सकती है.
[merchant]
request.addEventListener('paymentmethodchange', e => {
if (e.methodName === 'another-pay') {
// Apply $10 discount for example.
const discount = {
label: 'special discount',
amount: {
currency: 'USD',
// The value being string complies the spec
value: '-10.00'
}
};
let total = 0;
details.displayItems.push(discount);
for (let item of details.displayItems) {
total += parseFloat(item.amount.value);
}
// Convert the number back to string
details.total.amount.value = total.toString();
}
// Pass a promise to `updateWith()` and send updated payment details
e.updateWith(details);
});
जब कारोबारी या कंपनी जवाब देगी, तो PaymentRequestEvent.changePaymentMethod() से मिला प्रॉमिस, PaymentRequestDetailsUpdate ऑब्जेक्ट के साथ रिज़ॉल्व हो जाएगा.
[payment handler] service-worker.js
…
// Notify the merchant of the payment method change
details = await payment_request_event.changePaymentMethod(newMethod, newDetails);
// Provided the new payment details,
// send a message back to the frontend to update the UI
postMessage('UPDATE_REQUEST', details);
break;
…
फ़्रंटएंड पर यूज़र इंटरफ़ेस (यूआई) को अपडेट करने के लिए, ऑब्जेक्ट का इस्तेमाल करें. पेमेंट के तरीके की अपडेट की गई जानकारी देखें.
शिपिंग पता बदलना
पेमेंट ऐप्लिकेशन, पेमेंट के लेन-देन के हिस्से के तौर पर, कारोबारी या कंपनी को खरीदार का शिपिंग पता दे सकते हैं.
यह व्यापारियों/कंपनियों के लिए फ़ायदेमंद है, क्योंकि वे पते इकट्ठा करने की ज़िम्मेदारी पेमेंट ऐप्लिकेशन को सौंप सकते हैं. साथ ही, पते का डेटा स्टैंडर्ड डेटा फ़ॉर्मैट में दिया जाएगा. इससे कारोबारी या कंपनी को शिपिंग के पते एक जैसे स्ट्रक्चर में मिलेंगे.
इसके अलावा, ग्राहक अपने पसंदीदा पेमेंट ऐप्लिकेशन में अपने पते की जानकारी रजिस्टर कर सकते हैं. साथ ही, वे अलग-अलग कारोबारियों या कंपनियों के लिए इसका फिर से इस्तेमाल कर सकते हैं.
पेमेंट ऐप्लिकेशन, शिपिंग पते में बदलाव करने या पेमेंट लेन-देन के लिए, ग्राहक के पहले से रजिस्टर किए गए पते की जानकारी चुनने के लिए यूज़र इंटरफ़ेस (यूआई) उपलब्ध करा सकते हैं. जब शिपिंग पता कुछ समय के लिए तय किया जाता है, तो पेमेंट ऐप्लिकेशन, कारोबारी या कंपनी को पते की जानकारी में किए गए बदलावों के बारे में बता सकता है. इससे कारोबारियों या कंपनियों को कई फ़ायदे मिलते हैं:
- कारोबारी यह तय कर सकता है कि खरीदार, सामान को शिप करने के लिए क्षेत्र से जुड़ी पाबंदी को पूरा करता है या नहीं. उदाहरण के लिए, सिर्फ़ घरेलू शिपिंग.
- कोई कारोबारी या कंपनी, शिपिंग पते के क्षेत्र के हिसाब से शिपिंग के विकल्पों की सूची बदल सकती है. जैसे, अंतरराष्ट्रीय रेगुलर या एक्सप्रेस.
- व्यापारी/कंपनी, पते के आधार पर शिपिंग के लिए खरीदार से लिया जाने वाला नया शुल्क लागू कर सकती है और कुल कीमत को अपडेट कर सकती है.
वेब पर आधारित Payment Handler API की मदद से, पेमेंट ऐप्लिकेशन, कारोबारी या कंपनी को "शिपिंग पता बदलने" का इवेंट भेज सकता है. यह इवेंट, सर्विस वर्कर से भेजा जाता है, ताकि नए शिपिंग पते की सूचना दी जा सके. सर्विस वर्कर को नए पते के ऑब्जेक्ट के साथ PaymentRequestEvent.changeShippingAddress() को शुरू करना चाहिए.
[payment handler] service-worker.js
...
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'SHIPPING_ADDRESS_CHANGED':
const newAddress = e.data.shippingAddress;
details =
await payment_request_event.changeShippingAddress(newAddress);
…
मुख्य शब्द: छिपाया गया पता. इस मामले में, कारोबारी या कंपनी को शिपिंग का पूरा पता बताना ज़रूरी नहीं है. इससे खरीदारों की निजता को खतरा हो सकता है. कारोबारी या कंपनी को पते का सिर्फ़ वह हिस्सा मिलता है जिसकी ज़रूरत शिपिंग के लिए खरीदार से लिए जाने वाले शुल्क का हिसाब लगाने के लिए होती है. खास तौर पर, ब्राउज़र, कारोबारी या कंपनी के डीओएम में shippingaddresschange इवेंट को ट्रिगर करने से पहले, पेमेंट ऐप्लिकेशन से मिले पते से organization, phone, recipient, addressLine फ़ील्ड मिटा देगा.
कारोबारी या कंपनी को Payment Request API से shippingaddresschange इवेंट मिलेगा, ताकि वे अपडेट किए गए PaymentDetailsUpdate के साथ जवाब दे सकें.
[merchant]
request.addEventListener('shippingaddresschange', e => {
// Read the updated shipping address and update the request.
const addr = request.shippingAddress;
const details = getPaymentDetailsFromShippingAddress(addr);
// `updateWith()` sends back updated payment details
e.updateWith(details);
});
जब कारोबारी या कंपनी जवाब देगी, तो वापस किया गया प्रॉमिस PaymentRequestEvent.changeShippingAddress(), PaymentRequestDetailsUpdate ऑब्जेक्ट के साथ रिज़ॉल्व हो जाएगा.
[payment handler] service-worker.js
…
// Notify the merchant of the shipping address change
details = await payment_request_event.changeShippingAddress(newAddress);
// Provided the new payment details,
// send a message back to the frontend to update the UI
postMessage('UPDATE_REQUEST', details);
break;
…
फ़्रंटएंड पर यूज़र इंटरफ़ेस (यूआई) को अपडेट करने के लिए, ऑब्जेक्ट का इस्तेमाल करें. पेमेंट के तरीके की अपडेट की गई जानकारी देखें.
शिपिंग के विकल्प में बदलाव के बारे में कारोबारी या कंपनी को जानकारी देना
शिपिंग के विकल्प, डिलीवरी के वे तरीके होते हैं जिनका इस्तेमाल करके कारोबारी या कंपनियां, खरीदे गए सामान को खरीदार तक पहुंचाती हैं. शिपिंग के सामान्य विकल्पों में ये शामिल हैं:
- मुफ़्त शिपिंग
- एक्सप्रेस शिपिंग
- इंटरनैशनल शिपिंग
- प्रीमियम इंटरनैशनल शिपिंग
हर विकल्प की अपनी कीमत होती है. आम तौर पर, तेज़ी से काम करने वाले तरीके और विकल्प ज़्यादा महंगे होते हैं.
Payment Request API का इस्तेमाल करने वाले कारोबारी या कंपनियां, इस विकल्प को पेमेंट ऐप्लिकेशन को सौंप सकती हैं. पेमेंट ऐप्लिकेशन, इस जानकारी का इस्तेमाल करके यूज़र इंटरफ़ेस (यूआई) बना सकता है. साथ ही, ग्राहक को शिपिंग का विकल्प चुनने की सुविधा दे सकता है.
व्यापारी/कंपनी के Payment Request API में बताई गई शिपिंग के विकल्पों की सूची, पेमेंट ऐप्लिकेशन के सर्विस वर्कर को PaymentRequestEvent की प्रॉपर्टी के तौर पर भेजी जाती है.
[merchant]
const request = new PaymentRequest([{
supportedMethods: 'https://bobbucks.dev/pay',
data: { transactionId: '****' }
}], {
displayItems: [{
label: 'Anvil L/S Crew Neck - Grey M x1',
amount: { currency: 'USD', value: '22.15' }
}],
shippingOptions: [{
id: 'standard',
label: 'Standard',
amount: { value: '0.00', currency: 'USD' },
selected: true
}, {
id: 'express',
label: 'Express',
amount: { value: '5.00', currency: 'USD' }
}],
total: {
label: 'Total due',
amount: { currency: 'USD', value : '22.15' }
}
}, { requestShipping: true });
पेमेंट ऐप्लिकेशन, कारोबारी या कंपनी को यह बता सकता है कि ग्राहक ने शिपिंग का कौनसा विकल्प चुना है. यह कारोबारी या कंपनी और खरीदार, दोनों के लिए ज़रूरी है. इसकी वजह यह है कि शिपिंग का विकल्प बदलने से, कुल कीमत भी बदल जाती है. पेमेंट की पुष्टि करने के लिए, कारोबारी या कंपनी को नई कीमत की जानकारी देनी होगी. साथ ही, खरीदार को भी इस बदलाव के बारे में बताना होगा.
Payment Handler API की मदद से, पेमेंट ऐप्लिकेशन, सर्विस वर्कर से कारोबारी या कंपनी को "शिपिंग का विकल्प बदलने" का इवेंट भेज सकता है. सर्विस वर्कर को शिपिंग के नए विकल्प के आईडी के साथ, PaymentRequestEvent.changeShippingOption() को कॉल करना चाहिए.
[payment handler] service-worker.js
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'SHIPPING_OPTION_CHANGED':
const newOption = e.data.shippingOptionId;
details =
await payment_request_event.changeShippingOption(newOption);
…
कारोबारी या कंपनी को Payment Request API से shippingoptionchange इवेंट मिलेगा. कारोबारी या कंपनी को इस जानकारी का इस्तेमाल करके, कुल कीमत को अपडेट करना चाहिए. इसके बाद, अपडेट किए गए PaymentDetailsUpdate के साथ जवाब देना चाहिए.
[merchant]
request.addEventListener('shippingoptionchange', e => {
// selected shipping option
const shippingOption = request.shippingOption;
const newTotal = {
currency: 'USD',
label: 'Total due',
value: calculateNewTotal(shippingOption),
};
// `updateWith()` sends back updated payment details
e.updateWith({ total: newTotal });
});
जब कारोबारी या कंपनी जवाब देगी, तो PaymentRequestEvent.changeShippingOption() से मिला प्रॉमिस, PaymentRequestDetailsUpdate ऑब्जेक्ट के साथ रिज़ॉल्व हो जाएगा.
[payment handler] service-worker.js
…
// Notify the merchant of the shipping option change
details = await payment_request_event.changeShippingOption(newOption);
// Provided the new payment details,
// send a message back to the frontend to update the UI
postMessage('UPDATE_REQUEST', details);
break;
…
फ़्रंटएंड पर यूज़र इंटरफ़ेस (यूआई) को अपडेट करने के लिए, ऑब्जेक्ट का इस्तेमाल करें. पेमेंट के तरीके की अपडेट की गई जानकारी देखें.
पेमेंट के तरीके की अपडेट की गई जानकारी दिखती है
जब कारोबारी या कंपनी, पेमेंट की जानकारी अपडेट कर लेगी, तब .changePaymentMethod(), .changeShippingAddress(), और .changeShippingOption() से मिले प्रॉमिस, एक सामान्य PaymentRequestDetailsUpdate ऑब्जेक्ट के साथ रिज़ॉल्व हो जाएंगे. पेमेंट हैंडलर, नतीजे का इस्तेमाल करके यूज़र इंटरफ़ेस (यूआई) में, अपडेट की गई कुल कीमत और शिपिंग के विकल्प दिखा सकता है.
कारोबारी या कंपनी, इन वजहों से गड़बड़ियां दिखा सकती है:
- पेमेंट का तरीका स्वीकार नहीं किया जाता.
- शिपिंग पता, उन देशों या इलाकों से बाहर का है जहां शिपिंग की सुविधा उपलब्ध है.
- शिपिंग पते में अमान्य जानकारी है.
- दिए गए शिपिंग पते या किसी अन्य वजह से, शिपिंग का विकल्प नहीं चुना जा सकता.
गड़बड़ी की स्थिति दिखाने के लिए, इन प्रॉपर्टी का इस्तेमाल करें:
error: गड़बड़ी की जानकारी देने वाली स्ट्रिंग, जिसे कोई भी व्यक्ति आसानी से पढ़ सकता है. यह खरीदारों को दिखाने के लिए सबसे सही स्ट्रिंग है.shippingAddressErrors:AddressErrorsयह ऐसा ऑब्जेक्ट है जिसमें पते की हर प्रॉपर्टी के लिए, गड़बड़ी की स्ट्रिंग की पूरी जानकारी होती है. यह तब काम आता है, जब आपको कोई ऐसा फ़ॉर्म खोलना हो जिसमें ग्राहक अपना पता बदल सके और आपको उसे सीधे अमान्य फ़ील्ड पर ले जाना हो.paymentMethodErrors: पेमेंट के तरीके से जुड़ी गड़बड़ी का ऑब्जेक्ट. व्यापारियों/कंपनियों से स्ट्रक्चर्ड गड़बड़ी देने के लिए कहा जा सकता है. हालांकि, Web Payments के स्पेसिफ़िकेशन लेखकों का सुझाव है कि इसे एक सामान्य स्ट्रिंग के तौर पर रखा जाए.