top of page
Ảnh của tác giảWeb1trang.vn

Thêm mã QR code chuyển khoản (tự động) với đơn hàng trên Wix

Đã cập nhật: 21 thg 10

Hướng dẫn các bạn cài đặt trang thanh toán của Wix thuận tiện hơn cho khách hàng của bạn tại Việt Nam.

Bao gồm: Hướng dẫn chi tiết, video hướng dẫn và code để copy.

Phù hợp nhất với các webite có bán sản phẩm kỹ thuật số (Digital Product) dành cho khách hàng chính ở Việt Nam.

Trang thanh toán này sẽ dùng với các ứng dụng Wix Store, Wix RestaurantWix Booking. Các ứng dụng khác (Online Programs, Events….) hoàn toàn không ảnh hưởng và thay đổi.

Lý do tại sao?

Khi đăng ký mua sản phẩm thì sau khi đặt hàng xong. Mặc dù Wix cho phép thêm hình thức thanh toán thủ công, được thêm vào thông tin chuyển khoản nhưng mới chỉ hiển thị ở trang giỏ hàng, email sau thanh toán.



Và đặt hàng xong sẽ hiển thị màn hình như bên dưới:


Mẫu mặc định của Wix

Trong khi đó:

  • Màn hình này là nơi đủ thông tin đơn hàng

  • Khách hàng đã điền đủ và gửi thông tin đặt hàng

=> Dễ dàng dừng lại để lấy điện thoại ra chuyển khoản dễ dàng nhất.

Vì vậy, cần chỉnh sửa lại trang thankyou page mặc định của Wix (như ảnh trên) để mang lại trải nghiệm người dùng tốt hơn (hình bên dưới).



Điểm hạn chế của cách làm này

Website chỉ có 1 hình thức thanh toán là chuyển khoản

Thiết kế lại giao diện trang thanh toán thêm mã QR code nên khi sử dụng thêm các hình thức thanh toán khác thì trang thanh toán này vẫn xuất hiện, ảnh hưởng đến trải nghiệm người dùng.

Trong bối cảnh hiện nay, nếu khách hàng tại Việt Nam thì chỉ có hình thức chuyển khoản là khả dụng. Bạn cũng không thể thêm hình thức khác. Đó cũng là lý do mà giải pháp này ra đời.

Không phù hợp với sản phẩm vật lý

Khi hệ thống tự động hoàn tất thanh toán, đơn hàng sẽ tự chuyển sang trạng thái đã hoàn thành. Vì thế mà đơn hàng vật lý cần xử lý, shipping sẽ không phù hợp. Nếu mọi thứ đều OK. Chúng ta bắt đầu

Hướng dẫn chi tiết


Xem giới thiệu nhanh và hướng dẫn cơ bản qua video


Bước 1: Vào trang quản trị của website trên Wix => Bấm chỉnh sửa giao diện (Frontend)


Bước 2: Bật chế độ nhà phát triển Velo

Velo là một nền tảng phát triển web trực tiếp trên Wix, cho phép bạn tùy chỉnh sâu hơn và thêm các chức năng nâng cao cho trang web mà bạn xây dựng trên Wix.


Chọn trang Thank You Page trong trang giỏ hàng và cảm ơn.


XÂY DỰNG GIAO DIỆN

Thêm dải ngang, thêm để giao diện chia thành 2 cột. Có thể chia giao diện 40%-60% hoặc 50%-50% tùy theo mong muốn của bạn.

Một cột ể đưa thông tin thanh toán và một cột là thông tin mặc định của trang cảm ơn (Thank You Page)



Khoan đã, chúng ta cập nhật 1 chútID là định danh của mỗi element (phần tử), section, column trên giao diện..và là duy nhất (không thể trùng nhau trên mỗi trang. Thông thường ID sẽ được mặc định do wix tự tạo r

Cách xem và đổi ID của phần tử, column hay section.

THÊM ELEMENT THANK YOU PAGE Ở CỘT BÊN PHẢI

Đổi tên của Thank You Page là thankYouPage1


Đổi tên của Thank You Page là thankYouPage1

THÊM PHẦN HƯỚNG DẪN THANH TOÁN Ở CỘT BÊN TRÁI

Thêm các Element cho phân hướng dẫn thanh toán như hướng dẫn bên dưới.



Sau khi thêm xong các Element và cấu hình ID như hướng dẫn, bạn có thể sắp xếp thiết kế theo ý bạn hoặc chuyển qua giao diện Mobile để tối ưu lại giao diện. Nếu bước này gây khó khăn cho bạn, hãy xem cách thứ 2 - Dùng templ2

THÊM CODE VELO CHO TRANG THANK YOU PAGE

Để trang này hoạt động, thêm code Velo bên dưới

Select All và dán toàn bộ code, không cần phải giữ lại code nào có sẵn vì trọng đoạn code này đã có sẵn

// Tham chiếu API Velo: <https://www.wix.com/velo/reference/api-overview/introduction>
import wixLocationFrontend from "wix-location-frontend"; // Import thư viện Wix Location cho frontend

// Biến chứa số tài khoản ngân hàng và các thông tin liên quan đến QR code
let stk = "0812200100"; // Số tài khoản ngân hàng
let bank = "MBBank"; // Tên ngân hàng
let prefix = "Wixvn-"; // Tiền tố để thêm vào mô tả đơn hàng khi tạo QR code. Thay tiền tố của bạn vào đây

// Khi trang sẵn sàng chạy mã
$w.onReady(function () {
    // Lấy thông tin đơn hàng từ trang cảm ơn
    $w("#thankYouPage1").getOrder().then((order) => {

            // Nếu đơn hàng có 
            if (order.number) {
            
                // Nếu mã đơn hàng bằng 0, tức là đơn hàng 0 đồng
                if (order.number == 0) {
                    $w('#status').text = "Đơn hàng 0 đồng đã hoàn thành"; // Thông báo cho người dùng đơn hàng 0 đồng
                    // Thay đổi biểu tượng trạng thái thành ảnh động (Lottie)
                    $w('#statusicon').src = "<https://lottie.host/18b226ee-5fea-4730-8179-815a830602f3/D2CvZYc9JI.json>";
                    // Ẩn các phần tử không cần thiết cho đơn hàng 0 đồng
                    $w('#box3').hidden;
                    $w('#box3').collapse;
                    $w('#box2').hidden;
                    $w('#box2').collapse;

                } else {
                    // Nếu là đơn hàng có giá trị lớn hơn 0
                    const orderNumber = order.number; // Lấy mã số đơn hàng
                    const billingEmail = order.billingInfo.email; // Lấy email thanh toán
                    const amount = order.totals; // Lấy tổng giá trị đơn hàng
                    const des = prefix + orderNumber.toString(); // Tạo mô tả cho đơn hàng bằng cách kết hợp tiền tố và mã đơn hàng
                    // Tạo URL QR code với thông tin ngân hàng và số tiền
                    const qrCodeUrl = "<https://qr.sepay.vn/img?acc=>" + stk + "&template=compact&bank=" + bank + "&amount=" + amount.total + "&des=" + des;
                    $w("#qrcode").src = qrCodeUrl; // Gán URL QR code vào hình ảnh trên trang
                    $w('#amount').text = amount.total.toString(); // Hiển thị tổng số tiền đơn hàng
                    $w('#cuphap').text = des; // Hiển thị cú pháp thanh toán cho khách hàng
                    // Ghi chú: ví dụ về đối tượng order có thể tham khảo trong API Velo
                }
            } else {
                // Nếu không lấy được mã đơn hàng, điều hướng người dùng tải lại trang
                const url = wixLocationFrontend.url; // Lấy URL hiện tại
                wixLocationFrontend.to(url); // Điều hướng lại URL hiện tại để làm mới
                $w('#thongbao').text = "F5 lại để lấy mã đơn hàng, QR code thanh toán"; // Thông báo người dùng làm mới trang
            }
        })
        .catch((error) => {
            // Nếu có lỗi khi lấy đơn hàng, log lỗi ra console
            console.log(error);
        });

});

// Import thư viện wixWindow để làm việc với các tính năng cửa sổ
import wixWindow from 'wix-window';

// Khi trang sẵn sàng chạy mã (lần 2)
$w.onReady(() => {
    // Thêm sự kiện click vào nút "Copy"
    $w("#buttoncopy").onClick(() => {

        // Lấy nội dung số tài khoản từ phần tử stk trên trang
        let textMessage = $w("#stk").text;

        // Sao chép số tài khoản vào clipboard
        wixWindow.copyToClipboard(textMessage)
            .then(() => {
                // Khi đã sao chép thành công, vô hiệu hóa nút copy
                $w("#buttoncopy").disable();
                $w("#buttoncopy").label = 'Copied!'; // Thay đổi nhãn nút thành 'Copied!'
            })
    })
});

Thay thông tin thanh toán của bạn tại đây:

Stk: Số tài khoản ngân hàng

Bank: Tên short_name ngân hàng (Xem ngân hàng và lấy tên short_name tại đây)

Prefix: Cú pháp trước mã đơn hàng, theo mong muốn của bạn



Trong mã code này, mình đã chú thích các tính năng, khai báo biến chi tiết để bạn hiểu cách thức nó hoạt động

Vậy là chúng ta đã xong phần cấu hình cho thankyou page

Thiết lập trên Wix Cách 2 (Sử dụng template)

Tải Mẫu template về và giải nén:



Cách thêm mẫu trang web này:

  

1. Nhấp vào “Sử dụng mẫu này.html” trong tệp ZIP.


Bước này Wix cần setup sẽ load hơi chậm một chút nhé


2. Nếu bạn chưa đăng nhập vào Wix, bạn sẽ được yêu cầu đăng ký hoặc đăng nhập vào tài khoản của mình.

  

3. Đồng ý với điều khoản và điều kiện và nhấp vào nút "Thêm trang web".


4. Mẫu sẽ được thêm vào tài khoản của bạn dưới dạng trang web mới.


5. Mở chỉnh sửa trang web mới


Tạo dải ngang => Thêm cột để thành 2 cột.


Các phần tử thì copy và dán vào trang thankyou page của bạn. Tên ID không cần đổi lại


Các ô vùng chứa thì copy và dán cả ô vùng chứa, các phần tử bên trong sẽ đi theo.


Hình ảnh mình để trong template thay bằng Element Thankyou page có sẵn trong trang checkout. Đổi ID thành thankYouPage1


Bật chế độ nhà phát triển và dán Code Velo (Có ở bước Thiết lập trên Wix).


Vậy là hoàn thành.

55 lượt xem1 bình luận

Bài đăng liên quan

Xem tất cả
bottom of page