Nâng cấp thanh toán trực tuyến

Bạn có thể tùy chỉnh thanh toán trực tuyến để mở rộng thương hiệu, thay đổi cách hiển thị thông điệp, đưa ra ưu đãi và cải thiện các vấn đề khác để nâng cao trải nghiệm của khách hàng. Để đảm bảo các tùy chỉnh tương thích với những thay đổi liên tục của Shopify, bạn cần cập nhật trang thanh toán định kỳ.

Để chuẩn bị cho việc nâng cấp này, bạn cần thực hiện như sau:

  1. Xem trước trang thanh toán mới và kiểm tra trải nghiệm thanh toán của khách hàng. Tùy thuộc vào các tùy chỉnh đã thực hiện với trang thanh toán, để có thể nâng cấp, bạn cần thay đổi tệp checkout.liquid.
  2. Khi hài lòng với các thay đổi, hãy nâng cấp cửa hàng để sử dụng trang thanh toán mới của Shopify.

Xem trước trang thanh toán và kiểm tra để xác định lỗi

Trước khi nâng cấp cửa hàng để sử dụng phiên bản thanh toán mới, nhớ xem trước các thay đổi.

Xem trước thanh toán

Hãy coi mình là khách hàng và thử thanh toán. Nếu bạn phát hiện lỗi trong quá trình này, nghĩa là một số nội dung tùy chỉnh thanh toán đang mâu thuẫn với các cải tiến khác trong phiên bản mới. Khi đó, bạn cần thay đổi tệp checkout.liquid trước khi nâng cấp.

Khắc phục lỗi

Các bước thực hiện:

  1. Trong trang quản trị Shopify, vào Cửa hàng trực tuyến > Chủ đề.
  2. Nhấp vào Actions (Thao tác) rồi nhấp vào Duplicate (Sao chép).
  3. Trong More themes (Các chủ đề khác), tìm chủ đề đã sao chép, sau đó, nhấp vào Actions (Thao tác) > Edit code (Chỉnh sửa mã). Thực hiện chỉnh sửa và thử nghiệm bằng cách sử dụng phiên bản sao chép và chưa đăng này của chủ đề.

Lưu ý: Bất cứ khi nào thực hiện thay đổi đối với chủ đề hoặc thử nghiệm chủ đề, tạo một bản sao và thao tác với bản sao đó. Nếu mắc lỗi trong quá trình sử dụng bản sao, bạn có thể xóa bản sao và tạo bản sao khác từ chủ đề ban đầu mà không ảnh hưởng đến khách hàng.

  1. Mở tệp checkout.liquid.

  2. Xem trước tệp checkout.liquid trong chủ đề đã sao chép bằng trang thanh toán mới của Shopify:

    1. Vào trang Checkout upgrade (Nâng cấp thanh toán) của trang quản trị Shopify, nhấp vào mục Preview checkout (Xem trước thanh toán) rồi chọn chủ đề đã sao chép.
    2. Hoàn tất đơn hàng kiểm tra trong chế độ xem trước.

Nếu gặp lỗi hoặc phát hiện vấn đề về giao diện thanh toán, bạn cần chỉnh sửa tệp checkout.liquid để giải quyết vấn đề.

Nâng cấp lên trang thanh toán mới của Shopify

Nâng cấp thanh toán là quy trình gồm hai bước, yêu cầu nâng cấp trang thanh toán của Shopify và thay chủ đề đã đăng hiện tại bằng bản sao chứa các thay đổi.

Chú ý: Đảm bảo bạn đã xem trước trang thanh toán trước khi nâng cấp. Bạn cần hài lòng vì quá trình nâng cấp này sẽ không ảnh hưởng đến trải nghiệm thanh toán của khách hàng và họ vẫn có thể thanh toán cho đơn hàng trong trang thanh toán mới.

Chọn thời gian ít bận rộn hơn trong ngày để nâng cấp (ví dụ như sáng sớm, tối muộn hoặc vào cuối tuần) để giảm thiểu các gián đoạn tiềm ẩn.

Các bước thực hiện:

  1. Trong trang Checkout upgrade (Nâng cấp thanh toán), nhấp vào mục Upgrade checkout (Nâng cấp trang thanh toán) (nút này nằm ở dưới cùng của trang).

  2. Nếu bạn gặp lỗi khi xem trước chủ đề lần đầu, trước tiên, đảm bảo rằng các lỗi đã được khắc phục (tham khảo Khắc phục lỗi ở trên). Sau đó, đăng chủ đề sao chép đã cập nhật:

    1. Trong Cửa hàng trực tuyến, nhấp vào Chủ đề.
    2. Tìm chủ đề sao chép và nhấp vào Action (Thao tác) > Publish (Đăng).

Trang thanh toán đã được nâng cấp và chủ đề sao chép đang là chủ đề hiện tại.

Tính năng mới trong trang thanh toán của Shopify

Phiên bản mới của trang thanh toán của Shopify chứa những thay đổi và tính năng mới sau:

  • Biến Liquid giảm giá
  • Tùy chọn tham gia Shop
  • Chỉnh sửa đơn hàng
  • Cải thiện khả năng truy cập
  • Đã xóa khoảng đệm
  • Hiển thị phương thức thanh toán
  • Đã xóa chuỗi phần giữ chỗ
  • Hiển thị địa chỉ khách hàng đã lưu
  • Xác thực 3D Secure
  • Thay đổi trường Google Analytics JavaScript bổ sung
  • Thay đổi CSS
  • Thông báo lỗi

Biến Liquid giảm giá

Nhiều biến Liquid mới liên quan đến việc hiển thị giảm giá đã được giới thiệu trong suốt quá trình thanh toán. Những thay đổi này giúp thể hiện các giảm giá tự động và dựa trên tập lệnh theo cách phù hợp với khách hàng.

Bảng liệt kê các biến Liquid mới
Biến Định nghĩa
checkout.cart_level_discount_applications Trả về một loạt giảm giá dành cho giỏ hàng cụ thể áp dụng cho quá trình thanh toán.
line_item.discount_allocations Trả về danh sách tất cả phân bổ giảm giá gồm số tiền đã giảm giá và tham chiếu đến đối tượng áp dụng giảm giá cha. line_item.discount_allocations có sẵn trên mục hàng trong giỏ hàng, phần thanh toán, đơn hàng và đơn hàng nháp.
line_item.final_line_price Trả về giá tổng hợp của tất cả các mặt hàng trong mục hàng. Giá trị này bằng line_item.final_price nhân với line_item.quantity.
line_item.final_price Trả về giá của mục hàng bao gồm tất cả số tiền giảm giá theo mục hàng.
line_item.line_level_discount_allocations Trả về danh sách phân bổ giảm giá dành riêng cho mục hàng gồm số tiền đã giảm giá và tham chiếu đến đối tượng áp dụng giảm giá cha. line_item.line_level_discount_allocations có sẵn trên mục hàng trong giỏ hàng, phần thanh toán, đơn hàng và đơn hàng nháp.
line_item.total_discount Trả về tổng số tiền của tất cả ưu đãi giảm giá áp dụng cho mục hàng. Thuộc tính này chỉ có giá trị nếu bạn đang sử dụng ứng dụng Script Editor.

Tùy chọn tham gia Shop

Trường số điện thoại riêng đã được thêm vào trang trạng thái đơn hàng. Khách hàng được nhắc nhập số điện thoại di động để nhận thông tin cập nhật về vận chuyển qua tin nhắn. Những tin nhắn này cũng chứa liên kết đến ứng dụng Shop.

Chỉnh sửa đơn hàng

Khi thương nhân Shopify Plus có thể chỉnh sửa đơn hàng, tính năng này sẽ cho phép thu hồi các khoản thanh toán chưa trả khác trên đơn hàng đã chỉnh sửa nhờ thanh toán của Shopify. Có một số thay đổi với trang thanh toán để đảm bảo trang thanh toán hoạt động như dự kiến:

  • Khách hàng không thể thay đổi thông tin liên hệ, địa chỉ giao hàng hoặc phương thức vận chuyển.
  • Các mục hàng bổ sung cho biết tổng đơn hàng và số tiền đã thanh toán.
  • Nút Complete purchase (Hoàn tất mua hàng) thay đổi thành Pay now (Thanh toán ngay). Total (Tổng) thay đổi thành Amount to pay (Số tiền phải trả).
  • Thay vì thông tin liên kết phân cấp cho biết vị trí của khách hàng trong quá trình thanh toán, khách hàng sẽ thấy biểu ngữ thu gọn liệt kê chi tiết thông tin bổ sung về đơn hàng: - Số tiền thanh toán bổ sung.
    • Sản phẩm đã thêm hoặc xóa khỏi đơn hàng.
    • Mã số đơn hàng.

Hình ảnh hiển thị trang thanh toán khi cần thanh toán bổ sung

Những thay đổi này sẽ chỉ có hiệu lực khi đơn hàng được chỉnh sửa và yêu cầu khách hàng thanh toán bổ sung.

Nếu nội dung tùy chỉnh thanh toán sử dụng liên kết phân cấp để xác định bước thanh toán hiện tại, bạn nên sử dụng đối tượng Shopify.Checkout.step thay thế. Tham khảo Xác định bước để tìm hiểu thêm.

Cải thiện khả năng truy cập

Một số thay đổi đã được thêm vào quá trình thanh toán để đảm bảo tuân thủ các tiêu chuẩn về khả năng truy cập web. Điều này giúp khách hàng dễ dàng điều hướng quá trình thanh toán hơn bằng công nghệ truy cập, ví dụ như đầu đọc màn hình.

  • Liên kết phân cấp hiện nằm trong phần tử nav trong tất cả các bước thanh toán. Thuộc tính aria-current được chuyển từ phần tử span sang phần tử li.
  • Tổng quan đơn hàng hiện nằm trong phần tử aside.
  • ID trường mã giảm giá dành cho khách hàng sử dụng thiết bị di động được thay đổi từ checkout_reduction_code thành checkout_reduction_code_mobile trong tất cả các bước thanh toán.
  • Thuộc tính của khả năng truy cập được thêm vào bản đồ cho trang Thank You (Cảm ơn) và Trạng thái đơn hàng. Bản đồ hiện có role=regionaria-label cùng với địa chỉ giao hàng.
  • step và div bao bọc step__section được thêm vào trang Trạng thái đơn hàng, Hết hàngThank You (Cảm ơn).
  • Các phần tử ngữ nghĩa HTML5 được đưa vào quá trình thanh toán và thuộc tính role đã được cập nhật. - Tổng quan đơn hàng hiện đang nằm trong phần tử aside.
    • Div cho .main__header hiện là một phần tử đầu trang với role=banner.
    • Div cho .main__content hiện là phần tử chính với role=main.
    • Div cho .main__footer hiện là phần tử chân trang với role=contentinfo.
    • Div cho banner hiện là đầu trang với role=banner.

Đã xóa khoảng đệm

Các trang Trạng thái đơn hàng, Hết hàngThank You (Cảm ơn) đã xóa các khoảng trắng giữa tên cửa hàng và mã số đơn hàng. Khoảng đệm bổ sung này đã bị xóa khỏi mục div.section.section--page-title.

Hiển thị phương thức thanh toán

Tổng số tiền của đơn hàng hiện hiển thị với khách hàng trên trang trạng thái đơn hàng trong mục Phương thức thanh toán.

Hình ảnh trang trạng thái đơn hàng hiển thị tổng số tiền của đơn hàng

Đã xóa chuỗi phần giữ chỗ

Đã xóa trường Email placeholder (Phần giữ chỗ email) và Email or phone placeholder (Phần giữ chỗ email hoặc điện thoại) khỏi các tùy chọn ngôn ngữ trong cài đặt chủ đề. Có thể thực hiện mọi thay đổi cần thiết trong các trường Email label (Nhãn email) và Email or phone label (Nhãn email hoặc điện thoại) tương ứng. Để truy cập các trường này, vào Cửa hàng trực tuyến > Chủ đề, sau đó, nhấp vào Actions (Thao tác) > Edit languages (Chỉnh sửa ngôn ngữ) > Checkout and system (Thanh toán và hệ thống).

Hiển thị địa chỉ khách hàng đã lưu

Cách hiển thị địa chỉ đã lưu trong quá trình thanh toán đối với khách hàng đã đăng nhập thay đổi.

Hình ảnh hiển thị danh sách địa chỉ đã lưu

Tùy chọn địa chỉ được hiển thị theo thứ tự sau:

  1. Địa chỉ đã lưu mặc định.
  2. Địa chỉ đã thêm gần đây nhất, từ gần nhất đến xa nhất.
  3. Tùy chọn sử dụng địa chỉ mới.

Menu thả xuống hiển thị tối đa 5 địa chỉ.

Xác thực 3D Secure

Công nghệ 3D Secure cung cấp lớp bảo mật bổ sung mà khách hàng cần hoàn thành để hoàn tất mua hàng và hỗ trợ dịch vụ như Verified by Visa, Mastercard Identity Check hoặc Amex SafeKey. Trong quá trình thanh toán, một số khách hàng có thể được chuyển hướng đến cổng thông tin của ngân hàng để xác thực bổ sung. Để tìm hiểu thêm, tham khảo Tìm hiểu PSD2 và xác thực khách hàng nghiêm ngặt.

Thương nhân tại Khu vực kinh tế châu Âu (EEA) có thể sử dụng Cardinal để cung cấp thanh toán 3D Secure. Tham khảo 3D Secure với Cardinal để tìm hiểu thêm.

Quyết định xem thanh toán nào yêu cầu xác minh thêm sẽ do ngân hàng xác định và không thể kiểm soát qua trang quản trị Shopify. Không cần thực hiện thêm thao tác nào để kích hoạt thay đổi này.

Thay đổi trường Google Analytics JavaScript bổ sung

JavaScript đã nhập vào mục Additional Google Analytics JavaScript (Javascript Google Analytics bổ sung) trong trang quản trị Shopify tại Cửa hàng trực tuyến > Tùy chọn được thêm vào thanh toán dưới dạng iFrame không hiển thị. Điều này không ảnh hưởng đến JavaScript được sử dụng cho mục đích phân tích, nhưng ngăn cản thực hiện các thay đổi khác đối với thanh toán. Nếu bạn muốn thêm JavaScript tùy chỉnh cho thanh toán vì các lý do khác, hãy thêm trực tiếp vào tệp checkout.liquid.

Thay đổi CSS

heading-* và các lớp CSS text-container đã được thêm vào tất cả các bước thanh toán.

Thông báo lỗi

Đã thêm biểu ngữ lỗi để thông báo cho khách hàng khi phương thức thanh toán nhanh mà họ chọn không khả dụng. Biểu ngữ này xuất hiện ở trên cùng của bước Contact Information (Thông tin liên hệ) trong quá trình thanh toán.

Hình ảnh

Đã di chuyển biểu ngữ lỗi thông báo cho khách hàng rằng phí vận chuyển cũ không còn hợp lệ. Biểu ngữ này hiện xuất hiện ngay trên các tùy chọn vận chuyển có sẵn.

Hình ảnh

Liên kết có liên quan

Bạn đã sẵn sàng bán hàng với Shopify?

Dùng thử miễn phí