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

Tổng quan

Mua sắm và đặt hàng trực tuyến đã trở thành một phần không thể thiếu trong cuộc sống của chúng ta. Từ dịch vụ giao hàng trong ngày đến việc đặt taxi hoặc đặt bữa tối, khách hàng đều mong đợi một quy trình thanh toán diễn ra suôn sẻ.

Tuy nhiên, trong tất cả các ứng dụng này, việc nhập địa chỉ thanh toán hoặc địa chỉ giao hàng vẫn là một trở ngại trong quy trình thanh toán, vừa tốn thời gian vừa rườm rà. Trải nghiệm thanh toán dễ dàng trở nên quan trọng hơn nữa 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à là một rào cản khác đối với lượt chuyển đổi của khách hàng.

Tài liệu này cung cấp hướng dẫn triển khai để giúp khách hàng đẩy nhanh quy trình thanh toán bằng tính năng nhập địa chỉ dự đoán.

Sơ đồ sau đây cho thấy các API cốt lõi liên quan đến việc triển khai quy trình Thanh toán. Nhấp vào sơ đồ để phóng to.

Bật API

Để triển khai tính năng Thanh toán, bạn phải bật các API sau trong Google Cloud Console:

• Maps JavaScript API
• Places API
• Maps Static API

Để 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 Google Maps Platform.

Phần Bài tập thực hành

Các phần sau đây trình bày các mẹo và cách tuỳ chỉnh để giúp bạn cải thiện quy trình thanh toán.

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

Place Autocomplete có thể đơn giản hoá việc nhập địa chỉ trong ứng dụng của bạn, giúp tăng tỷ lệ chuyển đổi và mang lại 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 liệu duy nhất, nhanh chóng với tính năng dự đoán địa chỉ "nhập trước" có thể dùng để tự động điền vào biểu mẫu địa chỉ thanh toán hoặc địa chỉ giao hàng.

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

• Giảm lỗi nhập địa chỉ.
• 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 địa chỉ dự đoán sẽ xuất hiện:

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

Bắt đầu sử dụng tính năng Place Autocomplete

Bạn có thể kết hợp tính năng Tự động hoàn thành địa điểm vào trang web của mình bằng một vài dòng JavaScript.

Bạn có thể thêm API JavaScript của Maps vào trang web và chỉ định thư viện Places, ngay cả khi bạn không hiển thị bản đồ. Ví dụ sau đây cho thấy cách thực hiện việc này và 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 để người dùng nhập dữ liệu:

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

Cuối cùng, hãy khởi động dịch vụ Tự động hoàn thành và liên kết dịch vụ này với hộp văn bản có 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 sẽ được kích hoạt khi người dùng chọn một kết quả dự đoán địa chỉ và hàm fillInAddress sẽ được thực thi. Hàm này (như trong ví dụ sau) sẽ lấy câu trả lời đã 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.

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. Chỉ với vài dòng mã, bạn có thể đảm bảo khách hàng nhập đúng địa chỉ trong thời gian ngắn.

Hãy xem bản minh hoạ đang hoạt động và mã nguồn đầy đủ để điền sẵn thông tin vào 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 Place Autocomplete

Place Autocomplete cung cấp một số lựa chọn cho phép bạn tuỳ chỉnh việc triển khai nếu bạn muốn sử dụng nhiều thứ hơn ngoài tiện ích. Bạn có thể sử dụng kết hợp các dịch vụ để so khớp vị trí một cách chính xác.

• Đố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ả trùng khớp ở địa chỉ đường phố đầy đủ. Tìm hiểu thêm về các loại được hỗ trợ trong yêu cầu Place Autocomplete.
• Đặt các hạn chế và thiên kiến phù hợp nếu bạn không cần tìm kiếm trên toàn thế giới. Bạn có thể sử dụng một số tham số để điều chỉnh hoặc hạn chế kết quả trùng khớp với các khu vực cụ thể.
  • Sử dụng bounds để đặt ranh giới hình chữ nhật nhằm giới hạn cho một khu vực. Sử dụng strictBounds để đảm bảo chỉ các địa chỉ ở những khu vực đó được trả về.
  • Sử dụng componentRestrictions để giới hạn phản hồi cho một nhóm quốc gia nhất định.
• Để các trường có thể chỉnh sửa trong trường hợp một số trường bị thiếu trong kết quả 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ỉ do tính năng Place Autocomplete trả về đều không chứa số phụ như số căn hộ, số phòng hoặc số đơn vị, nên ví dụ này di chuyển tiêu điểm đến Dòng địa chỉ 2 để khuyến khích người dùng điền thông tin đó nếu cần.

Sau khi khách hàng nhập địa chỉ, hãy cung cấp thông tin xác nhận bằng hình ảnh về địa điểm giao hàng hoặc đến lấy bằng bản đồ tĩnh. Điều này giúp khách hàng yên tâm hơn rằng địa chỉ là chính xác và giảm số lần giao hàng hoặc nhận hàng không thành công. Bạn có thể hiển thị bản đồ tĩnh trên trang nhập địa chỉ hoặc đưa bản đồ này vào email xác nhận sau khi giao dịch hoàn tất.

Bạn có thể triển khai cả hai trường hợp sử dụng này bằng Maps Static API. API này sẽ thêm một 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ể sử dụng Maps Static API thông qua một lệnh gọi dịch vụ web. Lệnh gọi này sẽ tạo ra một phiên bản hình ảnh của bản đồ dựa trên các thông 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 cho thấy một lộ trình có kích thước 600x300px, tập trung vào Googleplex ở Mountain View, California ở mức thu phóng 13. Thẻ này cũng chỉ định một điểm đánh dấu vị trí giao hàng màu xanh dương và một 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
      

Cụ thể như sau:

Yêu cầu này trả về hình ảnh sau:

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

Bạn có thể nâng cao hơn nữa trải nghiệm khách hàng bằng cách tận dụng một số tính năng nâng cao mà Place Autocomplete cung cấp. Sau đây là một số mẹo giúp 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 địa điểm yêu thích. Dịch vụ dự đoán "nhập liệu trước" không chỉ hoạt động cho địa chỉ mà bạn cũng có thể chọn cho phép nhập tên doanh nghiệp hoặc địa danh. Sau khi người dùng nhập tên doanh nghiệp, bạn có thể truy xuất địa chỉ bằng một lệnh gọi đến Place Details. Để 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 Autocomplete.
• stars Tuỳ chỉnh giao diện của hộp Place Autocomplete cho 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ể dùng các lớp CSS để tuỳ chỉnh giao diện của tiện ích. Để biết thêm thông tin, hãy xem phần Tự động hoàn thành kiểu.
• stars Tạo giao diện người dùng tuỳ chỉnh. Nếu bạn muốn tạo giao diện người dùng tuỳ chỉnh thay vì dùng giao diện do Google thiết kế, hãy gọi dịch vụ Tự động hoàn thành địa điểm theo cách lập trình để truy xuất các cụm từ gợi ý cho một dữ liệu đầu vào nhất định. Bạn có thể truy xuất các đề xuất của tính năng Place Autocomplete theo phương thức lập trình trong JavaScript, Android và iOS, cũng như gọi trực tiếp API dịch vụ web thông qua Places API.