Hướng dẫn triển khai quy trình thanh toán

Tổng quan

Mua sắm trực tuyến và đặt hàng đã trở thành một phần phổ biến trong cuộc sống của chúng ta. Từ cùng ngày dịch vụ giao hàng để đặt taxi hoặc đặt bữa tối, khách hàng thường kỳ vọng quy trình thanh toán suôn sẻ.

Tuy nhiên, trong tất cả các đơn đăng ký này, việc nhập địa chỉ cho thanh toán hoặc vận chuyển vẫn là một trở ngại trong quy trình thanh toán, có thể là cả thời gian tốn nhiều công sức và cồng kềnh. Trải nghiệm thanh toán suôn sẻ trở nên quan trọng hơn trong thế giới di động, nơi việc nhập văn bản phức tạp trên màn hình nhỏ có thể gây khó chịu và một rào cản khác đối với chuyển đổi của khách hàng.

Chủ đề này cung cấp hướng dẫn triển khai để giúp khách hàng của bạn tăng tốc độ trang web quy trình thanh toán bằng tính năng nhập địa chỉ dự đoán.

Sơ đồ dưới đây cho thấy các API cốt lõi liên quan đến việc triển khai Checkout (nhấp để phóng to).

Bật API

Để triển khai Checkout, bạn phải bật các API sau trong Google Cloud Console:

• API JavaScript của Maps
• API Địa điểm
• API tĩnh của Maps

Để biết thêm thông tin về cách thiết lập, hãy xem Bắt đầu sử dụng Nền tảng Google Maps.

Các phần về phương pháp

Sau đây là các mẹo và cách tuỳ chỉnh mà chúng tôi sẽ đề cập trong chủ đề này.

• check_circle_filled Biểu tượng dấu kiểm là một biện pháp cốt lõi.
• stars Biểu tượng dấu sao là không bắt buộc nhưng bạn nên tuỳ chỉnh để cải thiện giải pháp.

Tự động hoàn thành địa điểm có thể đơn giản hoá việc nhập địa chỉ trong đơn đăng ký của bạn, dẫn đến tỷ lệ chuyển đổi cao hơn và trải nghiệm liền mạch cho khách hàng. Tính năng Tự động hoàn thành cung cấp một trường nhập nhanh duy nhất với tính năng "nhập trước" thông tin dự đoán có thể dùng để tự động điền thông tin thanh toán hoặc biểu mẫu địa chỉ giao hàng.

Bằng cách kết hợp tính năng Tự động hoàn thành địa điểm vào giỏ hàng trực tuyến của mình, bạn có thể:

• Giảm lỗi nhập địa chỉ.
• Hãy giảm số bước trong quy trình thanh toán.
• Đơn giản hoá trải nghiệm nhập địa chỉ trên thiết bị di động hoặc thiết bị đeo.
• Giảm đáng kể thao tác nhấn phím và tổng thời gian cần thiết để khách hàng đặt đơn đặt hàng.

Khi người dùng chọn hộp mục nhập Tự động hoàn thành và bắt đầu nhập, một danh sách địa chỉ các gợi ý sẽ xuất hiện:

Khi người dùng chọn một địa chỉ trong danh sách các cụm từ gợi ý, bạn có thể sử dụng câu trả lời để xác minh địa chỉ và nhận vị trí. Sau đó, ứng dụng của bạn có thể điền đúng các trường của biểu mẫu nhập địa chỉ:

Bắt đầu với tính năng Tự động hoàn thành địa điểm

Chỉ cần một vài dòng mã JavaScript để kết hợp Place Autcomplete vào trang web của bạn.

Cách dễ nhất là đưa API JavaScript vào Maps (ngay cả khi bạn không hiển thị bản đồ) trong trang web của bạn và chỉ định thư viện Địa điểm như được hiển thị trong ví dụ sau. Lệnh này cũng thực thi hàm khởi tạo.

<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>

Tiếp theo, hãy thêm một hộp văn bản vào trang của bạn để người dùng nhập:

<input id="autocomplete" placeholder="Enter your address"></input>

Cuối cùng, hãy khởi chạy dịch vụ Tự động hoàn thành và liên kết dịch vụ đó với hộp văn bản đã đặt tên:

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

Trong ví dụ trước, trình nghe sự kiện place_changed được kích hoạt khi người dùng chọn một gợi ý địa chỉ và Hàm fillInAddress đã được thực thi. Hàm như trong ví dụ sau sẽ nhận phản hồi đã chọn và trích xuất các thành phần địa chỉ để trực quan hoá bên trong một biểu mẫu.

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

Sau khi có dữ liệu này, bạn có thể sử dụng dữ liệu đó làm địa chỉ trùng khớp cho người dùng của mình. Từ một vài các dòng mã, bạn có thể đảm bảo khách hàng nhập đúng địa chỉ trong một khoảng thời gian ngắn bất cứ lúc nào.

Xem bản minh hoạ cách hoạt động và mã nguồn đầy đủ để điền biểu mẫu nhập địa chỉ trong mã mẫu.

Những điều cần cân nhắc khi triển khai tính năng Tự động hoàn thành về địa điểm

Tính năng Tự động hoàn thành của địa điểm có một số tuỳ chọn cho phép tính năng này linh hoạt với nếu bạn muốn sử dụng nhiều tính năng khác ngoài tiện ích. Bạn có thể sử dụng kết hợp dịch vụ của bạn để tìm được chính xác những gì bạn cần để so khớp một vị trí theo đúng cách.

• Đối với biểu mẫu địa chỉ, hãy đặt tham số types thành address thành hạn chế các kết quả trùng khớp với địa chỉ đường phố đầy đủ. Tìm hiểu thêm về các loại được hỗ trợ trong các yêu cầu Tự động hoàn thành tại chỗ.
• Đặt quy định hạn chế phù hợp và thiên kiến nếu không cần tìm kiếm trên toàn thế giới. Có một số thông số có thể được sử dụng để thiên vị hoặc hạn chế bất kỳ so khớp nào chỉ với các khu vực cụ thể.
  • Dùng bounds để thiết lập ranh giới hình chữ nhật để ràng buộc đối với một khu vực, sử dụng strictBounds để đảm bảo chỉ trả về địa chỉ ở những khu vực đó.
  • Sử dụng componentRestrictions để hạn chế phản hồi đối với một nhóm quốc gia.
• Để các trường có thể chỉnh sửa trong trường hợp một số trường bị thiếu thông tin trùng khớp và cho phép khách hàng để cập nhật địa chỉ (nếu cần). Vì hầu hết các địa chỉ được tính năng Tự động hoàn thành về địa điểm trả về không chứa số nhà như số căn hộ, số dãy phòng hoặc số nhà. di chuyển tiêu điểm đến Dòng địa chỉ 2 để khuyến khích người dùng điền vào nếu cần.

Sau khi nhập địa chỉ, hãy cung cấp cho người dùng xác nhận bằng hình ảnh địa điểm giao hàng hoặc nhận hàng có bản đồ tĩnh đơn giản. Như vậy, khách hàng đảm bảo thêm rằng địa chỉ chính xác và việc này sẽ giảm lỗi giao hàng/đến lấy hàng. Bản đồ tĩnh có thể được hiển thị trên trang mà họ nhập địa chỉ hoặc thậm chí được gửi trong email xác nhận khi họ đã hoàn tất giao dịch.

Cả hai trường hợp sử dụng này đều có thể được thực hiện bằng API Tĩnh của Maps, thêm phiên bản hình ảnh của bản đồ vào bất kỳ thẻ hình ảnh nào trong một trang hoặc email.

Bắt đầu sử dụng API Maps tĩnh

Bạn có thể sử dụng Maps Static API bằng cách sử dụng lệnh gọi dịch vụ web. Lệnh gọi này sẽ tạo phiên bản hình ảnh của bản đồ dựa vào các tham số bạn chỉ định. Giống như bản đồ động, bạn có thể chỉ định loại bản đồ, sử dụng cùng một kiểu trên đám mây và thêm điểm đánh dấu vào phân biệt vị trí.

Lệnh gọi sau đây hiển thị một lộ trình, với kích thước là 600x300px, nằm ở giữa Googleplex ở Mountain View, CA ở mức thu phóng 13. Cụm từ này cũng chỉ định vị trí giao hàng màu xanh dương điểm đánh dấu và kiểu bản đồ trực tuyến.

      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
      

Việc này sẽ được chia nhỏ thành các phần sau:

Thao tác này sẽ trở thành hình ảnh như minh hoạ dưới đây:

Để biết thêm thông tin về các tuỳ chọn API Tĩnh của Maps, hãy xem tài liệu.

Bạn có thể nâng cao trải nghiệm khách hàng hơn nữa bằng cách tận dụng một số tính năng mà tính năng Tự động hoàn thành về địa điểm cung cấp. Sau đây là một vài mẹo giúp bạn cải thiện Hộp nhập địa chỉ tự động hoàn thành:

• stars Cho phép người dùng nhập địa chỉ dựa trên tên doanh nghiệp hoặc tên địa điểm yêu thích. Tính năng "nhập trước" dịch vụ gợi ý không chỉ hoạt động đối với địa chỉ mà bạn còn có thể chọn cho phép nhập tên doanh nghiệp hoặc tên mốc. Sau khi người dùng nhập tên doanh nghiệp, dễ dàng lấy lại địa chỉ bằng cách gọi tới Chi tiết địa điểm. Để cho phép nhập cả địa chỉ và tên cơ sở, hãy xoá Thuộc tính types trong định nghĩa Tự động hoàn thành.
• stars Tuỳ chỉnh giao diện của hộp Tự động hoàn thành địa điểm cho phù hợp kiểu trang web của bạn. Bạn cũng có thể tạo kiểu cho tiện ích tự động hoàn thành cho phù hợp với giao diện của giỏ hàng. Bạn có thể tuỳ chỉnh một số lớp CSS. Để biết thêm thông tin về cách tạo kiểu cho hộp tự động hoàn thành, đọc tài liệu.
• stars Nếu bạn muốn tạo giao diện người dùng tuỳ chỉnh. Xây dựng giao diện người dùng tuỳ chỉnh thay vì sử dụng giao diện người dùng do Google thiết kế, hãy gọi phương thức Đặt dịch vụ Tự động hoàn thành theo phương thức lập trình để truy xuất cụm từ gợi ý cho một nội dung đầu vào nhất định. Bạn có thể truy xuất các dự đoán Tự động hoàn thành địa điểm theo phương thức lập trình trong JavaScript, Android, và iOS cũng như gọi API dịch vụ web trực tiếp thông qua API Địa điểm.