How to Add COD Handling Charges to Your Shopify Store?
Tags: codenewbie, java, webdev
Published: 2020-01-16 06:56:26

<p>Even though there are multiple ways out there to collect online payments from your customers, Cash on Delivery (COD) is still considered the most convenient and preferred mode of payment in the realm of eCommerce. According to various <a href="https://www.ey.com/en_gl/consumer-products-retail/now-that-india-shops-online-how-do-you-turn-growth-into-profit">reports</a>, COD accounts for nearly 60% of online sales.</p>
![Cash on Delivery Statistics](https://thepracticaldev.s3.amazonaws.com/i/aoyv43msg4qa8d72kreq.jpg)
<p>If you're using a leading eCommerce platform like Shopify and want to offer COD as a payment option to your customers, you don't have to think too much as the platform lets you enable or disable Cash on Delivery as a manual payment option. However, it doesn't natively offer any option to implement Cash On Delivery with additional charges. Means, you have to do it manually by writing custom code. For your help, here is how you can do that!</p>
<h2>Script for Adding COD Handling Charges to Shopify</h2>
<p>If you want to add some COD handling charges to Your Shopify Store, you first need to write or copy the following script.</p>
<div class="highlight"><pre class="highlight plaintext">
<script>window.ShopifyAnalytics.merchantGoogleAnalytics = function() {
  if(document.URL.indexOf('?previous_step=shipping_method&step=payment_method')>=0) { 
[].forEach.call(document.querySelectorAll(".order-summary__section--discount"),function(e){
  			e.parentNode.removeChild(e);
		});

[].forEach.call(document.querySelectorAll(".applied-reduction-code__clear-button"),function(e){
  			e.parentNode.removeChild(e);
		});

[].forEach.call(document.querySelectorAll(".field__input-btn-wrapper"),function(e){
  			e.parentNode.removeChild(e);
		});		

var shippingMethod = document.getElementsByClassName('review-block__content')[2].innerText;

if(shippingMethod == 'COD · Rs. 100.00') {



[].forEach.call(document.querySelectorAll("[data-select-gateway='127248205']"),function(e){
  e.parentNode.removeChild(e);
});

document.getElementById("checkout_payment_gateway_130854093").checked = true;
document.getElementById("checkout_payment_gateway_127248205").checked = false;
}



if(shippingMethod == 'Standard shipping · Free') {
	


[].forEach.call(document.querySelectorAll("[data-select-gateway='130854093']"),function(e){
  e.parentNode.removeChild(e);
});

document.getElementById("checkout_payment_gateway_130854093").checked = false;
document.getElementById("checkout_payment_gateway_127248205").checked = true;

}
}
};
</script>
</pre></div>
<p><strong>Note:</strong> You can change the <em>shippingMethod ==</em> parameter to anything you like.</p>
<h2>Steps to Add the Script to Your Shopify Store</h2>
<p>Follow the steps given below to add the above COD handling charges script to your Shopify store.</p>
<p><strong>Step 1:</strong> Go to your store’s <em>Setting</em> page and click the <em>Checkout</em> tab.</p>
![Step 1](https://thepracticaldev.s3.amazonaws.com/i/olafmkjgpel21j89t5bf.png)
<p><strong>Step 2:</strong> Paste the script code in the given box.</p>
![Step 2](https://thepracticaldev.s3.amazonaws.com/i/pah9r4pcfabp7lukgihz.png)
<p><strong>Step 3:</strong> Now go to your Checkout page and you’ll see that COD handling charges have started appearing there.</p>
![Step 3](https://thepracticaldev.s3.amazonaws.com/i/b2djtcv89vavrg76oak8.png)
<p>That’s it!. If you're not capable to implement this script or facing any issue, feel free to <a rel="dofollow" href="https://www.ipraxa.com/contact.html?utm_source=DevTo&utm_medium=Developer-Community&utm_campaign=iPraxa-Technical-Article" target="_blank">contact us</a>.</p>