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

Trang này được in vào May 20, 2024. Để lấy phiên bản hiện tại, vui lòng truy cập https://help.shopify.com/vi/manual/checkout-settings/checkout-upgrade.

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, bạn cần thay đổi tệp checkout.liquid để nâng cấp trang.
  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.

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:

  1. 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).
  2. Chọn chủ đề hiện tại từ danh sách rồi nhấp vào Preview (Xem trước).
  3. 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:

  1. Trên trang quản trị Shopify, vào mục Cửa hàng trực tuyến > Chủ đề.
  2. Nhấp vào nút ..., sau đó nhấp vào Sao chép.
  3. 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.

  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:

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:

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ý

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ành data-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ào ul đố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ên telephone_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êm role="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

  • Đã 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

  • 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ành dt 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ành div.radio__label__accessory
    • span.visually-hidden đã đổi thành h3.visually-hidden
    • span.payment-icon-list__more đã đổi thành li.payment-icon-list__more
    • span.content-box__small-text đã đổi thành small.content-box__small-text

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í