JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" name="amount"></input>
<input type="text" name="country"></input>
<input type="text" name="city"></input>
<input type="button" id="payButtonId"></input>

JavaScript

$(document).ready(function () {
	AMOUNT = document.getElementById('amount').value;
	HPP_SHIPPING_COUNTRY = document.getElementById('country').value;
	HPP_BILLING_CITY = document.getElementById('city').value;

	amount = {
		AMOUNT: AMOUNT,
		HPP_SHIPPING_COUNTRY: HPP_SHIPPING_COUNTRY,
		HPP_BILLING_CITY: HPP_BILLING_CITY,
	};
	
	$.getJSON("requestUrl.php", amount, function (jsonFromRequestEndpoint) {
		//console.log("jsonFromRequestEndpoint:" + jsonFromRequestEndpoint);
		RealexHpp.setHppUrl("https://pay.realexpayments.com/pay");
		RealexHpp.lightbox.init("payButtonId", "responseUrl.php", jsonFromRequestEndpoint);
	});
});