Support zero-cost orders

You can enable your Commerce sites to handle orders whose price is zero.

This section applies to Storefront Classic only.

On some Commerce sites, it is possible for the total cost of an order to be zero. For example, the customer may have a coupon for a free item, or the site may offer free samples, such as color swatches on a fabric site or a chapter of an electronic book on a bookstore site.

To support these situations, Commerce makes it possible for a shopper to bypass providing payment information when placing a zero-cost order. By default, if the total cost of an order is zero, the shopper does not need to provide payment information to place the order. This behavior is controlled by the isPaymentsDisabled function in the OrderViewModel:

OrderViewModel.prototype.isPaymentsDisabled = function(){
    var self = this;
    var disableRules = self.cart().total() == 0;
    if(disableRules){
       $.Topic(pubsub.topicNames.PAYMENTS_DISABLED).publish();
    }
    return disableRules;
}

As you can see in the code above, if the total cost of the shopping cart is zero, the function's disableRules variable is set to true, and a message is published to the PAYMENTS_DISABLED topic. Payment widgets can subscribe to this topic and disable payment inputs when a message is published to it.

If you want to require shoppers to provide payment information even when the order cost is zero, your payment widgets can ignore the PAYMENTS_DISABLED topic, so that payment inputs are not disabled. Requiring payment information is desirable for situations that involve recurring billing. If you capture an order that has no upfront charges, you will still need to collect payment information and include it with the order. This way a token will be returned, saved with the order, and passed to the fulfillment system using the Order Submit webhook.

Note that gift card and credit card payment widgets have a triggerValidations flag that determines whether to validate the required payment information, such as the card number and CVV. You can change the setting of this flag depending on the behavior your sites require.

See Understand widgets for information about extending widgets and view models.