Automatically Select Shipping and Payment Method at Checkout

During the checkout flow customers are asked to select a shipping and payment method. In certain workflows, there is only one shipping and/or one payment option. In those situations it is advantageous to automatically select these options, as there is only one, and provide a faster checkout experience.

Step 1: Navigate to Theme and then click the gear icon at the top right of the screen > Manage Theme Assets

Step 2: Click Add New Asset > File Asset > Create A File

Step 3:Type = JavaScript and Label = Auto-select Shipping or Payment. Save Assets.

Step 4: ClickEdit JavaScript and insert the following script:

JavaScript to select Shipping Method and Payment Method:

if (window.location.href.toLowerCase().indexOf("checkout/onepage") >= 0) {
    jQuery(function() {

        // Shipping step logic
        var shipmentMethodButtonInterval = setInterval(function(){ 
            if(jQuery('#checkout-step-shipping_method').is(':visible')){
                console.log('Shipping method loaded!!');
                clearInterval(shipmentMethodButtonInterval);
                setTimeout(function(){
                    jQuery("#shipping-method-buttons-container > button").trigger("click");
                }, 1);
            }
        }, 100);

        // Hook into native XMLHttpRequest to detect saveShippingMethod
        (function(open) {
            XMLHttpRequest.prototype.open = function(method, url) {
                this._url = url; // Track the URL
                return open.apply(this, arguments);
            };
            XMLHttpRequest.prototype.send = (function(send) {
                return function() {
                    this.addEventListener('load', function() {
                        if (this._url && this._url.indexOf('saveShippingMethod') !== -1) {
                            console.log('saveShippingMethod XHR complete, starting payment step check...');
                            //comment this out if you are not hiding the payment step
                            startPaymentStep();
                        }
                    });
                    return send.apply(this, arguments);
                };
            })(XMLHttpRequest.prototype.send);
          
          // Comment out this function to not skip payment method
          function startPaymentStep() {
            var paymentMethodButtonInterval = setInterval(function(){ 
                if(jQuery('#checkout-step-payment').is(':visible') && jQuery("#payment-buttons-container > button").length){
                    console.log('Payment method loaded and button ready!!');
                    clearInterval(paymentMethodButtonInterval);
                    setTimeout(function(){
                        jQuery("#payment-buttons-container > button").trigger("click");
                    }, 1);
                }
            }, 100);
        }
          
        })(XMLHttpRequest.prototype.open);
    });
  
}