Hello person reading this,
I came across a couple forum posts asking about Cash on Delivery for Webflow E-Com, pretty much what’s the best way to have the customer checkout without having to pay.
Maybe I don’t have the best way, but it’s definitely something that works, so I decided to share my little workaround and hope this helps somebody.
This workaround uses Webflows Discount code and a bit of Javascript (I’ll lay it down for you so don’t worry if you don’t know how to code JS).
Let’s jump right in, open your Ecom project and follow these steps:
1. Create a Discount code. (Click the Ecommerce icon in your toolbar → Discounts → New Discount)
2. Fill out the fields.
IMPORTANT:
- Input “CASHONDELIVERY” in the “Discount code*” field. (Do not input the quotes " " )
- Set the Discount type to Percentage, and the value below it to 100 (%)
Restrictions section: - Applies to: Entire Order
- Minimum Order Value: No minimum
- Total Usage: Unlimited
- Limit uses per customer: Unlimited
3. Go to the Checkout page and hide the “Payment Info” Div
3.1. Add the “Discounts” element (It doesn’t matter where you put it, we’ll be hiding it anyways)
3.2. Select the discount field, give it the ID “discount-code”
( Do not input the quotes " " )
3.3. Select the Apply button, and give it the id “discount-button”
( Do not input the quotes " " )
4. Now for the super simple script that makes it work, go to the checkout page settings
(click the little gear icon)
Scroll down to the “Before tag” field, and input the following:
<script>
document.getElementById('discount-code').value = "CASHONDELIVERY";
document.getElementById("discount-button").click();
</script>
5. Go ahead and hide the discount code field.
And voila…
So how does it work?
Well when the customer adds everything to their checkout cart, they will see how much everything is worth, and how much they can expect to pay you, but once they reach the checkout page, the script automatically applies the CASHONDELIVERY discount which will retract the sum of the order and they can proceed through the checkout without having to input their credit card information.
This also allows you to see the value of their order (prior to the CASHONDELIVERY discount), so that when they come to pay for their goods, you know how much it will cost.
Hope this helps somebody, and if you got any questions, feel free to reach out or leave feed back.
Cheers!
