Need help with stripe 'amount' code with user input query

Hi i am using the code below. However, after my last query inserts the data into my user input, my payment code is reading “0” instead of the price populated in the user input. If i enter the number manually into the user input the payment code sees the correct amount and charges the card accordingly. I need this user input to be read only and the payment code needs to see and charge the card according to the query result. is there something I can add to the query to make the data in the user input visible to the payment code? OR a way to Insert the data into the user input so it thinks it was manually typed in?

Here is what I have

import wixData from ‘wix-data’;
import wixWindow from “wix-window”;

$w.onReady( function () {

uniqueDropDown1(); 

});

function uniqueDropDown1() {
wixData.query(“testingsinglereport”)
.limit(1000)
.ascending(“country”)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#country”).options = buildOptions(uniqueTitles);
});

function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.country);
return [… new Set(titlesOnly)];
}

function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}

export function country_change_1(event) {
uniqueDropDown2();
$w(“#delivery”).enable();
$w(“#delivery”).placeholder = “Select Delivery Speed”;
}

function uniqueDropDown2() {
wixData.query(“testingsinglereport”)
.contains(“country”, $w(“#country”).value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(“#delivery”).options = buildOptions(uniqueTitles);
});

function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.spreed);
return [… new Set(titlesOnly)];
}

function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}

export function delivery_change(event) {
changeState();

// Runs a query on the “testingsinglereport” collection
wixData.query(‘testingsinglereport’)
// Query the collection for any items whose “spreed” field contains
// the value the user selected in the dropdown
.contains(‘spreed’, $w(‘#delivery’).value)
.contains(‘country’, $w(‘#country’).value)
.find() // Run the query
.then((result) => {
const item = result.items[0];
$w(‘#input21’).value = item.price;
let isVisible = $w(“#input21”).isVisible; // true

 }); 

}

import {createToken, encodeCard} from “public/stripeAPI.js”;
import {charge} from ‘backend/stripeProxy’;
var payment;
export function payNow(event) {
var accepted = false ;

wixWindow.openLightbox('Payment Processing'); 
createToken(encodeCard(createCard())) 
    .then((token) => { 
        charge(token, payment) 
            .then((chargeResponse) => { 
                console.log("Charge ID: " + chargeResponse.id); 

if (chargeResponse.id !== undefined) {
wixWindow.openLightbox(‘Payment Success’);
accepted = true ;
var item = {
“payment”: chargeResponse.id,
“amountPaid”: $w(‘#delivery’).value
}
wixData.insert(“NewSingleReportOrders”, item)
}
});
});
setTimeout( function () {
if (!accepted) {
wixWindow.openLightbox(‘Payment Denied’);
}
}, 3400);
}

function createCard() {
return {
“name”: $w(“#cardholderName”).value,
“number”: $w(“#cardNumber”).value,
“cvc”: $w(“#cvc”).value,
“exp_year”: $w(“#year”).value,
“exp_month”: $w(“#month”).value
};
}

function changeState() {
payment = {
“amount”: ($w(“#input21”).value * 100),
“currency”: “USD”,
“description”: $w(“#delivery”).value
}
}

export function input20_change(event) {
changeState()}

export function payNow_click(event) {
payNow();
}

export function input21_change(event) {
changeState()
}