Tùy chỉnh các biểu tượng thẻ thanh toán trong trang thanh toán

Theo mặc định, trang thanh toán của cửa hàng sẽ hiển thị các biểu tượng thẻ thanh toán được liên kết với cổng thanh toán mà bạn kết nối. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thêm hoặc xóa các biểu tượng thẻ thanh toán chỉ trong một vài bước.

Hướng dẫn

Tại trang quản trị ShopBase, đi tới Online store > Preferences.


Trong mục Additional scripts > Body, dán đoạn script dưới đây vào ô trống:

<script>
var imagesCustom = [
'skip',
'skip',
'skip',
'https://img.btdmp.com/themes/3/assets/paypal.png',
'<svg xmlns="http://www.w3.org/2000/svg" width="32" height="24" viewBox="0 0 32 24" aria-labelledby="icon_discover-con" role="presentation"><title id="icon_discover-con" lang="en">icon_discover-con icon</title><g fill="currentColor"><g><path d="M32.3181818,11.8637647 L32.3181818,2.11764706 C32.3181818,0.948 31.3746314,0 30.2104743,0 L2.10770751,0 C0.943550395,0 0,0.948 0,2.11764706 L0,21.8823529 C0,23.052 0.943550395,24 2.10770751,24 L9.54721245,24 C20.5353943,22.4548235 29.5100128,16.3016471 32.3181818,11.8637647 Z" id="Path" fill="#444444"></path><path d="M32.3181818,21.8823529 L32.3181818,11.8637647 C29.5100128,16.3016471 20.5353943,22.4548235 9.54721245,24 L30.2104743,24 C31.3746314,24 32.3181818,23.052 32.3181818,21.8823529 Z" id="Path" fill="#E6E6E6"></path><path d="M32.3181818,21.8823529 L32.3181818,11.8637647 C29.5100128,16.3016471 20.5353943,22.4548235 9.54721245,24 L30.2104743,24 C31.3746314,24 32.3181818,23.052 32.3181818,21.8823529 Z" id="Path" fill="#FA7000"></path><path d="M16.8820346,9.89152941 C15.6946927,9.89152941 14.7307678,10.8232941 14.7307678,11.9745882 C14.7307678,13.1985882 15.6525385,14.112 16.8820346,14.112 C18.0820227,14.112 19.0276808,13.1851765 19.0276808,11.9978824 C19.0283834,10.8176471 18.0890484,9.89152941 16.8820346,9.89152941 Z" id="Path" fill="#FA7000"></path><path d="M4.6692747,9.96776471 C5.94514032,9.96776471 6.83459289,10.7985882 6.83529545,11.9957647 C6.83529545,12.5936471 6.56199605,13.1710588 6.10251581,13.5529412 C5.7154002,13.8755294 5.27418676,14.0216471 4.66224901,14.0216471 L3.51284585,14.0216471 L3.51284585,9.96776471 L4.6692747,9.96776471 Z M5.58964032,13.0122353 C5.86083202,12.7701176 6.02312549,12.3804706 6.02382806,11.9901176 C6.02382806,11.6011765 5.86083202,11.2249412 5.59034289,10.9814118 C5.32758202,10.7456471 5.02126186,10.6538824 4.51189921,10.6538824 L4.30042589,10.6538824 L4.30042589,13.3348235 L4.51119664,13.3348235 C5.02055929,13.3348235 5.33952569,13.2367059 5.58964032,13.0122353 Z M7.19782115,9.96776471 L7.98188834,9.96776471 L7.98188834,14.0216471 L7.19782115,14.0216471 L7.19782115,9.96776471 Z M9.90763043,11.5214118 C10.8034061,11.8503529 11.0703824,12.1425882 11.0696798,12.7877647 C11.0696798,13.5705882 10.4942757,14.1197647 9.67718775,14.1197647 C9.07789625,14.1197647 8.64300593,13.8811765 8.28048024,13.3475294 L8.78773518,12.8534118 C8.96899802,13.2070588 9.27180534,13.3955294 9.6462747,13.3955294 C9.99826186,13.3955294 10.2582125,13.1527059 10.2582125,12.8230588 C10.2582125,12.6536471 10.1802273,12.5075294 10.0228518,12.4051765 C9.94275889,12.3550588 9.78608597,12.2816471 9.4776581,12.1736471 C8.73925791,11.904 8.486333,11.6195294 8.486333,11.0590588 C8.486333,10.3990588 9.03082411,9.9 9.74463439,9.9 C10.1858478,9.9 10.5912302,10.0510588 10.929166,10.3503529 L10.5195682,10.8896471 C10.3130128,10.6581176 10.1184012,10.5635294 9.88304051,10.5635294 C9.54299704,10.5635294 9.29569269,10.7569412 9.29569269,11.0117647 C9.29569269,11.2305882 9.43409881,11.3470588 9.90763043,11.5214118 Z M11.3169842,11.9957647 C11.3169842,10.8176471 12.2717757,9.876 13.4626304,9.876 C13.8033765,9.876 14.0865119,9.94870588 14.4314733,10.1237647 L14.4314733,11.0541176 C14.1047787,10.7308235 13.8195356,10.5981176 13.4464713,10.5981176 C12.7073686,10.5981176 12.127749,11.2136471 12.127749,11.9901176 C12.127749,12.8117647 12.6891018,13.3877647 13.4815998,13.3877647 C13.8399101,13.3877647 14.1167223,13.2621176 14.4321759,12.9437647 L14.4321759,13.8755294 C14.0752708,14.0449412 13.7851097,14.112 13.4471739,14.112 C12.2485909,14.112 11.3169842,13.188 11.3169842,11.9957647 Z M20.8079911,12.6896471 L21.899081,9.96776471 L22.7505949,9.96776471 L21.0068182,14.124 L20.5845741,14.124 L18.8738182,9.96776471 L19.7323577,9.96776471 L20.8079911,12.6896471 Z M23.1075,14.0216471 L23.1075,9.96776471 L25.3388597,9.96776471 L25.3388597,10.6538824 L23.89508,10.6538824 L23.89508,11.5538824 L25.2840593,11.5538824 L25.2840593,12.2407059 L23.89508,12.2407059 L23.89508,13.3348235 L25.3388597,13.3348235 L25.3388597,14.0216471 L23.1075,14.0216471 Z M28.4540514,11.1635294 C28.4540514,11.784 28.1287619,12.1912941 27.5357935,12.312 L28.805336,14.0209412 L27.8364931,14.0209412 L26.7496186,12.3910588 L26.6470435,12.3910588 L26.6470435,14.0209412 L25.8580583,14.0209412 L25.8580583,9.96705882 L27.0271334,9.96705882 C27.9355553,9.96705882 28.4540514,10.404 28.4540514,11.1635294 Z M26.876081,11.832 C27.3805257,11.832 27.6439891,11.6131765 27.6439891,11.208 C27.6439891,10.8134118 27.3805257,10.6058824 26.8887273,10.6058824 L26.647746,10.6058824 L26.647746,11.832 L26.876081,11.832 Z" id="Combined-Shape" fill="#FFFFFF"></path></g></g></svg>'
];
window.sbsdk.ready(function() {
    window.sbsdk.page.onContextUpdate(function(context) {
        if (context.type === 'checkout' || context.type === 'process_checkout') {
            var count = 0;
            var readyCheckInterval = setInterval(function() {
                var elementsImage = document.querySelector('.main__content .section__content .payment-icon-list:first-child')
                var rootElementsImage = document.querySelectorAll('.main__content .section__content .payment-icon-list:first-child div')
                if (typeof elementsImage !== 'undefined' && typeof rootElementsImage !== 'undefined') {
                    elementsImage = elementsImage.querySelectorAll('.payment-icon')
                    for (keyImageCustom in imagesCustom){
                        if (imagesCustom[keyImageCustom] === 'skip') {
                            continue;
                        }
                        if (imagesCustom[keyImageCustom]) {
                            if (elementsImage[keyImageCustom]) {
                                if(imagesCustom[keyImageCustom].startsWith('http'))
                                    elementsImage[keyImageCustom].innerHTML = `<img style="margin-top: 6px; width: 32px; height: 24px" src='${imagesCustom[keyImageCustom]}'/>`
                                else 
                                    elementsImage[keyImageCustom].innerHTML = imagesCustom[keyImageCustom]
                            } else {
                                if(imagesCustom[keyImageCustom].startsWith('http'))
                                    rootElementsImage[0].insertAdjacentHTML('beforeend', `<span class="payment-icon"><img style="margin-top: 6px; width: 32px; height: 24px" src='${imagesCustom[keyImageCustom]}'/></span>`);
                                else
                                    rootElementsImage[0].insertAdjacentHTML('beforeend', `<span class="payment-icon">${imagesCustom[keyImageCustom]}</span>`);
                            }
                        }
                        if (imagesCustom[keyImageCustom] === 'delete' && elementsImage[keyImageCustom]) {
                            elementsImage[keyImageCustom].innerHTML = ''
                        }
                    }
                    clearInterval(readyCheckInterval);
                }
                if (count > 8) {
                    clearInterval(readyCheckInterval);
                }
                count++;
            }, 500);
        }
    });
});
</script>

Đoạn script bên trên sẽ thêm biểu tượng PayPal vào giữa biểu tượng American Express và Discover hiện có.

Bạn có thể thêm và thay thế các giá trị dưới đây vào các dòng trong đoạn script để thay đổi biểu tượng thẻ thanh toán và vị trí của các loại thẻ này:

'delete',: để ẩn biểu tượng tại vị trí tương ứng.
'skip',: để giữ biểu tượng gốc tại vị trí tương ứng.
Để thêm biểu tượng thẻ thanh toán mới, hãy thêm một dòng mới và chèn liên kết của biểu tượng thẻ thanh toán mà bạn muốn sử dụng vào giữa các ký tự ' và ',.


Vui lòng tham khảo danh sách bên dưới về các đường dẫn của biểu tượng thẻ thanh toán:

PayPal
Visa
Mastercard
Discover
American Express
Union Pay
JCB
Maestro

Bài viết liên quan

Thêm Power Up Scripts để tối ưu hóa cửa hàng của bạn
Thêm đồng hồ đếm ngược và thông tin đáng tin cậy vào trang thanh toán

Cập nhật vào: 30/11/2022