مدة معاملة الدفع

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

Eiji Kitamura

Milica Mihajlija

واجهات برمجة التطبيقات Web Payments API هي ميزات دفع مخصّصة ومدمجة في المتصفّح. لأول مرة. باستخدام Web Payments، ودمج التاجر مع تطبيقات الدفع أبسط بينما يتم تبسيط تجربة العملاء وأكثر أمانًا.

لمزيد من المعلومات عن مزايا استخدام Web Payments، اطّلِع على تمكين تطبيقات الدفع باستخدام Web Payments.

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

تتضمن هذه العملية 6 خطوات:

1. يبدأ التاجر معاملة دفع.
2. يعرض التاجر زر دفع.

3. يضغط العميل على زر الدفع.

   

4. يبدأ المتصفّح في تشغيل تطبيق الدفع.

   

5. إذا غيّر العميل أي تفاصيل (مثل خيارات الشحن أو )، يعدّل التاجر تفاصيل المعاملة التي تعكس التغيير.

   

6. بعد تأكيد العميل لعملية الشراء، يتحقّق التاجر من صحة عملية الدفع. وإتمام المعاملة

   

الخطوة 1: بدء التاجر معاملة دفع

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

• طرق الدفع المقبولة وبياناتها لمعالجة المعاملة.
• تفاصيل، مثل السعر الإجمالي (مطلوب) ومعلومات عن السلع.
• الخيارات التي يمكن للتجّار من خلالها طلب معلومات الشحن، مثل الشحن وعنوانك وخيار شحن.
• ويمكن للتجّار أيضًا طلب عنوان إرسال الفواتير واسم الدافع وعنوان بريده الإلكتروني رقم هاتفك.
• يمكن للتجار أيضًا تضمين شحن اختياري النوع (shipping أو delivery أو pickup) في PaymentRequest. تطبيق الدفع استخدام ذلك كتلميح لعرض التسميات الصحيحة في واجهة المستخدم الخاصة بها.

const request = new PaymentRequest([{
  supportedMethods: 'https://bobpay.xyz/pay',
  data: {
    transactionId: '****'
  }
}], {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
}, {
  requestShipping: true,
  requestBillingAddress: true,
  requestPayerEmail: true,
  requestPayerPhone: true,
  requestPayerName: true,
  shippingType: 'delivery'
});

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

للتعرف على كيفية عمل عملية الاكتشاف بالتفصيل، اطلع على إعداد الدفع .

الخطوة 2: يعرض التاجر زر الدفع

يمكن للتجّار توفير العديد من طرق الدفع، ولكن عليهم تقديم معلومات الدفع فقط. والأزرار الأساسية لتلك التي يمكن للعميل استخدامها بالفعل. عرض زر للدفع وهي تجربة مستخدم سيئة. إذا كان بإمكان التاجر أن يتوقع أنّ لن تعمل طريقة الدفع المحدّدة في العنصر "PaymentRequest" مع العميل، يمكنه توفير حل احتياطي أو عدم إظهار هذا الزر على الإطلاق.

باستخدام مثيل PaymentRequest، يمكن للتاجر الاستعلام عمّا إذا كان العميل توفُّر تطبيق الدفع

هل يتوفّر تطبيق الدفع لدى العميل؟

تشير رسالة الأشكال البيانية canMakePayment() طريقة الدفع PaymentRequest التي تبلغ قيمتها true في حال توفّر تطبيق دفع على جهاز العميل. "متاح" يعني أنّ تطبيق الدفع الذي يتيح اكتشاف طريقة دفع، وتثبيت تطبيق الدفع الخاص بالنظام الأساسي، أو أن يكون تطبيق الدفع المستند إلى الويب جاهزًا تسجيلك.

const canMakePayment = await request.canMakePayment();
if (!canMakePayment) {
  // Fallback to other means of payment or hide the button.
}

الخطوة 3: يضغط العميل على زر الدفع

عندما يضغط العميل على زر الدفع، يتصل التاجر برقم show(). لمثيل PaymentRequest الذي يؤدي فورًا إلى إطلاق واجهة مستخدم الدفع.

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

تأجيل إطلاق واجهة المستخدم الخاصة بالدفع

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

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

const getTotalAmount = async () => {
  // Fetch the total amount from the server, etc.
};

try {
  const result = await request.show(getTotalAmount());
  // Process the result…
} catch(e) {
  handleError(e);
}

إذا لم يتم تحديد أي وعود كوسيطة للسمة show()، سيجري المتصفّح تشغيل واجهة مستخدم الدفع على الفور.

الخطوة 4: تشغيل المتصفح لتطبيق الدفع

يمكن للمتصفح تشغيل تطبيق دفع خاص بالنظام الأساسي أو تطبيق دفع مستند إلى الويب. (يمكنك معرفة المزيد حول كيفية تحديد Chrome لتطبيق الدفع الذي إطلاق).

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

يتلقّى التطبيق المعاملة عند إطلاقه المعلومات تمريره إلى الكائن PaymentRequest في الخطوة 1، والذي يتضمن ما يلي:

• بيانات طريقة الدفع
• السعر الإجمالي
• خيارات الدفع

يستخدم تطبيق الدفع معلومات المعاملة لتصنيف واجهة المستخدم.

الخطوة 5: كيف يمكن للتاجر تعديل تفاصيل المعاملات استنادًا إلى إجراءات العميل

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

تتوفر أربعة أنواع من الأحداث التي يمكن أن يتلقّاها التاجر:

• حدث تغيير طريقة الدفع
• حدث تغيير عنوان الشحن
• حدث تغيير خيار الشحن
• حدث التحقّق من هوية التاجر

حدث تغيير طريقة الدفع

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

request.addEventListener('paymentmethodchange', e => {
  e.updateWith({
    // Add discount etc.
  });
});

حدث تغيير عنوان الشحن

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

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

request.addEventListener('shippingaddresschange', e => {
  e.updateWith({
    // Update the details
  });
});

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

حدث تغيير خيار الشحن

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

• شحن عادي - مجاني
• شحن سريع - 5 دولار أمريكي

عندما يعدِّل العميل خيار الشحن في تطبيق للدفع، سيتم إرسال حدث واحد ('shippingoptionchange') إلى التاجر. يمكن للتاجر ثم تحديد تكلفة الشحن وتعديل السعر الإجمالي وإرجاعه إلى تطبيق للدفع.

request.addEventListener('shippingoptionchange', e => {
  e.updateWith({
    // Update the details
  });
});

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

حدث التحقّق من هوية التاجر

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

request.addEventListener('merchantvalidation', e => {
  e.updateWith({
    // Use `e.validateURL` to validate
  });
});

الخطوة 6: يتحقّق التاجر من صحة الدفعة ويُكمل المعاملة.

عندما يفوّض العميل عملية الدفع بنجاح، يتم استخدام طريقة show() الوعد الذي يحلّ PaymentResponse يتضمن عنصر PaymentResponse المعلومات التالية:

• تفاصيل نتائج الدفع
• عنوان الشحن
• خيار الشحن
• معلومات الاتصال

في هذه المرحلة، قد تستمر واجهة مستخدم المتصفّح في إظهار مؤشر تحميل يعني عدم اكتمال المعاملة بعد.

في حال إغلاق تطبيق الدفع بسبب تعذُّر أو خطأ في عملية الدفع، يتم تم رفض وعد إرجاع من "show()" وينهي المتصفح عملية الدفع معاملة.

معالجة الدفعة والتحقق من صحتها

العنصر details في PaymentResponse هو عنصر بيانات اعتماد الدفع الذي تم عرضه. من تطبيق الدفع. يمكن للتاجر استخدام بيانات الاعتماد لمعالجة البيانات أو التحقّق من صحتها. الدفعة. ويعتمد تنفيذ هذه العملية المهمة على معالج الدفع.

إكمال المعاملة أو إعادة المحاولة

بعد أن يحدّد التاجر ما إذا كانت المعاملة قد تمت بنجاح أو تعذّر إكمالها، يمكنه:

• يجب استدعاء طريقة ".complete()" لإكمال المعاملة ورفض مؤشر التحميل.
• اسمح للعميل بإعادة المحاولة من خلال استدعاء طريقة retry().

async function doPaymentRequest() {
  try {
    const request = new PaymentRequest(methodData, details, options);
    const response = await request.show();
    await validateResponse(response);
  } catch (err) {
    // AbortError, SecurityError
    console.error(err);
  }
}

async function validateResponse(response) {
  try {
    const errors = await checkAllValuesAreGood(response);
    if (errors.length) {
      await response.retry(errors);
      return validateResponse(response);
    }
    await response.complete("success");
  } catch (err) {
    // Something went wrong…
    await response.complete("fail");
  }
}
// Must be called as a result of a click
// or some explicit user action.
doPaymentRequest();

الخطوات التالية

• اطّلِع على كيفية الإفصاح عن معرّف طريقة الدفع بالتفصيل في مقالة إعداد طريقة الدفع.
• تعرّف على كيفية إنشاء تطبيق دفع خاص بمنصة دفع دليل مطوّري تطبيقات الدفع على Android
• تعرّف على كيفية إنشاء تطبيق دفع مستنِد إلى الويب في صفحة مطوّر تطبيقات الدفع المستندة إلى الويب الدليل.