معالجة معلومات الدفع الاختيارية مع مشغّل الخدمات

كيفية تكييف تطبيق الدفع المستند إلى الويب مع Web Payments وتقديم تجربة مستخدم أفضل للعملاء.

Eiji Kitamura

بعد أن يتلقّى تطبيق الدفع المستند إلى الويب طلب دفع ويبدأ في الدفع معاملة، سيتخذ مشغّل الخدمات إجراءً كمركز للتواصل بين التاجر وتطبيق الدفع. هذه المشاركة كيف يمكن لتطبيق دفع أن يمرر معلومات عن طريقة الدفع أو عنوان الشحن أو معلومات الاتصال بالتاجر باستخدام عامل خدمة.

إبلاغ التاجر بتغيير طريقة الدفع

يمكن لتطبيقات الدفع إتاحة وسائل دفع متعددة بطرق دفع مختلفة.

على سبيل المثال، في الجدول أعلاه، تشتمل محفظة العميل أ المستندة إلى الويب على رصيدين بطاقات وحساب مصرفي واحد مسجَّل. في هذه الحالة، سيعالج التطبيق ثلاث وسائل دفع (****1234 و****4242 و******123) ودفعتان (جهة إصدار بطاقة الائتمان 1 والمصرف X). في معاملة الدفع التطبيق يمكن أن يتيح للعميل اختيار إحدى وسائل الدفع واستخدامها للدفع للتاجر

يمكن أن يُعلم تطبيق الدفع التاجر بطريقة الدفع التي استخدمها العميل تم اختياره قبل إرسال الرد الكامل بشأن الدفع. يكون ذلك مفيدًا عندما يريد التاجر إطلاق حملة خصم لعلامة تجارية معيّنة لطرق الدفع، على سبيل المثال.

باستخدام واجهة برمجة التطبيقات Payment Handler API، يمكن لتطبيق الدفع إرسال "تغيير في طريقة الدفع". الحدث إلى التاجر من خلال مشغّل الخدمات لإبلاغ طريقة الدفع الجديدة المُعرف. يجب أن يستدعي عامل الخدمة PaymentRequestEvent.changePaymentMethod() باستخدام طريقة الدفع الجديدة المعلومات.

يمكن لتطبيقات الدفع تمرير عنصر methodDetails كوسيطة ثانية اختيارية. لصالح PaymentRequestEvent.changePaymentMethod(). يمكن أن يحتوي هذا الكائن على تفاصيل طريقة دفع عشوائية مطلوبة لكي يتمكّن التاجر من معالجة التغيير فعالية.

[معالج الدفع] 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;
…

استخدِم الكائن لتعديل واجهة المستخدم على الواجهة الأمامية. الاطّلاع على الاطّلاع على آخر الأخبار تفاصيل الدفع.

إبلاغ التاجر بتغيير عنوان الشحن

يمكن أن توفّر تطبيقات الدفع عنوان الشحن الخاص بالعميل إلى التاجر كجزء من هذه التطبيقات. معاملة الدفع

يُعدّ هذا الإجراء مفيدًا للتجّار لأنّه يمكنهم تفويض جمع العناوين إلى تطبيقات الدفع. ولأنّ بيانات العنوان سيتم تقديمها بتنسيق النموذج تنسيق البيانات، يمكن أن يتوقع التاجر استلام عناوين الشحن في بنية متسقة.

بالإضافة إلى ذلك، يمكن للعملاء تسجيل معلومات العنوان في تطبيق الدفع المفضل وإعادة استخدامه لتجار مختلفين.

يمكن لتطبيقات الدفع توفير واجهة مستخدم لتعديل عنوان الشحن أو معلومات العنوان المسجّلة مسبقًا للعميل في معاملة دفع. عند تحديد عنوان الشحن بشكل مؤقت، يمكن لتطبيق الدفع السماح على معرفة معلومات العنوان التي تم إخفاؤها. يوفّر ذلك للتجّار مزايا متعددة وهي:

• يمكن للتاجر تحديد ما إذا كان العميل يستوفي القيود الإقليمية. لشحن السلعة (مثلاً، للاستخدام المحلي فقط)
• يمكن للتاجر تغيير قائمة خيارات الشحن استنادًا إلى منطقة عنوان الشحن (على سبيل المثال، العنوان العادي الدولي أو السريع).
• يمكن للتاجر تطبيق تكلفة الشحن الجديدة استنادًا إلى العنوان وتعديل والسعر الإجمالي.

باستخدام واجهة برمجة التطبيقات Payment Handler API، يمكن لتطبيق الدفع إرسال "عنوان شحن". تغيير" الحدث الذي يتم إرساله إلى التاجر من عامل الخدمة لإعلامه بالشحن الجديد الخاص بك. يجب أن يستدعي عامل الخدمة 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;
…

استخدِم الكائن لتعديل واجهة المستخدم على الواجهة الأمامية. الاطّلاع على الاطّلاع على آخر الأخبار تفاصيل الدفع.

إبلاغ التاجر بتغيير خيار الشحن

خيارات الشحن هي طرق تسليم يستخدمها التجّار لشحن السلع التي تمّ شراؤها إلى العميل. تشمل خيارات الشحن المعتادة ما يلي:

• شحن مجاني
• شحن سريع
• الشحن الدولي
• شحن دولي مميّز

ويتوفر لكل خيار تكلفته الخاصة. عادةً ما تكون الطرق/الخيارات الأسرع أكثر تكلفة.

يمكن للتجّار الذين يستخدمون Payment Request API تفويض هذا الخيار إلى دفعة. التطبيق. يمكن لتطبيق الدفع استخدام المعلومات لإنشاء واجهة مستخدم والسماح العميل تحديد خيار الشحن.

إن قائمة خيارات الشحن المحددة في واجهة برمجة تطبيقات طلب الدفع للتاجر هي إلى مشغّل الخدمات لتطبيق الدفع كخاصية 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 });

يمكن أن يخبر تطبيق الدفع التاجر بخيار الشحن الذي يستخدمه العميل الذي تم اختياره. وهذا أمر مهم لكل من التاجر والعميل، لأنه يؤدي تغيير خيار الشحن إلى تغيير السعر الإجمالي أيضًا. احتياجات التاجر على اطلاعهم على آخر سعر للتحقق من الدفع في وقت لاحق يحتاج العميل أيضًا إلى أن يكون على دراية بالتغيير.

باستخدام واجهة برمجة التطبيقات Payment Handler API، يمكن لتطبيق الدفع إرسال "خيار شحن". تغيير" الحدث إلى التاجر من مشغّل الخدمات. يجب على عامل الخدمة استدعاء 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

[معالج الدفعات] مشغّل الخدمات

[معالج الدفع] الواجهة الأمامية

لتجربتها:

1. انتقِل إلى https://paymentrequest-demo.glitch.me/.
2. انتقل إلى أسفل الصفحة.
3. اضغط على زر إضافة طريقة دفع.
4. أدخِل https://paymenthandler-demo.glitch.me في الحقل معرّف طريقة الدفع.
5. اضغط على زر الدفع بجانب الحقل.