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

ภาพรวม

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

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

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

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

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

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

• Maps JavaScript API
• Places API
• Maps Static API

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

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

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

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

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

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

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

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

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

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

ใส่โค้ด 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 แล้ว ดังที่ปรากฏในตัวอย่างต่อไปนี้ จะนำคำตอบที่เลือกไปใช้และ แยกองค์ประกอบที่อยู่เพื่อแสดงภาพภายในแบบฟอร์ม

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

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 เพื่อกระตุ้นให้ผู้ใช้ป้อนข้อมูล หากจำเป็น

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

กรณีการใช้งานทั้ง 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
      

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

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

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

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

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