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

نظرة عامة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

لا يتطلب الأمر سوى سطرين من رمز 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. تأخذ الدالة، كما هو موضح في المثال التالي، الإجابة المحددة ويستخرج مكونات العنوان لعرضها في نموذج.

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

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
      

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

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

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

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

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