Script for Random Products Add to Cart on Shopify Checkout Page

checkout-random-products.css

/*
* Add to Cart module for Checkout
*/

.checkout-add-cart-module {
    padding: 0px;
    background-color: transparent;
    margin-top: 30px;
}
.checkout-add-cart-module > h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

.checkout-add-cart-module .checkout-add-products-list {
   margin: 15px 0;
}

.checkout-add-cart-module .random-product-item {
    padding: 5px 0px;
    display: flex;
    align-items: stretch;
}

.random-product-item .product-detail-col {
    width: 50%;
    padding: 5px 10px;
}

.random-product-item .product-detail-col .prod-title {
    font-weight: 600;
    color: #333;
    font-size: 15px;
    margin-bottom: 5px;
    line-height: 1.4;

}

.random-product-item .product-detail-col .prod-price {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.checkout-add-cart-module .random-product-item .thumb-product-img {
    width: 65px;
    height: 65px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #eee;
}

.checkout-add-cart-module .random-product-item .thumb-product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.product-add-wrapper {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    align-self: center;
    position: relative;
}
.product-add-wrapper a.extra-productadd-btn  {
    color: #fff;
    display: inline-block;
    padding: 5px 20px;
    background-color: #197bbd;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    position: relative;

}

.product-add-wrapper a.extra-productadd-btn:hover {
    background-color: #1c6495;
}

.product-add-wrapper a.extra-productadd-btn.btn--loading .btn-text {
    opacity: 0;
}



@media ( max-width: 640px ) {

    .checkout-add-products-list {
            display: flex;
            overflow-y: auto;
            align-items: flex-start;
    }
  
    .checkout-add-cart-module .random-product-item {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        min-width: 175px;
    }

    .random-product-item .product-detail-col {
        width: 100%;
        text-align: center;
    }
    .product-add-wrapper {
        width: 100%;
        justify-content: center;
    }

    .checkout-add-cart-module .random-product-item .thumb-product-img {
        margin: 0 auto;
    }
  
  .product-add-wrapper {
     align-self: flex-start;
     height: auto;
  }
}

checkout.liquid

<script type="text/javascript">
	
	var addProuct = function( variant_id, qty, btn ) {

	  if ( !qty ) { qty = 1; }

	  var data = {
	    "id": variant_id,
	    "quantity": qty
	  };

	  window.Checkout.jQuery.ajax({
	      type: 'POST',
	      url: '/cart/add.js',
	      data: data,
	      dataType: 'json',

	      success: function() { 
	      	  // As soon as the success response is received we reload the page, 
	      	  // so the user can see the updated cart items on checkout page itself. 
	          $( btn ).removeClass('btn--loading');
	          window.location.reload();
	      }
	  });

	};


	// Function that makes a call to the Product Recommendations API, we pass a random product id and get a list of products, then we choose a random product from that list of products. 
	function _getARandomProduct( productid ) {
	  Checkout.$.getJSON("/recommendations/products.json?product_id="+ productid  +"&limit=5", function( res ) {
	     if ( res.products != null ) {
	            var selectARandom = res.products[ _getRandomInt( 0, ( res.products.length - 1 ) ) ];

	            // We don't get the different sizes of images in the response, so we do a simple string replace to add _small to load a small image and not a full sized one.
	            var smallImage = selectARandom.featured_image.replace('.jpg', '_small.jpg');

	            // This is one individual product card, 
	            var productHtml = `
	            <div class='random-product-item'>
	                <div class='thumb-product-img'>
	                    <img src='${ smallImage }'>
	                </div>
	                <div class='product-detail-col'>
	                    <h4 class='prod-title'><a href='${ selectARandom.url }' target='_blank'>${selectARandom.title}</a></h4>
	                    <div class='prod-price'>Rs.${ (selectARandom.price / 100) }</div>
	                </div>
	                <div class='product-add-wrapper'>
	                    <a href='#' class="extra-productadd-btn" data-variant='${selectARandom.variants[0].id}'>
	                     <span class='btn-text'>Add</span>

	                     <svg class="icon-svg icon-svg--size-18 btn__spinner icon-svg--spinner-button" aria-hidden="true" focusable="false"> <use xlink:href="#spinner-button"></use></svg>
	                    </a>
	                </div>
	            </div>
	            `;

	           // We keep appending each product to the HTML	           
	           Checkout.$('.checkout-add-products-list').append( productHtml );
	     }
	  });
	}

	function _getRandomInt(min, max) {
	    return min + Math.floor(Math.random() * (max - min + 1));
	}


	// This is the entire function that will execute on page load, here we will reference to the functions that we created above.

	(function(){

	  $ = Checkout.jQuery;

	  $( document ).on('page:load page:change', function(){

	    /*
	    * Add more products to cart.
	    */

	    // Here we add this container HTML after the #order-summary div that's there on the page
	    $('#order-summary').after( `
	      <div class="checkout-add-cart-module"> 
	          <h4>Add more products to cart</h4>
	          <div class='checkout-add-products-list'></div>
	      </div>` 
	    );


	    // IMPORTANT:
	    // These are product ids, it should be different for your site. These product ids are what we use to find random related products, so fill these with the products from collections from where you want to show random products. 

	    // To get the product ids go to a product edit page, on the browser address bar you will find the id in the url at the end. 

	    var productIds = [
	       '5514666082459', '5448173977755', '5448178270363', '5448176894107', 
	    ];


	    // We assume there's a div .cart-random-products
	    // 

	    var randomProductsToShow = [];

	    for ( var i = 0; i < 6; i++ ) {
	      var randomProductId = productIds[ _getRandomInt( 0, ( productIds.length - 1 ) ) ];
	      _getARandomProduct( randomProductId );
	    }


	    $('body').on( 'click', '.extra-productadd-btn', function( e ){

	    	// Get the variant id of the product
	        var variant = $( this ).data('variant');

	        // Add a nice loading effect to button while the AJAX call runs
	        $( this ).addClass( 'btn--loading' );

	        // Call the function to add the product using ajax and reload the page on success.
	        addFreeGift( variant, 1, $(this) );

	        // So the button link doesn't do anything strange.
	        e.preventDefault();

	    });

	  });
	}());


</script>

Full tutorial here - https://www.stramaxon.com/2020/10/shopify-random-products-checkout.html