ELEMENTS I USED

1. Dropdown

2. Text input

3. Slider

4. Multiple Checkbox Group

5. Selection Tags

6. Texts

7. buttons

Each of these elements have their purposes, and I intentionally used to show you how possible it is to make use of them for a quote calculator.

Calculators can be simpler or complex.

With this tutorial, there is absolutely no need to pay for an external service since is completely free.

---

import { createMyPayment } from 'backend/payment';
import wixPay from 'wix-pay';

$w.onReady(function () {

    let quoteSummary_Arr = [];
    let web_price_Arr = [];

    let pages_Num_Arr = [];
    pages_Num_Arr[0] = 1;

    quoteSummary_Arr[0] = "🕛 Regular Deliver";

    let price;

    //DROPDOWN CALCULATION
    $w("#websiteTypeDropdown").onChange(() => {

        let webTypeDrop = $w("#websiteTypeDropdown").value;

        if (webTypeDrop === "1000") {
            quoteSummary_Arr[1] = "🍪 Standard Website";
            web_price_Arr[0] = 1000;
            calculator();
        } else if (webTypeDrop === "1500") {
            quoteSummary_Arr[1] = "🛒 E-commerce Website";
            web_price_Arr[0] = 1500;
            calculator();
        } else if (webTypeDrop === "5000") {
            quoteSummary_Arr[1] = "🎯 Advance Website";
            web_price_Arr[0] = 5000;
            calculator();
        } else {
            quoteSummary_Arr.splice(1, 1);
            web_price_Arr.splice(0, 1)
        }

    });

    //TEXT INPUT CALCULATION
    $w("#numberPages").onInput(() => {

        calculator();

        pages_Num_Arr[0] = $w("#numberPages").value;

        if ($w("#numberPages").value.length > 0) {
            quoteSummary_Arr[2] = `🧾 ${pages_Num_Arr[0]} page(s)`;
            calculator();
        } else {
            quoteSummary_Arr.splice(2, 1);
            calculator();
        }

    });

    //RANGESLIDER🎚️
    $w("#budgetSlider").onChange(() => {

        let budget_Value = String($w("#budgetSlider").value.toLocaleString('en-US'));

        quoteSummary_Arr[3] = `💰 Budget: $${(budget_Value)}`;
        calculator();

    });

    //ADDONS & FEATURES 🎉
    $w("#featuresCheckboxGroup").onChange((event) => {

        let selected_Addon = Number($w("#featuresCheckboxGroup").selectedIndices);
        let new_Add_Arr = $w("#featuresCheckboxGroup").value;

        console.log(new_Add_Arr)
calculator();

        //REPLACE THE VALUE WITH STRINGS
        for (selected_Addon = 0; selected_Addon < new_Add_Arr.length; selected_Addon++) {
            if (new_Add_Arr[selected_Addon] === "50") {
                new_Add_Arr.splice(selected_Addon, 1, "Live Chat")

            } else if (new_Add_Arr[selected_Addon] === "80") {
                new_Add_Arr.splice(selected_Addon, 1, "Website Search")

            } else if (new_Add_Arr[selected_Addon] === "45") {
                new_Add_Arr.splice(selected_Addon, 1, "Automated Email")

            }

            quoteSummary_Arr[4] = `⚙️ Addons: ${new_Add_Arr.toString()}`;
            calculator();
        }

    });

    //DELIVERY TIME AND SELECT ONE TAG AT A TIME🎉✨
    $w('#deliveryTimeSelectionTags').onChange((event) => {
        const selectedTag = $w('#deliveryTimeSelectionTags').value;
        let selectedIndex = Number($w('#deliveryTimeSelectionTags').selectedIndices);

calculator();

        for (var i = 0; i < selectedTag.length - 1; i++) {
            if (selectedTag.length > 1) {
                selectedTag.shift();

            }
        }

        setTimeout(() => {
            $w('#deliveryTimeSelectionTags').value = [];
            $w('#deliveryTimeSelectionTags').value = selectedTag;

            //REPLACE THE VALUE WITH STRINGS
            for (selectedIndex = 0; selectedIndex < selectedTag.length; selectedIndex++) {
                if (selectedTag[selectedIndex] === "0") {
                    selectedTag.splice(selectedIndex, 1, "Regular Delivery")

                } else if (selectedTag[selectedIndex] === "50") {
                    selectedTag.splice(selectedIndex, 1, "1 Week")

                } else if (selectedTag[selectedIndex] === "100") {
                    selectedTag.splice(selectedIndex, 1, "2 Days")

                } else if (selectedTag[selectedIndex] === "150") {
                    selectedTag.splice(selectedIndex, 1, "24 Hours")

                }

                quoteSummary_Arr[0] = `🕛 ${selectedTag.toString()}`;

            }

            calculator();
        }, 1)

    });

    //GENERAL CALCULATOR FUNCTION📌
    const calculator = function () {

        //CALCULATOR🧮
        price = Number(web_price_Arr.reduce((a, b) => a + b, 0)) + (Number(pages_Num_Arr[0]) * 20) +
            $w("#featuresCheckboxGroup").value.map(Number).reduce((a, b) => a + b, 0) + $w('#deliveryTimeSelectionTags').value.map(Number).reduce((a, b) => a + b, 0);

        $w("#totalPriceText").text = `$${Number(price).toLocaleString('en-US')}`;
        $w("#paymentButton").label = `Pay $${Number(price).toLocaleString('en-US')}`;

        //SUMMARY TEXTS📖
        $w("#quoteSummaryText").text = quoteSummary_Arr.join(" ");

    }

    //VALIDATE ALL FORMS AND ENABLE PAY BUTTON
    $w("#websiteTypeDropdown, #numberPages, #budgetSlider, #featuresCheckboxGroup, #deliveryTimeSelectionTags").onChange(() => {
        validateElements();
    });

    $w("#numberPages").onInput(() => {
        validateElements();
    });

    function validateElements() {
        if ($w("#websiteTypeDropdown").value.length > 0 && $w("#numberPages").value.length > 0 && $w("#budgetSlider").min > 0 &&
            $w("#featuresCheckboxGroup").selectedIndices.length > 0 && $w("#deliveryTimeSelectionTags").selectedIndices.length > 0) {
            $w("#paymentButton").enable();
        } else { $w("#paymentButton").disable(); }
    }

    //RESET CALCULATOR 🤩
    $w("#resetButton").onClick(function () {

        $w('#deliveryTimeSelectionTags').selectedIndices = [0];
        $w("#websiteTypeDropdown").selectedIndex = 0;
        $w("#numberPages").value = "1";
        $w('#featuresCheckboxGroup').selectedIndices = [];
        $w("#budgetSlider").value = 1500;

        $w("#quoteSummaryText").text = "🕛 Regular Delivery";
        $w("#totalPriceText").text = "$0.00";

    });

    //WIX PAY API💳
    $w("#paymentButton").onClick(() => {
        createMyPayment(quoteSummary_Arr.join(" "), price)
            .then((payment) => {
                wixPay.startPayment(payment.id).then((result) => {

                });
            });
    });

});


/* 🅰️🅰️🅰️🅰️🅰️🅰️🅰️🅰️🅰️🅰️🅰️🅰️🅰️🅰️🅰️🅰️
ADD THIS CODE TO YOUR BACKEND.
Backend Code for WIX Pay (payment.jsw) [Backend]
🅰️🅰️🅰️🅰️🅰️🅰️🅰️🅰️🅰️🅰️🅰️🅰️🅰️🅰️🅰️🅰️ */
import wixPay from 'wix-pay-backend';

export function createMyPayment(quoteSummary, quotePrice) {
    let createPaymentParameter = {
        amount: quotePrice,
        items: [{ name: quoteSummary, price: quotePrice }]
    };
    return wixPay.createPayment(createPaymentParameter);
}

Have fun!