دليل تنفيذ الدفع

نظرة عامة

الويب iOS واجهة برمجة التطبيقات

تتوفّر "منصة خرائط Google" للويب (JS وTS) وAndroid وiOS. وتوفر أيضًا واجهات برمجة تطبيقات لخدمات الويب للحصول على معلومات عن الأماكن والاتجاهات والمسافات. النماذج الواردة في هذا الدليل مكتوبة لمنصة واحدة، ولكن يتم توفير روابط المستندات للتنفيذ على المنصات الأخرى.

أنشِئه الآن.

Quick Builder في تتيح لك Google Cloud Console إنشاء ميزة الإكمال التلقائي لنموذج العناوين باستخدام واجهة مستخدم تفاعلية تُنشئ رمز JavaScript لك.

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

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

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

يعرض المخطّط التالي واجهات برمجة التطبيقات الأساسية المستخدمة في تنفيذ عملية الدفع. (انقر للتكبير).

تمكين واجهات برمجة التطبيقات

لتنفيذ عملية الدفع، يجب تفعيل واجهات برمجة التطبيقات التالية في Google Cloud Console:

• واجهة برمجة تطبيقات JavaScript للخرائط
• Places API
• واجهة برمجة التطبيقات الثابتة في "خرائط Google"

لمزيد من المعلومات عن الإعداد، يُرجى الاطّلاع على بدء استخدام "منصة خرائط Google"

أقسام الممارسات

في ما يلي بعض النصائح والتخصيصات التي سنتناولها في هذا الموضوع.

• يعد رمز علامة الاختيار من الممارسات الأساسية.
• رمز النجمة هو تخصيص اختياري لكن يُنصح باستخدامه تحسين الحل.

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

ملاحظة: لتتبُّع استخدام نماذج الرموز الخاصة بالحلّ وتحسين جودة الحلول، تُضمِّن Google solution_channel معلَمة طلب البحث في طلبات بيانات من واجهة برمجة التطبيقات في نموذج الرمز المقدّم في هذه الصفحة. لإيقاف هذه الميزة، احذف مَعلمة طلب البحث solution_channel من نموذج الرمز. الاطّلاع على مَعلمة حلول "منصة خرائط Google" للحصول على مزيد من المعلومات

إضافة ميزة "الإكمال التلقائي" إلى حقول الإدخال

يستخدم هذا المثال ما يلي: مكتبة الأماكن وواجهة برمجة تطبيقات JavaScript للخرائط

متوفّر أيضًا: Android | iOS

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

من خلال دمج ميزة الإكمال التلقائي للأماكن في سلة التسوق عبر الإنترنت، يمكنك:

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

عندما يختار المستخدم مربّع الإدخال "الإكمال التلقائي" ويبدأ في الكتابة، ستظهر قائمة تظهر التوقعات:

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

مقاطع الفيديو: تحسين نماذج العناوين باستخدام الإكمال التلقائي للأماكن:

نماذج العناوين

الويب

Android

iOS

بدء استخدام ميزة الإكمال التلقائي للأماكن

لا يتطلب الأمر سوى سطرين من رمز JavaScript لدمج Place Autcomplete في موقعك الإلكتروني.

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

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places&callback=initAutocomplete&solution_channel=GMP_guides_checkout_v1_a">
</script>

بعد ذلك، أضِف مربّع نص إلى صفحتك ليدخله المستخدم:

<input id="autocomplete" placeholder="Enter your address"></input>

أخيرًا، قم بتهيئة خدمة الإكمال التلقائي وربطها بمربع النص المسمى:

function initAutocomplete() {
  // Create the autocomplete object, restricting the search predictions to
  // addresses in the US and Canada.
  autocomplete = new google.maps.places.Autocomplete(address1Field, {
    componentRestrictions: { country: ["us", "ca"] },
    fields: ["address_components", "geometry"],
    types: ["address"],
  });
  address1Field.focus();
  // When the user selects an address from the drop-down, populate the
  // address fields in the form.
  autocomplete.addListener("place_changed", fillInAddress);
}

في المثال السابق، يتم تشغيل أداة معالجة الحدث "place_changed" عندما تحديد المستخدم توقع عنوان، تم تنفيذ الدالة fillInAddress. تأخذ الدالة، كما هو موضح في المثال التالي، الإجابة المحددة ويستخرج مكونات العنوان لعرضها في نموذج.

TypeScript

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }

      case "locality":
        (document.querySelector("#locality") as HTMLInputElement).value =
          component.long_name;
        break;

      case "administrative_area_level_1": {
        (document.querySelector("#state") as HTMLInputElement).value =
          component.short_name;
        break;
      }

      case "country":
        (document.querySelector("#country") as HTMLInputElement).value =
          component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;

  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}
index.ts

ملاحظة: اطّلِع على الدليل حول استخدام TypeScript و"خرائط Google".

JavaScript

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }
      case "locality":
        document.querySelector("#locality").value = component.long_name;
        break;
      case "administrative_area_level_1": {
        document.querySelector("#state").value = component.short_name;
        break;
      }
      case "country":
        document.querySelector("#country").value = component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;
  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}

window.initAutocomplete = initAutocomplete;
index.js

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

شاهد عرضًا توضيحيًا يعمل ورمز مصدر كامل لملء نموذج إدخال العنوان في هذا رمز عينة.

الاعتبارات الواجب مراعاتها عند تنفيذ الإكمال التلقائي للأماكن

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

• في نموذج عنوان، اضبط مَعلمة types على address على قصر المطابقات على عناوين الشوارع الكاملة. مزيد من المعلومات حول الأنواع المتوافقة في قسم طلبات الإكمال التلقائي للأماكن
• تحديد القيود المناسبة والتحيزات إذا لم تكن بحاجة إلى البحث في جميع أنحاء العالم. هناك عدد من المعلمات التي يمكن يمكن استخدامها لتحيز أي تطابق أو حصره على مناطق معينة فقط.
  • يمكن استخدام bounds لضبط الحدود المستطيلة لفرض قيود على مساحة معيّنة، واستخدام strictBounds للتأكد من إرجاع العناوين في هذه المناطق فقط.
  • استخدِم componentRestrictions لحصر الردود على مجموعة محدّدة من البلدان.
• ترك الحقول قابلة للتعديل في حال فقدان حقول معيّنة من المطابقة والسماح للعملاء لتحديث العنوان إذا لزم الأمر. نظرًا لأن معظم العناوين التي تعرضها ميزة "الإكمال التلقائي" للأماكن لا تحتوي على أرقام المباني الفرعية مثل أرقام الشقة أو الجناح أو الوحدات السكنية، فهذه المثال ينقل التركيز إلى سطر العنوان 2 لتشجيع المستخدم على ملء ذلك المعلومات إذا لزم الأمر.

تقديم تأكيد مرئي باستخدام واجهة برمجة التطبيقات الثابتة للخرائط

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

ويمكن إتمام كلتا حالتي الاستخدام هاتين من خلال Maps Static API، التي تضيف نسخة صورة من الخريطة إلى أي علامة صورة داخل صفحة أو رسالة إلكترونية.

الخطوات الأولى لاستخدام واجهة برمجة التطبيقات الثابتة للخرائط

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

تظهر المكالمة التالية خارطة طريق بحجم 600 × 300 بكسل، متمركزة في مقر شركة Google في مدينة ماونتن فيو بولاية كاليفورنيا عند مستوى التكبير/التصغير 13. ويحدّد أيضًا موقع تسليم باللون الأزرق. محدد ونمط خريطة عبر الإنترنت.

      https://maps.googleapis.com/maps/api/staticmap?center=37.422177,-122.084082
      &zoom=13
      &size=600x300
      &maptype=roadmap
      &markers=color:blue%7Clabel:S%7C37.422177,-122.084082
      &map_id=8f348d1b5a61d4bb
      &key=YOUR_API_KEY
      &solution_channel=GMP_guides_checkout_v1_a
      

ينقسم ذلك إلى الأقسام التالية:

عنوان URL لواجهة برمجة التطبيقات	https://maps.googleapis.com/maps/api/staticmap?
مركز الخرائط	Center=37.422177,-122.084082
مستوى التكبير	تكبير/تصغير=13
حجم الصورة	الحجم=600 × 300
نوع الخريطة	maptype=roadmap
علامات المواقع الجغرافية للمتجر	markers=color:blue%7Clabel:C%7C37.422177,-122.084082
نمط الخريطة في السحابة الإلكترونية	map_id=8f348d1b5a61d4bb
مفتاح واجهة برمجة التطبيقات	key=YOUR_API_KEY
مَعلمة قناة الحل (اطّلِع على مستندات المَعلمات)	solution_channel=GMP_guides_checkout_v1_a

ستصبح هذه الصورة كما هو موضح أدناه:

للحصول على مزيد من المعلومات حول خيارات واجهة برمجة التطبيقات الثابتة للخرائط، يمكنك الاطلاع على المستندات.

نصائح لتعزيز عملية الدفع

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

• السماح للمستخدمين بإدخال عنوان استنادًا إلى اسم النشاط التجاري أو نقطة الاهتمام يجب أن يكون "الكتابة المسبقة" لا تعمل خدمة التنبؤات مع العناوين فحسب، بل يمكنك أيضًا اختيار السماح بإدخال أسماء الأنشطة التجارية أو المعالم. بعد أن يُدخل المستخدم اسم نشاط تجاري، يسهل استرداد العنوان من خلال استدعاء إلى تفاصيل المكان للسماح بإدخال كل من العناوين وأسماء المؤسسات، يُرجى إزالة types من تعريف الإكمال التلقائي.
• تخصيص شكل ومظهر مربع "الإكمال التلقائي" للأماكن للتوافق نمط موقعك الإلكتروني يمكنك أيضًا تصميم أداة الإكمال التلقائي لتتناسب مع شكل سلة التسوّق ومضمونها. تتوفّر مجموعة من فئات CSS لتخصيصها. لمزيد من المعلومات حول كيفية نمط مربع الإكمال التلقائي، قراءة الوثائق.
• إذا أردت إنشاء واجهة مستخدم مخصَّصة لإنشاء واجهة مستخدم مخصصة بدلاً من استخدام واجهة المستخدم التي صممتها Google، يمكنك طلب ضع خدمة الإكمال التلقائي بشكل آلي لاسترداد التوقعات لإدخال معين. يمكنك استرداد توقعات الإكمال التلقائي للأماكن آليًا في JavaScript Android، وiOS بالإضافة إلى استدعاء واجهة برمجة تطبيقات خدمات الويب مباشرةً من خلال واجهة برمجة التطبيقات للأماكن.