Streaming live at 10am (PST)

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.

IMPORTANT:
- Input “CASHONDELIVERY” in the “Discount code*” field. (Do not input the quotes " " )
image

  • 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
image

3.1. Add the “Discounts” element (It doesn’t matter where you put it, we’ll be hiding it anyways)
image

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)
image

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!

3 Likes

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: hello@foxy.io

Thanks,
Josh

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.