Customize payment card icons in checkout page
By default, your store's checkout page shows the payment card icons that are associated with the payment gateways you have connected in your store admin settings. In this article, we will show you how to manually add or remove the payment card icons that you want to display in a few steps.
From your ShopBase admin site, go to Online store > Preferences.
In Additional scripts, Body section, paste the following script in the box:
The script above will add a PayPal payment icon between the existing American Express and Discover icons.
You can add and replace the following values in these lines to customize the payment card icons and their positions:
'delete',: to hide the icon in the respective position.
'skip',: to keep the original icon in the respective position.
To add a new payment card icon, add a new line and insert the link of the payment card icon you want to use between ' and ',.
Please refer to the list below for more links of payment card icons:
PayPal
Visa
Mastercard
Discover
American Express
Union Pay
JCB
Maestro
Add Power Up Scripts to optimize your store
Add Countdown and Trust Indicators to Checkout Page
Step by Step Tutorial
From your ShopBase admin site, go to Online store > Preferences.
In Additional scripts, Body section, paste the following script in the box:
<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>The script above will add a PayPal payment icon between the existing American Express and Discover icons.
You can add and replace the following values in these lines to customize the payment card icons and their positions:
'delete',: to hide the icon in the respective position.
'skip',: to keep the original icon in the respective position.
To add a new payment card icon, add a new line and insert the link of the payment card icon you want to use between ' and ',.
Please refer to the list below for more links of payment card icons:
PayPal
Visa
Mastercard
Discover
American Express
Union Pay
JCB
Maestro
Related articles
Add Power Up Scripts to optimize your store
Add Countdown and Trust Indicators to Checkout Page
Updated on: 29/02/2024
Thank you!