หน้านี้ได้รับการแปลโดย Cloud Translation API

คู่มือการติดตั้งการชําระเงิน

ภาพรวม

เว็บ iOS API

Google Maps Platform มีให้บริการสำหรับเว็บ (JS, TS), Android และ iOS และยังมี API บริการเว็บสำหรับรับข้อมูลเกี่ยวกับสถานที่ เส้นทาง และระยะทาง ตัวอย่างในคู่มือนี้เขียนขึ้นสำหรับแพลตฟอร์มเดียว แต่ มีให้สำหรับใช้งานในแพลตฟอร์มอื่นๆ ด้วย

สร้างเลย!

เครื่องมือสร้างอย่างรวดเร็วใน Google Cloud Console ช่วยให้คุณสร้างการเติมข้อความอัตโนมัติในแบบฟอร์มที่อยู่ได้โดยใช้ UI แบบอินเทอร์แอคทีฟที่สร้างโค้ด JavaScript ให้กับคุณ

การช็อปปิ้งและสั่งซื้อออนไลน์กลายเป็นเรื่องทั่วไปในชีวิตของเรา จากวันเดียวกัน บริการจัดส่งไปจนถึงการจองรถแท็กซี่หรือสั่งอาหารเย็น ลูกค้าต่างคาดหวังว่า ให้กระบวนการชำระเงินที่ราบรื่น

แต่ในแอปพลิเคชันเหล่านี้ทั้งหมด รายการที่อยู่สำหรับ การเรียกเก็บเงินหรือการจัดส่งยังคงสะดุดอยู่ 1 บล็อกในขั้นตอนการชำระเงินซึ่งอาจเป็นได้ทั้ง 2 กรณี ยุ่งยากและยุ่งยาก ประสบการณ์การชำระเงินที่ราบรื่นมีความสำคัญมากยิ่งขึ้นไปอีก ในโลกอุปกรณ์เคลื่อนที่ ซึ่งการป้อนข้อความที่ซับซ้อนบนหน้าจอขนาดเล็กอาจทำให้รู้สึกหงุดหงิด และยังเป็นอุปสรรคต่อการทำ Conversion จากลูกค้าอีกด้วย

หัวข้อนี้ให้คำแนะนำในการติดตั้งใช้งานเพื่อช่วยให้ลูกค้าดำเนินการ กระบวนการชำระเงินที่มีการป้อนที่อยู่แบบคาดคะเน

แผนภาพต่อไปนี้แสดง API หลักที่เกี่ยวข้องในการใช้งาน Checkout (คลิกเพื่อขยาย)

กำลังเปิดใช้ API

หากต้องการใช้การชำระเงิน คุณต้องเปิดใช้ API ต่อไปนี้ใน Google Cloud Console

โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าที่ เริ่มต้นใช้งาน Google Maps Platform

ส่วนเวชปฏิบัติ

ต่อไปนี้คือเคล็ดลับและการปรับแต่งที่เราจะกล่าวถึงในหัวข้อนี้

การใช้ไอคอนเครื่องหมายถูกเป็นแนวทางปฏิบัติหลัก
ไอคอนรูปดาวเป็นการปรับแต่งที่ไม่บังคับ แต่แนะนำให้ปรับแต่งเพื่อ ปรับปรุงโซลูชันได้

	การเพิ่มการเติมข้อความอัตโนมัติในช่องป้อนข้อมูล	ป้อนข้อมูลแบบฟอร์มที่อยู่โดยอัตโนมัติ เพิ่มฟังก์ชันการพิมพ์ขณะใช้งานเพื่อปรับปรุงผู้ใช้ ทำงานในทุกแพลตฟอร์มและปรับปรุงความถูกต้องของที่อยู่ด้วยการกดแป้นพิมพ์น้อยที่สุด
	ส่งภาพยืนยันด้วย Maps Static API	ค้นหาพิกัดละติจูด/ลองจิจูดของที่อยู่ที่ระบุ (การระบุพิกัดทางภูมิศาสตร์) หรือแปลงพิกัดละติจูด/ลองจิจูดของสถานที่ตั้งทางภูมิศาสตร์เป็น ที่อยู่ (การเข้ารหัสพิกัดภูมิศาสตร์แบบย้อนกลับ)
	เคล็ดลับในการเพิ่มประสิทธิภาพของ Checkout	ใช้ฟีเจอร์การเติมข้อความอัตโนมัติในการเติมข้อมูลอัตโนมัติเพื่อให้ได้รับประสบการณ์การชำระเงิน ได้ดียิ่งขึ้น

หมายเหตุ: เพื่อติดตามการนำตัวอย่างโค้ดโซลูชันมาใช้ และปรับปรุงคุณภาพโซลูชัน Google ได้รวมsolution_channel พารามิเตอร์การค้นหาในการเรียก API ในโค้ดตัวอย่างที่ให้ไว้ในหน้านี้ หากต้องการเลือกไม่ใช้ ให้ลบพารามิเตอร์การค้นหา solution_channel ออกจากโค้ดตัวอย่าง โปรดดูพารามิเตอร์โซลูชัน Google Maps Platform หากต้องการข้อมูลเพิ่มเติม

การเพิ่มการเติมข้อความอัตโนมัติในช่องป้อนข้อมูล

ตัวอย่างนี้ใช้ข้อมูลต่อไปนี้ คลังสถานที่, Maps JavaScript API

ตัวเลือกดังกล่าวมีดังนี้ Android | iOS

เติมข้อมูลสถานที่อัตโนมัติ สามารถป้อนที่อยู่ในแอปพลิเคชันของคุณได้ง่ายขึ้น ซึ่งนำไปสู่อัตรา Conversion ที่สูงขึ้น ที่ราบรื่นสำหรับลูกค้าของคุณ การเติมข้อความอัตโนมัติมีช่องป้อนข้อความด่วนเพียงช่องเดียว ด้วย "พิมพ์ล่วงหน้า" การคาดคะเนที่อยู่ที่สามารถใช้เพื่อป้อนข้อมูลการเรียกเก็บเงินโดยอัตโนมัติ หรือ แบบฟอร์มที่อยู่สำหรับจัดส่ง

การรวมการเติมข้อมูลสถานที่อัตโนมัติไว้ในรถเข็นช้อปปิ้งออนไลน์ช่วยให้คุณสามารถ:

ลดข้อผิดพลาดในการป้อนที่อยู่
ลดจำนวนขั้นตอนในกระบวนการชำระเงิน
ลดความซับซ้อนในการป้อนข้อมูลอีเมลบนอุปกรณ์เคลื่อนที่หรืออุปกรณ์ที่สวมใส่ได้
ลดการกดแป้นพิมพ์และเวลาทั้งหมดที่ลูกค้าต้องใช้ในการวางตำแหน่ง คำสั่งซื้อ

เมื่อผู้ใช้เลือกช่องเติมข้อความอัตโนมัติ และเริ่มพิมพ์ รายการที่อยู่ การคาดคะเนจะปรากฏขึ้น

เมื่อผู้ใช้เลือกที่อยู่จากรายการการคาดการณ์ คุณจะใช้การตอบกลับเพื่อ ยืนยันที่อยู่และรับสถานที่ตั้ง จากนั้น แอปพลิเคชันของคุณจะสามารถป้อนข้อมูลในฟิลด์ที่ถูกต้อง ของแบบฟอร์มป้อนที่อยู่

วิดีโอ: ปรับปรุงแบบฟอร์มที่อยู่ด้วยการเติมข้อความอัตโนมัติในสถานที่:

แบบฟอร์มที่อยู่

เว็บ

Android

iOS

เริ่มต้นใช้งานการเติมข้อความอัตโนมัติในสถานที่

ใส่โค้ด JavaScript เพียง 2-3 บรรทัดเพื่อใส่ Autcomplete ลงใน เว็บไซต์ของคุณ

วิธีที่ง่ายที่สุดคือการใส่ Maps JavaScript API (แม้ว่าคุณจะ ไม่แสดงแผนที่) ในเว็บไซต์ของคุณ และระบุไลบรารีสถานที่ตามที่แสดงใน ตัวอย่างต่อไปนี้ ซึ่งจะเรียกใช้ฟังก์ชันการเริ่มต้นด้วย

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

ในตัวอย่างก่อนหน้า Listener เหตุการณ์ 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

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

หลังจากป้อนที่อยู่ ให้ระบุการยืนยันด้วยภาพแก่ผู้ใช้ สถานที่จัดส่งหรือรับสินค้าด้วยแผนที่แบบคงที่แบบง่าย วิธีนี้จะทำให้ลูกค้า เพื่อให้มั่นใจได้ว่า ที่อยู่ถูกต้องและช่วยลดความล้มเหลวในการนำส่ง/ไปรับ สามารถแสดงแผนที่แบบคงที่ หน้าเว็บที่ผู้ใช้ป้อนที่อยู่หรือแม้กระทั่งส่งภายในอีเมลยืนยัน ได้ทำธุรกรรมเรียบร้อยแล้ว

กรณีการใช้งานทั้ง 2 อย่างนี้สามารถทำได้ด้วย Maps Static API ซึ่งจะเพิ่มแผนที่เวอร์ชันรูปภาพลงในแท็กรูปภาพใดๆ ภายในหน้าเว็บหรืออีเมล

เริ่มต้นใช้งาน Maps Static API

คุณสามารถใช้ Maps Static API โดยใช้การเรียกใช้บริการบนเว็บ ซึ่งจะสร้าง แผนที่เวอร์ชันรูปภาพตามพารามิเตอร์ที่คุณระบุ เช่นเดียวกับแผนที่แบบไดนามิก คุณสามารถ สามารถระบุประเภทแผนที่ ใช้รูปแบบในระบบคลาวด์เดียวกัน และเพิ่มเครื่องหมายลงใน แยกความแตกต่างระหว่างสถานที่

การประชุมต่อไปนี้แสดงแผนกลยุทธ์ขนาด 600x300 พิกเซล ซึ่งมีจุดศูนย์กลางอยู่ที่ Googleplex ใน Mountain View, CA ที่ระดับการซูม 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

ซึ่งจะแบ่งออกเป็นส่วนต่างๆ ต่อไปนี้

API URL	https://maps.googleapis.com/maps/api/staticmap?
ศูนย์แผนที่	center=37.422177,-122.084082
ระดับการซูม	ซูม=13
ขนาดรูปภาพ	ขนาด=600x300
ประเภทแผนที่	maptype=roadmap
เครื่องหมายระบุตำแหน่งร้าน	markers=color:blue%7Clabel:C%7C37.422177,-122.084082
รูปแบบแผนที่ระบบคลาวด์	map_id=8f348d1b5a61d4bb
คีย์ API	key=YOUR_API_KEY
พารามิเตอร์ช่องทางโซลูชัน (โปรดดูพารามิเตอร์ เอกสารประกอบเกี่ยวกับพารามิเตอร์)	solution_channel=GMP_guides_checkout_v1_a

ซึ่งมีรูปภาพดังรูปด้านล่างนี้

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือก Maps Static API โปรดดู เอกสารประกอบ

เคล็ดลับในการเพิ่มประสิทธิภาพ Checkout ให้ดียิ่งขึ้น

นอกจากนี้ คุณยังสามารถปรับปรุงประสบการณ์ของลูกค้าให้ดียิ่งขึ้น โดยใช้ประโยชน์จาก คุณลักษณะการเติมข้อความอัตโนมัติในสถานที่ให้บริการ ต่อไปนี้เป็นเคล็ดลับในการปรับปรุง ช่องป้อนที่อยู่อัตโนมัติ:

อนุญาตให้ผู้ใช้ป้อนที่อยู่ตามชื่อธุรกิจหรือจุดสนใจ "ประเภทที่จะนำหน้า" บริการการคาดคะเนไม่เพียงแต่ใช้งานได้กับที่อยู่เท่านั้น แต่คุณยังสามารถเลือก ให้ป้อนชื่อธุรกิจหรือจุดสังเกตได้ หลังจากที่ผู้ใช้ป้อนชื่อธุรกิจแล้ว เรียกดูข้อมูลที่อยู่ได้ง่ายๆ ด้วยการโทรติดต่อ รายละเอียดสถานที่ หากต้องการอนุญาตให้ป้อนทั้งที่อยู่และชื่อสถานประกอบการ ให้นำ พร็อพเพอร์ตี้ types จากคําจํากัดความของการเติมข้อความอัตโนมัติ
ปรับแต่งรูปลักษณ์ของช่องเติมข้อมูลอัตโนมัติของสถานที่ให้เหมือนกับส่วนที่เลือก สไตล์ของเว็บไซต์ นอกจากนี้ ยังจัดรูปแบบวิดเจ็ตการเติมข้อความอัตโนมัติให้เข้ากับรูปลักษณ์ของรถเข็นช็อปปิ้งได้อีกด้วย ชุดคลาส CSS พร้อมให้คุณปรับแต่ง ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธี จัดรูปแบบช่องการเติมข้อความอัตโนมัติ อ่าน เอกสารประกอบ
หากต้องการสร้าง UI ที่กำหนดเอง การสร้าง UI ที่กำหนดเองแทนการใช้ UI ที่ออกแบบโดย Google ให้เรียก วางบริการเติมข้อความอัตโนมัติแบบเป็นโปรแกรมเพื่อดึงการคาดคะเนสำหรับอินพุตหนึ่งๆ คุณสามารถเรียกดูการคาดคะเนการเติมข้อความอัตโนมัติในสถานที่ต่างๆ ได้แบบเป็นโปรแกรมใน JavaScript Android และ iOS รวมทั้งการเรียกใช้ API ของบริการเว็บโดยตรงผ่าน Places API