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

Tổng quan

web iOS API

Nền tảng Google Maps được cung cấp cho web (JS, TS), Android và iOS, đồng thời cung cấp các API dịch vụ web để nhận thông tin về địa điểm, đường đi và khoảng cách. Các mẫu trong hướng dẫn này chỉ dành cho một nền tảng, nhưng chúng tôi cũng cung cấp các đường liên kết đến tài liệu để triển khai trên các nền tảng khác.

Hãy tạo ngay!

Trình tạo nhanh trong Google Cloud Console giúp bạn tạo tính năng tự động hoàn thành biểu mẫu địa chỉ bằng cách sử dụng giao diện người dùng tương tác giúp tạo mã JavaScript cho bạn.

Mua sắm và đặt hàng trực tuyến đã trở thành một phần tất cả trong cuộc sống của chúng ta. Khách hàng đều mong đợi có được một quy trình thanh toán suôn sẻ, từ dịch vụ giao hàng cùng ngày cho đến đặt taxi hoặc đặt bữa tối.

Tuy nhiên, trong tất cả những ứng dụng này, việc nhập địa chỉ để thanh toán hoặc giao hàng vẫn là một trở ngại trong quy trình thanh toán, có thể vừa tốn thời gian vừa rườm rà. Trải nghiệm thanh toán suôn sẻ càng trở nên quan trọng hơn trong thế giới thiết bị di động, nơi mà việc nhập văn bản phức tạp trên màn hình nhỏ có thể gây phiền toái và trở thành rào cản cho lượt 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 đẩy nhanh quá trình thanh toán nhờ 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 Thanh toán (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:

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

Phần phương pháp

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

  • Biểu tượng dấu kiểm là một phương pháp cốt lõi.
  • Biểu tượng dấu sao là tuỳ chọn nhưng bạn nên tuỳ chỉnh để cải thiện giải pháp.
Thêm tính năng tự động hoàn thành vào các trường nhập dữ liệu Tự động điền biểu mẫu địa chỉ. Thêm chức năng nhập khi đang di chuyển để cải thiện trải nghiệm người dùng trên tất cả các nền tảng và cải thiện độ chính xác của địa chỉ nhờ thao tác nhấn phím tối thiểu.
Xác nhận bằng hình ảnh bằng API tĩnh của Maps Tìm toạ độ vĩ độ/kinh độ cho một địa chỉ nhất định (mã hoá địa lý) hoặc chuyển đổi toạ độ vĩ độ/kinh độ của một vị trí địa lý thành một địa chỉ (mã hoá địa lý ngược).
Mẹo để cải thiện hơn nữa quy trình thanh toán Sử dụng các tính năng nâng cao của tính năng Tự động hoàn thành theo địa điểm để cải thiện trải nghiệm thanh toán.

Thêm tính năng tự động hoàn thành vào trường nhập dữ liệu

Ví dụ này sử dụng: Thư viện địa điểm, API JavaScript của Maps Cũng có: Android | iOS

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

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

  • Giảm thiểu 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ể số lần nhấn phím và tổng thời gian cần thiết để khách hàng đặt hàng.

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

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

Video: Cải thiện biểu mẫu địa chỉ bằng tính năng Tự động hoàn thành của địa điểm:

Biểu mẫu địa chỉ

Web

Android

iOS

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

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

Cách dễ nhất là đưa API JavaScript của Maps vào trang web của mình và chỉ định thư viện Địa điểm như minh hoạ trong ví dụ sau. Thư viện này cũng thực thi hàm khởi chạy. 

<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 được đặ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 thông tin dự đoán địa chỉ và hàm fillInAddress được thực thi. Hàm này, như minh hoạ trong ví dụ sau, sẽ lấy phản hồi được chọn và trích xuất các thành phần địa chỉ để trực quan hoá trong một biểu mẫu.

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

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

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

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

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

Tính năng Tự động hoàn thành theo địa điểm có một số tuỳ chọn cho phép tính năng này linh hoạt triển khai nếu bạn không chỉ muốn sử dụng tiện ích. Bạn có thể sử dụng kết hợp các dịch vụ để nhận được chính xác những thông tin cần thiết nhằm 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 để giới hạn các kết quả so khớp với địa chỉ đường phố đầy đủ. Tìm hiểu thêm về các loại được hỗ trợ trong yêu cầu Tự động hoàn thành theo địa điểm.
  • Đặt hạn chế và độ chệch hướng thích hợp nếu bạn không cần tìm kiếm trên toàn thế giới. Có một số tham số có thể dùng để thiên vị hoặc hạn chế kết quả khớp chỉ với một số khu vực cụ thể.
    • Dùng bounds để thiết lập ranh giới hình chữ nhật nhằm ràng buộc một khu vực, dùng strictBounds để đảm bảo chỉ trả về địa chỉ trong những khu vực đó.
    • Hãy sử dụng componentRestrictions để hạn chế câu trả lời cho một nhóm quốc gia nhất định.
  • Để lại các trường có thể chỉnh sửa trong trường hợp bỏ lỡ một số trường trong phần so 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ỉ mà tính năng Tự động hoàn thành của địa điểm trả về đều không chứa số cơ sở phụ chẳng hạn như số căn hộ, số phòng hoặc số nhà, nên ví dụ này sẽ chuyển tiêu điểm sang Dòng địa chỉ 2 để khuyến khích người dùng điền thông tin đó (nếu cần).

Xác nhận bằng hình ảnh bằng Maps Static API

Sau khi nhập địa chỉ, hãy cung cấp cho người dùng thông tin xác nhận bằng hình ảnh về vị trí giao hàng hoặc đến lấy hàng bằng một bản đồ tĩnh đơn giản. Việc này sẽ giúp khách hàng chắc chắn hơn rằng địa chỉ là chính xác, đồng thời giảm số lượt giao hàng/đến lấy hàng. Bản đồ tĩnh có thể xuất hiện trên trang mà họ nhập địa chỉ hoặc thậm chí là được gửi trong email xác nhận khi người dùng 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. API này sẽ 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 Maps Static API

Bạn có thể dùng API tĩnh của Maps bằ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 trên các tham số mà 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 dựa trên đám mây và thêm điểm đánh dấu để phân biệt vị trí.

Lệnh gọi sau đây minh hoạ một lộ trình có kích thước 600x300px, đặt ở giữa Googleplex ở Mountain View, CA ở mức thu phóng 13. Trường này cũng xác định một điểm đánh dấu vị trí giao hàng màu xanh dương 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 được chia nhỏ thành các phần sau:

URL API https://maps.googleapis.com/maps/api/staticmap?
trung tâm bản đồ center=37.422177,-122.084082
mức thu phóng thu phóng=13
kích thước hình ảnh kích thước=600x300
loại bản đồ maptype=roadmap
điểm đánh dấu vị trí cửa hàng markers=color:blue%7Clabel:C%7C37.422177,-122.084082
kiểu bản đồ trên đám mây map_id=8f348d1b5a61d4bb
Khoá API key=YOUR_API_KEY
Tham số kênh giải pháp (Xem tài liệu về tham số) solution_channel=GMP_guides_checkout_v1_a

Điều này sẽ trở thành hình ảnh như 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 này.

Mẹo để cải tiến hơn nữa quy trình thanh toán

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

  • 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. Dịch vụ dự đoán "nhập trước" không chỉ hoạt động với các đị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, bạn có thể dễ dàng truy xuất địa chỉ đó bằng cách gọi đến Thông tin chi tiết về địa điểm. Để cho phép nhập cả địa chỉ và tên cơ sở, hãy xoá thuộc tính types khỏi định nghĩa Tự động hoàn thành.
  • Tuỳ chỉnh giao diện của hộp Tự động hoàn thành địa điểm để phù hợp với 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 để phù hợp với giao diện của giỏ hàng. Bạn có thể tuỳ chỉnh một nhóm 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, hãy đọc tài liệu.
  • Nếu bạn muốn xây dựng 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 dịch vụ Tự động hoàn thành theo địa điểm theo phương thức lập trình để truy xuất các thông tin dự đoán cho một thông tin đầu vào nhất định. Bạn có thể truy xuất các cụm từ gợi ý của tính năng 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.