Workaround: Cash on Delivery [Webflow E-commerce]

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.

- 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:


document.getElementById('discount-code').value = "CASHONDELIVERY";


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.


Ah dude this is a great solution. Wish I had thought of that before. We’re at the very end of a long project where we essentially built our own shop to place an order without paying. It was a hell of a lot of work!

1 Like

Hahaha I feel you man

Would you be hiding the discount field with display none? How might I mix in cash on delivery with normal payments without hiding the discount field for everyone?

Yes, you would hide the field with display: none. As far as having the person select cash on delivery. You could make a button that says “Cash on delivery”, which will run the script above once it’s clicked by the user, instead of having JavaScript clicking it.

1 Like

I would like to build a e-commerce with an option for the user to order the products and either pay with the credit card/paypal or pay cash on delivery via the post.

If I understand it clear, this workaround offers the options for users to choose between the two options?

Hi all.
Josh with Foxy here. If you don’t get what you need with Webflow Ecommerce alone, our seamless Webflow integration supports cash on delivery, 100+ gateway integrations, embeddable customer portal, and more.

Please don’t hesitate to reach out if you have any questions or need help getting started:


This specific example is to replace the payment method to cash on delivery. However you can use this work around and modify it a little bit in order to give the option between credit card/paypal and cash on delivery.

Hey Alan! Great workoaround! Have you posted anywhere the cash-on-delivery as an alternative option tutorial somewhere? ^^ If not, is it possible to make a new thread guiding from start-to-finish? Thank you.

I have not got around to doing that yet.
I probably should get around to it, but if you need help with it shoot me an email at and I’ll help you out the best I can.

Hey, thanks for the quickest response ever in a forum.
Alan, actually i’m not in immediate need, but I just built my first ecomm site, in a country where cash-on-delivery is like the 90% of choice. So owners, or potential clients would probably like to know for this possibility in a when pitching Webflow. Actually they don’t like to know, they presume is already there.

Yea I agree with you, in countries where cash on delivery is a famous option, clients just assume it exists. I’ll look into making a tutorial for COD as an optional solution when I get the chance to. (Busy with some projects lately). But it anything do not hesitate to reach out. :slight_smile:

Hello Alan,

Do you maybe know if there’s a way to hide the discount in the confirmation mail that is sent to the customer? It kind of looks odd, and sometimes confuses the customer. And thanks for the workaround, it really helped me!

1 Like

Any new updates on how to hide the discount in the mail of webflow? :sweat_smile:

I did the workaround, but I REALLY NEED a sollution to the change of the fields in the email received by the customers, cause it confuses potential Clients of the business …

Hi Alan! I write you an Email. I’m having issues with this implementation

Hi Alan! I followed your instructions to a T but the checkout button doesnt seemt o work as a payment method is required. Is there a solution for this?

Have anyone sorted out how to hide the discount in the confirmation mail to the customer?

Hello Alan,

Using simmilar code that clicks on apply button to apply discount code, is it possible to make code that will click on button that confirms the order?

For exaple I want to make custom button with text “Compleate the order” and I have a check box with text "Pay upon delivery.

When user clicks my custom button, button will run the script that will check is checkbox set to true or false.

If it’s false, that means that customer will use the card and it will be default webflow action.

Otherwise, I want my script to ignore the order and send all info to my client by email.

I am sorry for my bad english. I hope you understand what I am saying.