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

ภาพรวม

เว็บ iOS API

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

สร้างเลย!

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

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

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

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

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

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

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

• Maps JavaScript API
• Places API
• Maps API แบบคงที่

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

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

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

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

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

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

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

ตัวอย่างนี้ใช้ ไลบรารี Places, Maps JavaScript API

นอกจากนี้ยังมีบริการ: Android | iOS

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

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

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

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

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

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

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

เว็บ

Android

iOS

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

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

วิธีที่ง่ายที่สุดคือการรวม Maps JavaScript API (แม้ว่าคุณจะไม่ได้แสดงแผนที่ก็ตาม) ในเว็บไซต์ และระบุไลบรารี 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);
}

ในตัวอย่างก่อนหน้านี้ 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

หมายเหตุ: อ่านคู่มือเกี่ยวกับการใช้ TypeScript และ Google Maps

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

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

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

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

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

• สำหรับแบบฟอร์มที่อยู่ ให้ตั้งค่าพารามิเตอร์ types เป็น address เพื่อจำกัดการจับคู่ให้ตรงกับที่อยู่แบบเต็ม ดูข้อมูลเพิ่มเติมเกี่ยวกับประเภทที่คำขอการเติมข้อความอัตโนมัติรองรับ
• กำหนดข้อจำกัดและความลำเอียงที่เหมาะสม หากไม่จำเป็นต้องค้นหาทั่วโลก มีพารามิเตอร์จำนวนหนึ่งที่สามารถใช้ให้น้ำหนักพิเศษหรือจำกัดการจับคู่ที่ตรงกันกับภูมิภาคที่เฉพาะเจาะจงเท่านั้น
  • ใช้ bounds เพื่อกําหนดขอบเขตสี่เหลี่ยมผืนผ้าเพื่อจํากัดพื้นที่ และใช้ strictBounds เพื่อให้แน่ใจว่าระบบจะส่งคืนเฉพาะที่อยู่ในพื้นที่ดังกล่าวเท่านั้น
  • ใช้ componentRestrictions เพื่อจำกัดคำตอบให้เฉพาะบางประเทศ
• ปล่อยให้ช่องแก้ไขได้ในกรณีที่มีบางช่องหายไปจากการจับคู่ และอนุญาตให้ลูกค้าอัปเดตที่อยู่ได้หากจำเป็น เนื่องจากที่อยู่ส่วนใหญ่ที่แสดงผลโดยการเติมข้อความอัตโนมัติไม่มีหมายเลขสถานที่ย่อย เช่น อพาร์ตเมนต์ ห้องชุด หรือหมายเลขห้อง ตัวอย่างนี้จึงย้ายโฟกัสไปยังที่อยู่บรรทัดที่ 2 เพื่อกระตุ้นให้ผู้ใช้กรอกข้อมูลดังกล่าวหากจำเป็น

ส่งภาพยืนยันด้วย Maps Static API

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

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

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

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

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

ภาพนี้จะกลายเป็นภาพดังที่แสดงด้านล่าง

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

เคล็ดลับเพื่อเพิ่มประสิทธิภาพให้กับ Checkout

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

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