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

ภาพรวม

เว็บ iOS API

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

สร้างเลย

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

วิดีโอ: ปรับปรุงแบบฟอร์มที่อยู่ด้วย Place Autocomplete

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

เว็บ

Android

iOS

เริ่มต้นใช้งาน Place Autocomplete

คุณสามารถรวม Place Autocomplete ไว้ในเว็บไซต์ได้ด้วยโค้ด JavaScript เพียงไม่กี่บรรทัด

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

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

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;

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

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

ข้อควรพิจารณาเมื่อติดตั้งใช้งาน Place Autocomplete

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

  • สำหรับแบบฟอร์มที่อยู่ ให้ตั้งค่าพารามิเตอร์ types เป็น address เพื่อ จำกัดการจับคู่ให้แสดงเฉพาะที่อยู่แบบเต็ม ดูข้อมูลเพิ่มเติมเกี่ยวกับ ประเภทที่รองรับ ในคำขอ Place Autocomplete
  • ตั้งค่าข้อจำกัด และค่าความเอนเอียงที่เหมาะสมหากไม่จำเป็นต้องค้นหาทั่วโลก คุณสามารถใช้ พารามิเตอร์หลายรายการเพื่อกำหนดค่าความเอนเอียงหรือจำกัดการจับคู่ให้แสดงเฉพาะภูมิภาคที่ต้องการ
    • ใช้ bounds เพื่อตั้งค่าขอบเขตสี่เหลี่ยมผืนผ้าเพื่อจำกัดพื้นที่ ใช้ strictBounds เพื่อให้แน่ใจว่าระบบจะแสดงเฉพาะที่อยู่ในพื้นที่เหล่านั้น
    • ใช้ componentRestrictions เพื่อจำกัดการตอบกลับให้แสดงเฉพาะชุดประเทศที่ต้องการ
  • ปล่อยให้ช่องต่างๆ แก้ไขได้ในกรณีที่ระบบไม่พบข้อมูลในบางช่องจากการจับคู่ และอนุญาตให้ลูกค้าอัปเดตที่อยู่หากจำเป็น เนื่องจากที่อยู่ส่วนใหญ่ที่ Place Autocomplete แสดงกลับมาไม่มีหมายเลขย่อย เช่น หมายเลขอพาร์ตเมนต์ ห้องชุด หรือยูนิต ตัวอย่างนี้จึงย้ายโฟกัสไปที่บรรทัดที่อยู่ 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

ซึ่งแบ่งออกเป็นส่วนต่างๆ ดังนี้

URL ของ API https://maps.googleapis.com/maps/api/staticmap?
จุดศูนย์กลางของแผนที่ center=37.422177,-122.084082
ระดับการซูม zoom=13
ขนาดรูปภาพ size=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 เพิ่มเติม

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

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