راهنمای اجرای پرداخت

نمای کلی

وب iOS API

پلتفرم نقشه‌های گوگل برای وب (JS، TS)، اندروید و iOS در دسترس است و همچنین APIهای خدمات وب را برای دریافت اطلاعات در مورد مکان‌ها، مسیرها و مسافت‌ها ارائه می‌دهد. نمونه‌های موجود در این راهنما برای یک پلتفرم نوشته شده‌اند، اما لینک‌های مستندات برای پیاده‌سازی در پلتفرم‌های دیگر ارائه شده است.

همین حالا بسازش!

ابزار Quick Builder در کنسول گوگل کلود به شما امکان می‌دهد با استفاده از یک رابط کاربری تعاملی که کد جاوا اسکریپت را برای شما تولید می‌کند، فرم تکمیل خودکار آدرس بسازید.

خرید و سفارش آنلاین به بخش جدایی‌ناپذیری از زندگی ما تبدیل شده است. از خدمات تحویل در همان روز گرفته تا رزرو تاکسی یا سفارش شام، مشتریان انتظار دارند فرآیند پرداخت بدون دردسری داشته باشند.

با این حال، در تمام این برنامه‌ها، وارد کردن آدرس برای صدور صورتحساب یا ارسال، همچنان یک مانع در جریان پرداخت است که می‌تواند هم زمان‌بر و هم دست و پا گیر باشد. یک تجربه پرداخت بدون مشکل در دنیای موبایل، جایی که وارد کردن متن پیچیده روی صفحه نمایش کوچک می‌تواند ناامیدکننده و مانع دیگری برای تبدیل مشتری باشد، اهمیت بیشتری پیدا می‌کند.

این سند، راهنمایی‌های پیاده‌سازی را برای کمک به مشتریان شما در تسریع فرآیند پرداخت با استفاده از قابلیت پیش‌بینی آدرس ارائه می‌دهد.

نمودار زیر APIهای اصلی دخیل در پیاده‌سازی Checkout را نشان می‌دهد. برای بزرگنمایی روی نمودار کلیک کنید.

فعال کردن APIها

برای پیاده‌سازی Checkout، باید APIهای زیر را در کنسول Google Cloud فعال کنید:

برای اطلاعات بیشتر در مورد تنظیمات، به شروع به کار با پلتفرم نقشه‌های گوگل مراجعه کنید.

بخش‌های عملی

بخش‌های بعدی نکات و سفارشی‌سازی‌هایی را پوشش می‌دهند که به شما در بهبود جریان پرداخت کمک می‌کنند.

  • آیکون علامت تیک یک عمل اصلی است.
  • آیکون ستاره یک سفارشی‌سازی اختیاری است اما برای بهبود راهکار توصیه می‌شود.
افزودن قابلیت تکمیل خودکار به فیلدهای ورودی تکمیل خودکار فرم آدرس. افزودن قابلیت تایپ همزمان با استفاده برای بهبود تجربه کاربری در همه پلتفرم‌ها و بهبود دقت آدرس با حداقل تعداد ضربه به کلیدها.
ارائه تایید بصری با Maps Static API مختصات طول و عرض جغرافیایی یک آدرس داده شده را پیدا کنید (جغرافیایی)، یا مختصات طول و عرض جغرافیایی یک مکان جغرافیایی را به یک آدرس تبدیل کنید (جغرافیایی معکوس).
نکاتی برای بهبود بیشتر پرداخت از ویژگی‌های پیشرفته‌ی «تکمیل خودکار مکان» برای بهبود تجربه‌ی پرداخت استفاده کنید.

افزودن قابلیت تکمیل خودکار به فیلدهای ورودی

این مثال از موارد زیر استفاده می‌کند: کتابخانه مکان‌ها، API جاوا اسکریپت نقشه‌ها همچنین موجود است: اندروید | iOS

تکمیل خودکار مکان می‌تواند ورود آدرس در برنامه شما را ساده کند و منجر به نرخ تبدیل بالاتر و تجربه‌ای یکپارچه برای مشتریان شما شود. تکمیل خودکار یک فیلد ورودی سریع و واحد با پیش‌بینی آدرس "type-ahead" ارائه می‌دهد که می‌تواند برای پر کردن خودکار فرم آدرس صورتحساب یا ارسال استفاده شود.

با فعال کردن قابلیت تکمیل خودکار مکان در سبد خرید آنلاین خود، می‌توانید:

  • کاهش خطاهای ورود آدرس
  • تعداد مراحل فرآیند پرداخت را کاهش دهید.
  • تجربه ورود آدرس را در دستگاه‌های تلفن همراه یا پوشیدنی ساده کنید.
  • تعداد دفعات فشردن کلیدها و کل زمان مورد نیاز برای ثبت سفارش توسط مشتری را به میزان قابل توجهی کاهش دهید.

وقتی کاربر کادر ورودی تکمیل خودکار را انتخاب کرده و شروع به تایپ می‌کند، فهرستی از پیش‌بینی‌های آدرس ظاهر می‌شود:

وقتی کاربر آدرسی را از لیست پیش‌بینی‌ها انتخاب می‌کند، می‌توانید از پاسخ برای تأیید آدرس و دریافت موقعیت مکانی استفاده کنید. سپس برنامه شما می‌تواند فیلدهای صحیح فرم ورود آدرس را پر کند:

ویدیوها: فرم‌های آدرس را با قابلیت تکمیل خودکار مکان بهبود دهید:

فرم‌های آدرس

وب

اندروید

آی‌او‌اس

شروع کار با قابلیت تکمیل خودکار مکان

شما می‌توانید با چند خط کد جاوا اسکریپت، قابلیت تکمیل خودکار مکان را در سایت خود بگنجانید.

شما می‌توانید API جاوا اسکریپت Maps را در سایت خود قرار دهید و کتابخانه Places را مشخص کنید، حتی اگر نقشه‌ای نمایش نمی‌دهید. مثال زیر نحوه انجام این کار و اجرای تابع مقداردهی اولیه را نشان می‌دهد.

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

جاوا اسکریپت 

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 تنظیم کنید تا تطابق‌ها به آدرس‌های کامل خیابان محدود شود. درباره typeهای پشتیبانی‌شده در درخواست‌های Place Autocomplete بیشتر بدانید.
  • اگر نیازی به جستجو در سراسر جهان ندارید، محدودیت‌ها و بایاس‌های مناسب را تنظیم کنید. می‌توانید از چندین پارامتر برای بایاس یا محدود کردن تطابق‌ها به مناطق خاص استفاده کنید.
    • bounds برای تعیین مرزهای مستطیلی برای محدود کردن یک ناحیه استفاده کنید. strictBounds برای اطمینان از اینکه فقط آدرس‌های موجود در آن نواحی بازگردانده می‌شوند، استفاده کنید.
    • componentRestrictions برای محدود کردن پاسخ‌ها به مجموعه‌ای خاص از کشورها استفاده کنید.
  • فیلدها را در صورت از دست رفتن فیلدهای خاص در تطابق، قابل ویرایش بگذارید و به مشتریان اجازه دهید در صورت لزوم آدرس را به‌روزرسانی کنند. از آنجا که اکثر آدرس‌های برگردانده شده توسط Place Autocomplete حاوی شماره‌های فرعی مانند شماره آپارتمان، سوئیت یا واحد نیستند، این مثال تمرکز را به خط ۲ آدرس منتقل می‌کند تا کاربر را تشویق کند که در صورت لزوم آن اطلاعات را پر کند.

ارائه تایید بصری با Maps Static API

پس از اینکه مشتری آدرس خود را وارد کرد، با یک نقشه ثابت، تأیید بصری محل تحویل یا تحویل کالا را ارائه دهید. این کار به مشتری اطمینان بیشتری می‌دهد که آدرس صحیح است و موارد تحویل یا تحویل ناموفق را کاهش می‌دهد. می‌توانید نقشه ثابت را در صفحه ورود آدرس نمایش دهید یا پس از تکمیل تراکنش، آن را در ایمیل تأیید قرار دهید.

شما می‌توانید هر دوی این موارد استفاده را با Maps Static API پیاده‌سازی کنید، که یک نسخه تصویری از نقشه را به هر تگ تصویری در یک صفحه یا ایمیل اضافه می‌کند.

شروع کار با API استاتیک نقشه‌ها

شما می‌توانید از طریق فراخوانی یک سرویس وب، از API استاتیک نقشه‌ها استفاده کنید که یک نسخه تصویری از نقشه را بر اساس پارامترهایی که شما مشخص می‌کنید، ایجاد می‌کند. مانند نقشه پویا، می‌توانید نوع نقشه را مشخص کنید، از همان سبک‌های مبتنی بر ابر استفاده کنید و نشانگرهایی را برای تمایز مکان اضافه کنید.

فراخوانی زیر یک نقشه راه با اندازه ۶۰۰x۳۰۰ پیکسل را نشان می‌دهد که مرکز آن گوگل‌پلکس در مانتین ویو، کالیفرنیا با زوم سطح ۱۳ است. همچنین یک نشانگر آبی رنگ برای محل تحویل و یک سبک نقشه آنلاین را مشخص می‌کند.

      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

این به بخش‌های زیر تقسیم می‌شود:

آدرس API https://maps.googleapis.com/maps/api/staticmap?
مرکز نقشه مرکز=۳۷.۴۲۲۱۷۷،-۱۲۲.۰۸۴۰۸۲
سطح بزرگنمایی بزرگنمایی=۱۳
اندازه تصویر اندازه=600x300
نوع نقشه maptype=نقشه راه
نشانگرهای مکان فروشگاه نشانگرها=رنگ:آبی%7برچسب:C%7C37.422177,-122.084082
سبک نقشه ابری map_id=8f348d1b5a61d4bb
کلید API کلید = کلید API شما
پارامتر کانال راه‌حل . برای اطلاعات بیشتر، به مستندات پارامتر مراجعه کنید. solution_channel=GMP_guides_checkout_v1_a

درخواست، تصویر زیر را برمی‌گرداند:

برای اطلاعات بیشتر در مورد گزینه‌های API استاتیک Maps، به مستندات مراجعه کنید.

نکاتی برای بهبود بیشتر پرداخت

شما می‌توانید با بهره‌گیری از برخی از ویژگی‌های پیشرفته‌ای که تکمیل خودکار مکان ارائه می‌دهد، تجربه مشتری خود را بهبود بخشید. در اینجا چند نکته برای بهبود کادر ورود آدرس تکمیل خودکار شما آورده شده است:

  • کاربران اجازه دهید بر اساس نام یک کسب و کار یا مکان مورد علاقه، آدرسی را وارد کنند. سرویس پیش‌بینی «تایپ جلوتر» نه تنها برای آدرس‌ها کار می‌کند، بلکه می‌توانید نام‌های کسب و کار یا مکان‌های دیدنی را نیز وارد کنید. پس از اینکه کاربر نام کسب و کار را وارد کرد، می‌توانید آدرس را با فراخوانی Place Details بازیابی کنید. برای اینکه هم آدرس‌ها و هم نام‌های موسسه قابل وارد شدن باشند، ویژگی types را از تعریف Autocomplete حذف کنید.
  • ظاهر و حس کادر تکمیل خودکار مکان را متناسب با سبک وب‌سایت خود سفارشی کنید. همچنین می‌توانید ویجت تکمیل خودکار را متناسب با ظاهر و حس سبد خرید خود استایل دهید. می‌توانید از کلاس‌های CSS برای سفارشی‌سازی ظاهر ویجت استفاده کنید. برای اطلاعات بیشتر، به بخش «تکمیل خودکار سبک» مراجعه کنید.
  • یک رابط کاربری سفارشی بسازید. می‌خواهید به جای استفاده از رابط کاربری طراحی‌شده توسط گوگل، یک رابط کاربری سفارشی بسازید، سرویس تکمیل خودکار مکان را به صورت برنامه‌نویسی فراخوانی کنید تا پیش‌بینی‌ها را برای یک ورودی مشخص بازیابی کنید. می‌توانید پیش‌بینی‌های تکمیل خودکار مکان را به صورت برنامه‌نویسی در جاوا اسکریپت ، اندروید و iOS بازیابی کنید و همچنین API سرویس‌های وب را مستقیماً از طریق API مکان‌ها فراخوانی کنید.