Liquid error: Value cannot be null.
Parameter name: keyLiquid error: Value cannot be null.
Parameter name: key
<div id="exampleModalCenter" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"
    class="modal fade bd-example-modal-lg paypal-modal">
    <div id="loaderDiv" role="document" class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 id="exampleModalLongTitle" class="modal-title">Invoice Payment With PayPal</h5>
                <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span
                        aria-hidden="true">×</span></button>
            </div>
            <div class="modal-body">
                <div id="smart-button-container" class="paypal-container" style="display: none;">
                    <div class="d-flex">
                        <div class="col">
                            <div id="invoiceidDiv"><label for="invoiceid">Invoice Id </label><input name="invoiceid"
                                    maxlength="127" class="form-control" type="text" id="invoiceid" readonly="" /></div>
                            <p id="invoiceidError" class="error-message">Please enter an Invoice ID.</p>
                        </div>
                        <div class="col">
                            <div>
                                <label for="amount">Total Amount<span>(CAD)</span> </label>
                                <input name="amountInput" class="form-control" type="number" id="amount" readonly="" />
                            </div>
                            <p id="priceLabelError" class="error-message">Please enter a price.</p>
                        </div>
                    </div>
                    <div class="d-flex">
                        <div class="col">
                            <label for="description">Description </label>
                            <textarea type="text" name="descriptionInput" id="description" maxlength="127" rows="2"
                                class="form-control">BAO Invoice</textarea>
                            <p id="descriptionError" class="error-message">Please enter a description.</p>
                        </div>
                    </div>
                    <div id="paypal-button-container" style="text-align: center; margin-top: 0.625rem;"></div>
                </div>
            </div>
            <div class="modal-footer payment-footer">
                <div class="loader-container">
                    <div class="loader lds-ring">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                    <small>Processing transaction. Please wait..</small>
                </div>
                <button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade paypal-modal" id="successModal" tabindex="-1" aria-labelledby="successModalLabel"
    aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="successModalLabel">Transaction Completed</h5>
            </div>
            <div class="modal-body text-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="green" class="bi bi-check-circle"
                    viewBox="0 0 16 16">
                    <path
                        d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.03 5.97a.75.75 0 0 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.91 8.56a.75.75 0 0 1 1.06-1.06l1.18 1.18 3.18-3.18z" />
                </svg>
                <p class="mt-3" id="modalSuccessMsg">


                    Your transaction has been completed successfully. Thank you for completing your renewal
                    process.


                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="goBack();">Go
                    Back</button>
            </div>
        </div>
    </div>
</div>


<script>
    $(document).on("click", '.reInitPaypal', function () {
        $("#paypalError").remove();
        initPayPalButton();
    });
    let script = document.createElement('script');
    script.src = "https://www.paypal.com/sdk/js?client-id=AaTdau3wqXp56h_CzGinQM1lTNRO67kZ2fiuuDS6g4IlZvBavRJE5MZ_eiP6xl5xj3n3VMWG99ALtbcg&currency=CAD"
    document.head.append(script);
    script.onload = function () {
        initPayPalButton();
    };
    function payWithPaypal() {
        console.log('Calling payment with PayPal.');
        $('#smart-button-container').show();
        var totalAmount = '';
        var invoiceNumber = '';
        console.log('Total Amount' + totalAmount + 'Invoice Number' + invoiceNumber);
        if (invoiceNumber != null && invoiceNumber != "") {
            $('#invoiceid').val(invoiceNumber);
        }
        if (totalAmount != null && totalAmount != "") {
            var parseAmount = Number(totalAmount.replace(/[^0-9\.]+/g, ""));
            $('#amount').val(parseAmount);
        }
    }
    function initPayPalButton() {
        $("#payWithPayPallButton").prop("disabled", false);
        $('#successMessageDialog').hide();
        var paypalButtonContainer = document.querySelector('#paypal-button-container');
        var description = document.querySelector('#smart-button-container #description');
        var amount = document.querySelector('#smart-button-container #amount');
        var descriptionError = document.querySelector('#smart-button-container #descriptionError');
        var priceError = document.querySelector('#smart-button-container #priceLabelError');
        var invoiceid = document.querySelector('#smart-button-container #invoiceid');
        var invoiceidError = document.querySelector('#smart-button-container #invoiceidError');
        var invoiceidDiv = document.querySelector('#smart-button-container #invoiceidDiv');
        document.getElementById("amount").readOnly = true;
        document.getElementById("invoiceid").readOnly = true;
        var elArr = [description, amount];
        var purchase_units = [];
        purchase_units[0] = {};
        purchase_units[0].amount = {};

        function validate(event) {
            return event.value.length > 0;
        }

        paypal.Buttons({
            style: {
                color: 'gold',
                shape: 'rect',
                label: 'paypal',
                layout: 'vertical',

            },

            onInit: function (data, actions) {
                actions.enable();

                if (invoiceidDiv.style.display === "block") {
                    elArr.push(invoiceid);
                }

                elArr.forEach(function (item) {
                    item.addEventListener('keyup', function (event) {
                        var result = elArr.every(validate);
                        if (result) {
                            actions.enable();
                        } else {
                            actions.disable();
                        }
                    });
                });
            },

            onClick: function () {
                if (description.value.length < 1) {
                    descriptionError.style.display = "block";
                } else {
                    descriptionError.style.display = "none";
                }

                if (amount.value.length < 1) {
                    priceError.style.display = "block";
                } else {
                    priceError.style.display = "none";
                }

                if (invoiceid.value.length < 1) {
                    invoiceidError.style.display = "block";
                } else {
                    invoiceidError.style.display = "none";
                }

                purchase_units[0].description = description.value;
                purchase_units[0].amount.value = amount.value;

                if (invoiceid.value !== '') {
                    if ('' != '' && '' != null) {
                        purchase_units[0].invoice_id = invoiceid.value  + "_" + Date.now() + "_" + "";
                    } else {
                        purchase_units[0].invoice_id = invoiceid.value + "_" + Date.now();
                    }
                }
            },

            createOrder: function (data, actions) {
                return actions.order.create({
                    purchase_units: purchase_units,
                });
            },

            onApprove: function (data, actions) {
                $("#loaderDiv").addClass("show-loader");
                paypalButtonContainer.style.display = "none";
                return actions.order.capture().then(function (orderData) {
                    var transactionId = "";
                    var response = "";
                    if (orderData.id != null && orderData.id != "") {
                        transactionId = orderData.id;
                        response = JSON.stringify(orderData);
                    }
                    showResponseMessage(paypalButtonContainer, '<h5>Thank you for your payment!</h5>');
                    console.log("Payment done successfully!");
                    //  var res = updateInvoiceStatusinCRM(transactionId, response, true);
                    $("#modalSuccessMsg").text(SuccessMsg);
                    setTimeout(() => {
                        $("#loaderDiv").addClass("hide-loader");
                        $("#exampleModalCenter").hide();
                        $("#successModal").modal("show");
                    }, 20000);

                });
            },

            onError: function (err) {
                $("#loaderDiv").removeClass("show-loader");
                $("#loaderDiv").addClass("hide-loader");
                console.log('Error from Paypal: ' + err);
                $("#paypalError").remove();
                showResponseMessage(paypalButtonContainer, '<h5 id="paypalError">Error occured while processing transaction. <button id="reInitPaypal" class="reInitPaypal btn btn-primary">Please try again.</button></h5>');
                console.log("Error while doing payment");
                updateInvoiceStatusinCRM("", err, false);
                console.log(err);
            }
        }).render('#paypal-button-container');
    }
    function showResponseMessage(paypalButtonContainer, message) {
        paypalButtonContainer.style.display = "block";
        paypalButtonContainer.innerHTML = '';
        paypalButtonContainer.innerHTML = message;
    }
    function updateInvoiceStatusinCRM(transactionId, reponse, isSuccess) {
        try {
            var invoiceNumber = '';
            var paidByUser = new String('');
            console.log('Invoice Number is Retrieved as' + invoiceNumber);
            let req = new XMLHttpRequest();
            req.open("GET", "https://baoazurefunctions-prod.azurewebsites.net/api/UpdateInvoiceStatus?invoiceId=" + invoiceNumber + "&response=" + reponse + "&transactionId=" + transactionId + "&isSuccess=" + isSuccess + "&paidByUser=" + paidByUser, false);
            req.setRequestHeader("OData-MaxVersion", "4.0");
            req.setRequestHeader("OData-Version", "4.0");
            req.setRequestHeader("Accept", "application/json");
            req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
            req.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
            req.send();
            if (req.readyState === 4) {
                req.onreadystatechange = null;
                if (req.status === 200) {
                    var result = JSON.parse(req.response);
                    data = result;
                    return true;
                }
                else {
                    console.log(req.statusText);
                    return false;
                }
            }
        } catch (ex) {
            console.log("Exception occured" + ex);
            return false;
        }
    }
</script>