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:
- 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, bạn cần thay đổi tệp
checkout.liquid
để nâng cấp trang. - 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.
Trên trang này
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.
Các bước thực hiện:
- Trong trang quản trị Shopify, vào trang Nâng cấp trang thanh toán rồi nhấp vào Preview checkout (Xem trước trang thanh toán).
- Chọn chủ đề hiện tại từ danh sách rồi nhấp vào Preview (Xem trước).
- Thử thanh toán bằng cách tiếp tục quá trình thanh toán với tư cách khách hàng.
Nếu bạn gặp lỗi trong những lần kiểm tra này, một số tùy chỉnh trên trang thanh toán có thể mâu thuẫn với các cải tiến trong phiên bản mới. Trong trường hợp này, bạn cần thực hiện thay đổi đối vớ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:
- Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
- Nhấp vào nút ..., sau đó nhấp vào Sao chép.
- Trong Các chủ đề khác, tìm chủ đề đã sao chép rồi nhấp vào nút ... > 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 chủ đề đã sao chép và chưa đăng này.
Mở tệp
checkout.liquid
.Xem trước tệp
checkout.liquid
trong chủ đề đã sao chép bằng trang thanh toán mới của Shopify:
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:
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).
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:
Trang thanh toán đã được nâng cấp và chủ đề sao chép đang là chủ đề hiện tại.
Có gì mới trên trang thanh toán 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:
- Gói đăng ký
- Bán thêm
- Boa tiền khi thanh toán
- Lấy hàng và giao hàng tận nơi
- Các trường quốc tế bổ sung
- Nút theo dõi đơn hàng bằng Shop
- Các cập nhật trên trang trạng thái đơn hàng
- Các thay đổi trên tệp tin chung
- Khung/trạng thái tải
- Thông báo lỗi
- Các thay đổi về thuộc tính dữ liệu
- Cải thiện khả năng truy cập
Gói đăng ký
Trang thanh toán Shopify đã thêm nhiều mục để bạn có thể cung cấp sản phẩm gói đăng ký mà vẫn duy trì các tùy chỉnh thanh toán của mình. Những mục này sẽ giúp bạn bán sản phẩm gói đăng ký và xử lý các khoản thanh toán định kỳ trực tiếp trong trang thanh toán Shopify.
Sau khi hoàn tất thao tác nâng cấp trang thanh toán, bạn có thể cung cấp gói đăng ký bằng cách thêm ứng dụng gói đăng ký từ Shopify App Store hoặc xây dựng một ứng dụng tùy chỉnh với API gói đăng ký mới.
Tìm hiểu thêm về gói đăng ký trong Trung tâm trợ giúp của Shopify.
- Khi gói đăng ký được kích hoạt, các phương thức vận chuyển được sử dụng cho gói đăng ký sẽ được hiển thị riêng biệt với các phương thức vận chuyển cho giao dịch mua một lần.
-
.product_description_variant Span.product_description_selling_plan
xuất hiện dưới dạng thuộc tính mục hàng bổ sung nếu có gói đăng ký được liên kết với sản phẩm. - Phần tổng định kỳ có chú giải công cụ đi kèm sẽ xuất hiện dưới phần tổng trong tổng quan đơn hàng.
- Các tùy chọn vận chuyển của gói đăng ký sẽ được hiển thị khi sản phẩm gói đăng ký có trong đơn hàng.
Bán thêm
Ứng dụng bán thêm sau khi mua hàng mới có sẵn trong Shopify App Store. Những ứng dụng này đem đến cho khách hàng của bạn các ưu đãi sau khi mua hàng ngay trong trang thanh toán Shopify và sửa đổi đơn hàng đã hoàn tất của họ để thêm sản phẩm được bán thêm mà không cần khách hàng phải nhập lại bất kỳ thông tin thanh toán hoặc vận chuyển nào.
Nâng cấp thanh toán này bao gồm các thay đổi đối với tệp thanh toán để giúp ứng dụng bán thêm sau khi mua hàng hoạt động trong trang thanh toán thiết kế riêng của bạn.
Tìm hiểu thêm về bán thêm sau khi mua hàng.
- Khi cài đặt ứng dụng sau mua hàng hợp lệ trong trang quản trị Shopify, khách hàng sẽ nhận được các ưu đãi sau khi mua hàng.
Boa tiền khi thanh toán
Có thể sử dụng các tùy chọn boa tiền để giúp khách hàng thêm tiền boa vào đơn hàng trực tuyến của mình hoặc để nhận quyên góp thay vì tiền boa. Khi bật tùy chọn boa tiền, mục Thêm tiền boa sẽ xuất hiện trên bước thanh toán trong trang thanh toán. Mục Thêm tiền boa có ba tùy chọn boa tiền định sẵn và một trường nhập số tiền boa tùy chỉnh.
Tìm hiểu thêm về cách cung cấp các tùy chọn boa tiền.
- Khi bật tùy chọn boa tiền, mục Thêm tiền boa sẽ xuất hiện trên bước thanh toán trong trang thanh toán.
Lấy hàng và giao hàng tận nơi
Đến tận nơi lấy hàng và giao hàng tận nơi là các phương thức giao hàng mới cho phép khách hàng nhận đơn hàng tận nơi. Khi bật những phương thức giao hàng này, khách hàng có thể chọn đến tận nơi lấy hàng hoặc giao hàng tận nơi trong bước vận chuyển trên trang thanh toán.
Tìm hiểu cách bật phương thức đến tận nơi lấy hàng và giao hàng tận nơi.
- Khi khách hàng bật và chọn phương thức giao hàng tận nơi, các trường bổ sung sẽ xuất hiện.
- Nếu bật phương thức đến tận nơi lấy hàng, khách hàng sẽ thấy mục phương thức giao hàng trên trang Information (Thông tin) trong trang thanh toán. Nếu không thể vận chuyển, chỉ có thông tin lấy hàng mới được hiển thị.
-
Phương thức giao hàng được hiển thị dưới dạng các tab khác biệt.
- Khi chọn Vận chuyển, khách hàng sẽ được nhắc nhập thông tin vận chuyển và các phương thức vận chuyển khả dụng sẽ hiển thị khi nhấp vào Continue to shipping (Chuyển đến phần vận chuyển).
- Khi chọn Lấy hàng, danh sách địa điểm lấy hàng sẽ hiển thị. Khách hàng nhấp vào nút radio cho địa điểm lấy hàng mong muốn rồi nhấp vào Tiếp tục thanh toán.
Nếu khách hàng chọn Pick up (Lấy hàng) trong bước vận chuyển trên trang thanh toán, thông tin vận chuyển sẽ không được thu thập. Khách hàng phải nhập thông tin thanh toán trong bước thanh toán trên trang thanh toán.
Các chỉ dẫn giao hàng tận nơi sẽ xuất hiện trên trang trạng thái đơn hàng. Có thể chỉnh sửa chỉ dẫn bằng cách vào trang quản trị Shopify, vào Cài đặt > Shipping and delivery (Vận chuyển và giao hàng). Trong mục Đến tận nơi lấy hàng , tìm địa điểm bạn muốn chỉnh sửa và nhấp vào Manage (Quản lý).
-
Trang trạng thái đơn hàng đã được cập nhật để hiển thị tiến độ giao hàng và lấy hàng. Thông báo sẽ hiển thị khi:
- đã chuẩn bị xong đơn hàng và sẵn sàng để giao hàng.
- đã hoàn tất giao hàng. Thông báo này cũng cung cấp liên kết để đặt lại mặt hàng đó.
- đã xác nhận đơn hàng đến lấy, cho biết khách hàng sẽ nhận được email khi đơn hàng đã sẵn sàng để lấy.
- đơn hàng đến lấy đã sẵn sàng để lấy.
- đơn hàng đến lấy đã được lấy.
Các trường quốc tế bổ sung
Tại một số quốc gia, bạn sẽ phải đáp ứng các quy định vận chuyển đặc biệt để lô hàng đến được tay khách hàng. Hiện nay đã bổ sung thêm các trường cho các quốc gia có quy định vận chuyển đặc biệt. Các trường mới này sẽ xuất hiện trên bước thanh toán trong trang thanh toán.
Tìm hiểu thêm về các trường quốc tế bổ sung.
- Các trường thanh toán bổ sung chỉ xuất hiện với khách hàng ở Brazil, Hàn Quốc, Ý và Trung Quốc.
Nút theo dõi đơn hàng bằng Shop
Cập nhật thiết kế mới cho nút Theo dõi đơn hàng bằng Shop trên trạng thái đơn hàng và trang cảm ơn.
Tìm hiểu thêm về ứng dụng Shop.
- Đã thêm nút văn bản để nhắc nhở khách hàng theo dõi giao dịch mua hàng trên ứng dụng Shop.
- Đã thêm các thông số để hiển thị theo dõi Shop Pay.
- Kết xuất nút Theo dõi đơn hàng bằng Shop trong các trường hợp sau:
- đã đến giao hàng
- xác nhận
- đã giao
- thất bại
- đang vận chuyển
- không thể vận chuyển
- đã gửi đi để giao hàng
Các cập nhật trên trang trạng thái đơn hàng
Trang trạng thái đơn hàng đã có một số cập nhật.
- Đã tạo mục dành riêng cho thông tin thẻ quà tặng và sẽ hiển thị khi mua thẻ quà tặng.
- Đã thêm thông tin gói đăng ký.
- Đã xóa lớp
icon-svg--align-text-bottom
. -
data-step="thank-you"
đã được thay đổi thànhdata-step="thank_you"
. Nếu bạn sử dụng thuộc tính này để xác định khách hàng đang ở trang thanh toán nào, hãy sử dụng đối tượng JavaScript Shopify.Checkout.page thay vào đó. - Đã thêm thẻ trạng thái đơn hàng.
Các thay đổi trên tệp tin chung
-
div.content-box__row
hiện đã córole="table"
. - Thêm
show_qr.js
nếu khách hàng đang ở trong trang cảm ơn và có gói QR. - Đã thêm kiểm tra để đảm bảo khách hàng có thể truy cập vào trang thanh toán.
- Thẻ quà tặng hiện được hiển thị cùng với
checkouts/order_status/gift_cards
. - Đã sửa chỉ dẫn thông tin liên hệ với
enforce_content_directionality
. - Đã chuyển thông tin vận chuyển sang
checkouts/web/checkouts/contact_information/pickup
. - Hiện đã hỗ trợ hiển thị nhiều dòng vận chuyển trong thanh bên của trang tổng quan đơn hàng.
-
tr.total-line
sẽ chỉ hiển thị nếu phần tổng số được cập nhật. - Hiện đã hỗ trợ các dòng thanh toán chung.
- Hiện đã hỗ trợ thay đổi loại tiền tệ trong quá trình thanh toán.
-
#payment-gateway-subfields
hiện đã có các lớp:-
.radio-wrapper content-box__row .content-box__row--secondary
-
.card-fields-container
-
Đã điều chỉnh chú giải công cụ thẻ tín dụng và hiện có trong
div.field__icon
.Đã xóa nhãn Aria khỏi mô tả đầy đủ về phí vận chuyển.
Đã chuyển trường biểu mẫu phí vận chuyển sang
checkouts/web/checkouts/shipping_method/shipping_rate_additional_fields
.
Khung/trạng thái tải
Trạng thái tải của trang thanh toán đã được cập nhật, thêm khung hiển thị khi tải trang, hoặc chọn ẩn một số yếu tố cho đến khi tải xong. Những thay đổi này sẽ tối ưu hóa thời gian tải.
-
Các đối tượng bị ẩn khi tải:
-
del.total-recap__original-price
-
.total-line__price span.payment-due__currency
-
span.order-summary__emphasis
-
-
Các đối tượng hiển thị khung khi tải:
-
Span.total-recap__final-price
-
.product__price del.order-summary__small-text
-
.product__price del.order-summary__emphasis
-
.total-line__price span.payment-due__price
-
.total-line__price span.order-summary__emphasis
-
.total-line__price span.visually-hidden
-
.total-line__price.total-line--subtotal span.order-summary__emphasis
-
Thông báo lỗi
Đã thêm thông báo lỗi mới vào trang thanh toán.
- Đã thêm cảnh báo mã số công dân vào trường địa chỉ.
- Cảnh báo không có phí vận chuyển khả dụng cho giỏ hàng, điểm đến hoặc quốc gia đã được tách thành hai thông báo cảnh báo riêng: một thông báo cảnh báo rằng không có phí khả dụng cho giỏ hàng hoặc điểm đến, và một cảnh báo riêng rằng không có phí khả dụng cho quốc gia.
- Đã thêm biểu ngữ cảnh báo vào trang thanh toán khi cố hoàn tất giao dịch mua hàng trong cửa hàng thử nghiệm.
- Đã thêm một thông báo và sẽ xuất hiện khi khách hàng sẽ không bị tính phí trong quá trình thanh toán.
- Đã thêm biểu ngữ cảnh báo rằng có lỗi thay đổi xác thực.
- Đã thêm thông báo lỗi khi phương thức vận chuyển không khả dụng ở bước vận chuyển khi thanh toán.
Các thay đổi về thuộc tính dữ liệu
Đã xóa Trekkie khỏi các đối tượng sau:
-
Continue_shipping_button
-
Get_shipping_updates_button
-
Shipping_updates_handle_field
-
Shipping_updates_submit_button
-
Change_shipping_address_link
-
breadcrumb_cart_link
-
apply_discount_button
-
Have_an_account_login_link
-
Email_or_phone_field
-
Email_field
-
buyer_accepts_marketing_field
-
Change_billing_address_link
-
Change_contact_method_link
-
Change_payment_method_link
-
Change_pickup_method_link
-
Change_shipping_address_link
- Trường nhập thanh toán:
-
{type}_address_field
-
{type}_firstname_field
-
{type}_lastname_field
-
{type}_company_field
-
{type}_address1_google_autocomplete_field
-
{type}_address1_field
-
{type}_address2_field
-
{type}_city_field
-
{type}_country_field
-
{type}_province_field
-
{type}_zip_google_autocomplete_field
-
{type}_phone_field
-
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.
-
Đã thêm
role="list"
vàoul
đối với các mục sau:-
u.breadcrumb
-
ul.payment-method-list
-
ul.os-timeline
-
ul.policy-list
-
Mẹo sử dụng công cụ đã bị xóa khỏi
aria-labelledby
trêntelephone_field
.Trong Shop, nhãn nhập dữ liệu đã được thay đổi để thể hiện là điện thoại.
Đã thêm tiêu đề
h3
khi chờ thuế.Đã thêm tiêu đề
h3
khi chuyển hướng.Khi tải phương thức vận chuyển, thẻ
p
đã được thay đổi thành thẻh3
.Tính năng tự động hoàn tất bây giờ thể hiện là
mobile tel
thay vìphone
.Đã cập nhật
div[data-processing-order]
bằng cách thêmrole="region"
.-
Đã cập nhật
div[data-announce-change]
như sau:- đã thêm
role="region"
- đặt
aria-labelledby
để khớp với ID của thành phần đầu trang - đặt
aria-describedby
để khớp với ID của yếu tố chứa nội dung
- đã thêm
-
Đã cập nhật
div.content-box blank-slate
như sau:- đã thêm
role="region"
- đặt
aria-labelledby
để khớp với ID của thành phần đầu trang
- đã thêm
Lưới Express Checkout (Thanh toán nhanh) đã được nâng cấp để sử dụng
ul
và các yếu tốli
, thay vìdiv
.-
Đã cập nhật nội dung tổng hợp đơn hàng như sau:
- cải thiện mức độ rõ ràng của giá ưu đãi và giá thông thường
- đã thay đổi khoảng thời gian đối với thẻ
dl
- đã thay đổi thẻ
del
thànhdt
và thẻdd
.
-
Đã cập nhật phương thức thông tin chi tiết thanh toán như sau:
-
span.radio__label__accessory
đã đổi thànhdiv.radio__label__accessory
-
span.visually-hidden
đã đổi thànhh3.visually-hidden
-
span.payment-icon-list__more
đã đổi thànhli.payment-icon-list__more
-
span.content-box__small-text
đã đổi thànhsmall.content-box__small-text
-