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

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

ภาพรวม

เว็บ iOS API

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

สร้างเลย

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

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

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

หัวข้อนี้จะอธิบายวิธีใช้เพื่อช่วยให้ลูกค้าดําเนินการชําระเงินได้รวดเร็วด้วยรายการที่อยู่แบบคาดคะเน

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

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

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

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

ส่วนแนวทางปฏิบัติ

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

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

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

ตัวอย่างนี้ใช้ Places Library, Maps JavaScript API นอกจากนี้: Android | iOS

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

เมื่อนําระบบเติมข้อความอัตโนมัติของสถานที่มาใช้ในรถเข็นช็อปปิ้งออนไลน์ คุณจะสามารถทําสิ่งต่อไปนี้ได้

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

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

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

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

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

เว็บ

Android

iOS

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

เพียงใช้โค้ด JavaScript 2 บรรทัดเท่านั้นในการรวม Place Autcomplete ลงในเว็บไซต์

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

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&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();
}

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 โดยใช้การเรียกใช้บริการเว็บ ซึ่งจะสร้างรูปภาพเวอร์ชันแผนที่สําหรับพารามิเตอร์ที่คุณระบุ เช่นเดียวกับแผนที่แบบไดนามิก คุณสามารถระบุประเภทของแผนที่ ใช้รูปแบบในระบบคลาวด์เดียวกัน และเพิ่มเครื่องหมายเพื่อแยกความแตกต่างของสถานที่

การเรียกดังต่อไปนี้แสดงให้เห็นแผนกลยุทธ์ขนาด 600x300 พิกเซล โดยมีจุดศูนย์กลางอยู่ที่ 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 ของ API https://maps.googleapis.com/maps/api/staticmap?
ศูนย์แผนที่ ศูนย์=37.422177,-122.084082
ระดับการซูม ซูม=13
ขนาดรูปภาพ ขนาด=600x300
ประเภทแผนที่ แผนที่type=roadmap
เครื่องหมายระบุตําแหน่งร้านค้า Mark=color:blue%7Clabel:C%7C37.422177,-122.084082
รูปแบบแผนที่ระบบคลาวด์ Map_id=8f348d1b5a61d4bb
คีย์ API คีย์=YOUR_API_KEY
พารามิเตอร์ช่องทางของโซลูชัน (ดูเอกสารประกอบของพารามิเตอร์) โซลูชันช่องทาง=GMP_guides_checkout_v1_a

ซึ่งจะแสดงเป็นรูปภาพดังที่แสดงด้านล่าง

ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือก API แบบคงที่ของ Maps ได้ที่เอกสารประกอบ

เคล็ดลับเพื่อเพิ่มประสิทธิภาพการชําระเงิน

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

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