Cash on Delivery (COD) payment is used by Sellers who want to collect payment when the package is delivered to the customers. However, there is a risk when your customers place high-value orders and these orders might be returned as your customers are less committed to the purchase than if they had paid in advance. In this article, we will show you how to limit order's value for COD payments to reduce this risk.
Step by Step Tutorial
From your ShopBase admin site, go to Online store > Preferences.
In Additional script section, paste the following script to the text box in Head tab:
<script >
window.sbsdk.ready(function() {
window.sbsdk.page.onContextUpdate(function(context) {
if (context.type === 'checkout' || context.type === 'process_checkout') {
const maxItem = 3
const maxValue = 550
const type = 'semi'
var readyCheckInterval = setInterval(function() {
const btn = document.getElementsByClassName("step__continue-button")[0] || document.getElementsByClassName("step__complete-order")[0]
function addAlert() {
console.log(btn)
btn.disabled = true
var text = ""
if (type === "value") {
text = `Your order reaches the maximum amount. It should be less than or equal to $${maxValue}. Please select another payment method or update your cart.`
}
if (type === "item") {
text = `Your order reaches the maximum quantity. It should be less than or equal to ${maxItem} items. Please select another payment method or update your cart.`
}
if (type === "semi") {
text = `Your order reaches the maximum quantity and/or amount. It should be less than or equal to ${maxItem} items and/or $${maxValue}. Please select another payment method or update your cart.`
}
document.getElementById('cod-cod-header').insertAdjacentHTML('afterend', `<div id="alert_cod" style="
/* padding-top: 10px; */
padding: 16px;
background: rgb(252,246,230);
">
<div style="
font-size: 12px;
display: flex;
width: 100%;
justify-content: space-evenly;
">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/99/OOjs_UI_icon_alert-yellow.svg">
<div style="
padding-left: 20px;
">${text}</div>
</div>
</div>`)
}
function removeAlert() {
const alert = document.getElementById("alert_cod")
if (alert !== null) {
document.getElementById("alert_cod").remove()
btn.disabled = false
}
}
var a = document.getElementsByClassName("payment_method")
for (let i = 0; i < a.length; i++) {
if (a[i].id === "cod-cod-header") {
continue
}
a[i].addEventListener("click", removeAlert)
}
function validValue() {
const text = document.getElementsByClassName("payment-due__price")[0].innerHTML
let numb = text.match(/[0-9/(.)]/g);
numb = Number(numb.join(""));
return numb > maxValue
}
function validItem() {
let count = 0
const listItem = document.getElementsByClassName('checkout-product-thumbnail__quantity')
for (let item of listItem) {
count += parseInt(item.innerHTML)
}
return count > maxItem
}
function valid() {
if (type === "value") {
return validValue()
}
if (type === "item") {
return validItem()
}
if (type === "semi") {
return validValue() || validItem()
}
}
if (document.getElementById("cod-cod-header") !== null) {
document.getElementById("cod-cod-header").addEventListener("click", item => {
const alert = document.getElementById('alert_cod')
if (valid() && alert === null) {
addAlert()
}
})
}
setInterval(() => {
if (document.getElementById("cod-cod-section")) {
if (!btn.disabled && document.getElementById("cod-cod-section").style.display === '' && document.getElementById("alert_cod") === null && valid()) {
addAlert()
}
}
}, 500)
}, 500);
}
});
});
</script>You can customize the maximum item quantity and/or order amount values directly in the script:
To limit the item quantity:
Find this line in the script:
const maxItem = 3.Replace
3 with any number of maximum items that you allow your customers to make their order.To limit the order value:
Find this line in the script:
const maxValue = 550.Replace
550 with any maximum amount value that you allow your customers to purchase.To define which value you prefer to limit:
Find this line in the script:
const type = 'semi'
Replace
semi with the following values: semi if you want to limit both item quantity and order amount; value if you want to limit the item quantity; item if you want to limit the order amount.Once finish, click Save.
The logic will be applied immediately and you can have a look at the checkout page as below.
This logic does not apply for post-purchase offers since your customers can add any additional item in the post-purchase step. You can deactivate post-purchase offer by following the steps in this article.