वेब पर आधारित पेमेंट ऐप्लिकेशन को वेब पेमेंट के हिसाब से कैसे बनाएं और ग्राहकों को बेहतर उपयोगकर्ता अनुभव कैसे दें.
जब किसी वेब-आधारित पेमेंट ऐप्लिकेशन से पेमेंट का अनुरोध मिलता है और पेमेंट का लेन-देन शुरू हो जाता है, तो सर्विस वर्कर, व्यापारी/कंपनी और पेमेंट ऐप्लिकेशन के बीच कम्यूनिकेशन के लिए हब के रूप में काम करेगा. इस पोस्ट में बताया गया है कि कोई पेमेंट ऐप्लिकेशन, सर्विस वर्कर का इस्तेमाल करके व्यापारी/कंपनी को पेमेंट का तरीका, शिपिंग पता या संपर्क जानकारी कैसे भेज सकता है.
पेमेंट का तरीका बदलने के बारे में व्यापारी/कंपनी को बताएं
पेमेंट ऐप्लिकेशन में, पेमेंट के अलग-अलग तरीकों से पेमेंट किया जा सकता है.
| ग्राहक | पैसे चुकाने का तरीका | पैसे चुकाने का तरीका |
|---|---|---|
| जवाब | क्रेडिट कार्ड जारी करने वाला नंबर 1 | ****1234 |
| क्रेडिट कार्ड जारी करने वाला नंबर 1 | ****4242 |
|
| बैंक X | ******123 |
|
| B | क्रेडिट कार्ड जारी करने वाला नंबर 2 | ****5678 |
| बैंक X | ******456 |
उदाहरण के लिए, ऊपर दी गई टेबल में, ग्राहक A के वेब आधारित वॉलेट में दो क्रेडिट कार्ड और एक बैंक खाता रजिस्टर किया गया है. इस मामले में, ऐप्लिकेशन पैसे चुकाने के तीन तरीके (****1234, ****4242, ******123) और पैसे चुकाने के दो तरीके (क्रेडिट कार्ड जारी करने वाला 1 और बैंक X) मैनेज कर रहा है. पैसे चुकाने के लेन-देन पर, पेमेंट ऐप्लिकेशन, खरीदार को पैसे चुकाने का एक तरीका चुनने और उससे व्यापारी/कंपनी के लिए पैसे चुकाने का विकल्प दे सकता है.
पेमेंट ऐप्लिकेशन, व्यापारी/कंपनी को पेमेंट का पूरा जवाब भेजने से पहले, यह बता सकता है कि ग्राहक ने पेमेंट का कौनसा तरीका चुना है. उदाहरण के लिए, यह तब काम आता है, जब व्यापारी/कंपनी/कारोबारी, पेमेंट के किसी खास तरीके के लिए छूट वाला कैंपेन चलाना चाहता हो.
पेमेंट हैंडलर एपीआई की मदद से, पेमेंट ऐप्लिकेशन किसी सर्विस वर्कर की मदद से व्यापारी को "पेमेंट के तरीके में बदलाव" इवेंट भेज सकता है. इससे पेमेंट के नए तरीके के आइडेंटिफ़ायर को सूचना दी जा सकती है. सर्विस वर्कर को पेमेंट के नए तरीके की जानकारी के साथ
PaymentRequestEvent.changePaymentMethod() को शुरू करना चाहिए.
पेमेंट ऐप्लिकेशन, PaymentRequestEvent.changePaymentMethod() के लिए methodDetails ऑब्जेक्ट को दूसरे विकल्प के तौर पर पास कर सकते हैं. इस ऑब्जेक्ट में, आर्बिट्ररी पेमेंट के तरीके की जानकारी हो सकती है. यह जानकारी व्यापारी/कंपनी/कारोबारी के लिए, बदलाव इवेंट को प्रोसेस करने के लिए ज़रूरी होती है.
[पेमेंट हैंडलर] 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);
…
जब व्यापारी/कंपनी को पेमेंट
अनुरोध एपीआई से paymentmethodchange इवेंट मिलता है, तो वह पेमेंट के तरीके की जानकारी अपडेट कर सकता है. साथ ही,
PaymentDetailsUpdate
ऑब्जेक्ट के साथ जवाब दे सकता है.
[व्यापारी]
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
ऑब्जेक्ट के साथ रिज़ॉल्व हो जाएगा.
[पेमेंट हैंडलर] 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;
…
फ़्रंटएंड पर यूज़र इंटरफ़ेस (यूआई) को अपडेट करने के लिए, ऑब्जेक्ट का इस्तेमाल करें. पेमेंट के अपडेट की गई जानकारी देखें देखें.
व्यापारी/कंपनी को शिपिंग पता बदलने के बारे में बताएं
पेमेंट ऐप्लिकेशन, पेमेंट के लेन-देन के दौरान खरीदार का शिपिंग पता, व्यापारी/कंपनी को दे सकते हैं.
यह व्यापारियों/कंपनियों/कारोबारियों के लिए फ़ायदेमंद है, क्योंकि वे पते इकट्ठा करने की प्रक्रिया को, पैसे चुकाने वाले ऐप्लिकेशन को सौंप सकते हैं. साथ ही, पते का डेटा स्टैंडर्ड डेटा फ़ॉर्मैट में दिया जाएगा. इसलिए, व्यापारी या कंपनी को शिपिंग पते एक जैसे स्ट्रक्चर में मिल सकते हैं.
इसके अलावा, ग्राहक अपने पसंदीदा पेमेंट ऐप्लिकेशन पर अपने पते की जानकारी रजिस्टर कर सकते हैं. साथ ही, उसे अलग-अलग कारोबारियों के लिए फिर से इस्तेमाल कर सकते हैं.
पेमेंट ऐप्लिकेशन, यूज़र इंटरफ़ेस (यूआई) की सुविधा देते हैं. इसकी मदद से, शिपिंग के पते में बदलाव किया जा सकता है या पेमेंट के लेन-देन के दौरान, ग्राहक के लिए पहले से रजिस्टर किए गए पते की जानकारी चुनी जा सकती है. जब कोई शिपिंग पता कुछ समय के लिए तय किया जाता है, तो पेमेंट ऐप्लिकेशन, व्यापारी/कंपनी को उस पते की जानकारी दे सकता है जिसमें बदलाव किया गया है. इससे कारोबारियों या कंपनियों को कई फ़ायदे मिलते हैं:
- व्यापारी/कंपनी/कारोबारी यह तय कर सकता है कि ग्राहक, सामान की शिपिंग करने के लिए तय की गई क्षेत्रीय पाबंदियों को पूरा करता है या नहीं. उदाहरण के लिए, सिर्फ़ घरेलू.
- कारोबारी, शिपिंग पते के क्षेत्र के आधार पर शिपिंग विकल्पों की सूची बदल सकता है (उदाहरण के लिए, अंतरराष्ट्रीय सामान्य या एक्सप्रेस).
- कोई कारोबारी, पते के आधार पर शिपिंग के लिए खरीदार से लिया जाने वाला नया शुल्क लागू कर सकता है और कुल कीमत को अपडेट कर सकता है.
पेमेंट हैंडलर एपीआई की मदद से, पेमेंट ऐप्लिकेशन, सर्विस वर्कर से व्यापारी या कंपनी को शिपिंग का नया पता भेजने के लिए, "शिपिंग पता बदलें" इवेंट भेज सकता है. सर्विस वर्कर को नए एड्रेस ऑब्जेक्ट से PaymentRequestEvent.changeShippingAddress() शुरू करना चाहिए.
[पेमेंट हैंडलर] 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 इवेंट मिलेगा, ताकि वह अपडेट किए गए PaymentDetailsUpdate के साथ जवाब दे सके.
[व्यापारी]
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
ऑब्जेक्ट के साथ रिज़ॉल्व हो जाएगा.
[पेमेंट हैंडलर] 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;
…
फ़्रंटएंड पर यूज़र इंटरफ़ेस (यूआई) को अपडेट करने के लिए, ऑब्जेक्ट का इस्तेमाल करें. पेमेंट के अपडेट की गई जानकारी देखें देखें.
शिपिंग का विकल्प बदलने के बारे में व्यापारी/कंपनी को बताएं
शिपिंग के विकल्प, डिलीवरी के ऐसे तरीके होते हैं जिनका इस्तेमाल करके व्यापारी, खरीदे गए आइटम किसी खरीदार को भेजते हैं. सामान्य शिपिंग विकल्पों में ये शामिल हैं:
- मुफ़्त शिपिंग
- एक्सप्रेस शिपिंग
- अंतरराष्ट्रीय शिपिंग
- प्रीमियम अंतरराष्ट्रीय शिपिंग
हर एक की अपनी लागत होती है. आम तौर पर, तेज़ तरीके/विकल्प ज़्यादा महंगे होते हैं.
पेमेंट अनुरोध एपीआई का इस्तेमाल करने वाले कारोबारी, यह विकल्प किसी पेमेंट ऐप्लिकेशन को दे सकते हैं. पेमेंट ऐप्लिकेशन इस जानकारी का इस्तेमाल यूज़र इंटरफ़ेस (यूआई) बनाने के लिए कर सकता है और ग्राहक को शिपिंग का विकल्प चुनने की सुविधा देता है.
व्यापारी/कंपनी/कारोबारी के पेमेंट अनुरोध एपीआई में दिए गए शिपिंग विकल्पों की सूची, पेमेंट ऐप्लिकेशन के सर्विस वर्कर के लिए, PaymentRequestEvent की प्रॉपर्टी के तौर पर भेजी जाती है.
[व्यापारी]
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 });
पेमेंट ऐप्लिकेशन, व्यापारी/कंपनी को यह बता सकता है कि ग्राहक ने शिपिंग का कौनसा विकल्प चुना है. यह व्यापारी और ग्राहक, दोनों के लिए ज़रूरी है, क्योंकि शिपिंग का विकल्प बदलने से कुल कीमत भी बदल जाती है. पेमेंट की पुष्टि के लिए, कारोबारी को नई कीमत की जानकारी दी जानी चाहिए. साथ ही, ग्राहक को भी इस बदलाव के बारे में जानकारी होनी चाहिए.
पेमेंट हैंडलर एपीआई की मदद से, पेमेंट ऐप्लिकेशन, सर्विस वर्कर की मदद से व्यापारी या कंपनी को "शिपिंग के विकल्प में बदलाव" इवेंट भेज सकता है. सर्विस वर्कर को नए शिपिंग विकल्प आईडी के साथ
PaymentRequestEvent.changeShippingOption()
शुरू करना चाहिए.
[पेमेंट हैंडलर] 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);
…
व्यापारी/कंपनी को पेमेंट के अनुरोध वाले एपीआई से, shippingoptionchange इवेंट मिलेगा. व्यापारी/कंपनी को इस जानकारी का इस्तेमाल, कुल कीमत अपडेट करने के लिए करना होगा. इसके बाद, अपडेट किए गए PaymentDetailsUpdate के साथ जवाब देना होगा.
[व्यापारी]
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
ऑब्जेक्ट के साथ रिज़ॉल्व हो जाएगा.
[पेमेंट हैंडलर] 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: पेमेंट के तरीके से जुड़ी गड़बड़ी से जुड़ा ऑब्जेक्ट. व्यापारियों/कंपनियों/कारोबारियों से, स्ट्रक्चर्ड गड़बड़ी बताने के लिए कहा जा सकता है. हालांकि, वेब पेमेंट की खास जानकारी देने वाले लेखकों का सुझाव है कि इस रिपोर्ट को आसान स्ट्रिंग में रखें.
नमूना कोड
इस दस्तावेज़ में आपने जो सैंपल कोड देखे हैं उनमें से ज़्यादातर, नीचे दिए गए कामकाजी सैंपल ऐप्लिकेशन से लिए गए हैं:
https://paymenthandler-demo.glitch.me
[पेमेंट हैंडलर] सर्विस वर्कर
[payment handling] फ़्रंटएंड
इसे आज़माने के लिए:
- https://paymentrequest-demo.glitch.me/ पर जाएं.
- पृष्ठ के निचले हिस्से पर जाएं.
- पेमेंट का बटन जोड़ें दबाएं.
- पेमेंट के तरीके के आइडेंटिफ़ायर फ़ील्ड में
https://paymenthandler-demo.glitch.meडालें. - फ़ील्ड के बगल में मौजूद पैसे चुकाएं बटन को दबाएं.