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

نظرة عامة

web iOS API

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

لنبدأ الآن

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

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

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

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

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

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

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

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

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

تتناول الأقسام التالية النصائح والتخصيصات لمساعدتكم في تحسين مسار الدفع.

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

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

يستخدم هذا المثال: مكتبة الأماكن، Maps JavaScript API تتوفّر أيضًا: Android | iOS

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

من خلال دمج خدمة "الإكمال التلقائي للأماكن" في سلّة التسوّق على الإنترنت، يمكنكم إجراء ما يلي:

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

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

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

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

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

الويب

Android

iOS

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

يمكنكم دمج خدمة "الإكمال التلقائي للأماكن" في موقعكم الإلكتروني باستخدام بضعة أسطر من JavaScript.

يمكنكم تضمين Maps JavaScript API على موقعكم الإلكتروني وتحديد الـ Places library، حتى إذا لم تكونوا تعرضون خريطة. يوضّح المثال التالي كيفية إجراء ذلك وتنفيذ دالة الإعداد. 

<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();
}

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;

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

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

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

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

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

توفير تأكيد مرئي باستخدام Maps Static API

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

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

بدء استخدام Maps Static API

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

يعرض الطلب التالي خريطة طريق بحجم 600×300 بكسل، متمركزة حول Googleplex في ماونتن فيو، كاليفورنيا، بمستوى تكبير/تصغير 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
مستوى التكبير/التصغير zoom=13
حجم الصورة size=600x300
نوع الخريطة 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

يعرض الطلب الصورة التالية:

لمزيد من المعلومات عن خيارات Maps Static API، يُرجى الاطّلاع على المستندات.

نصائح لتحسين ميزة "الدفع" بشكل أكبر

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

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