User-1994446809 posted
Thank you samwu,
samwu
Is there any error message? Please show me your javascript code.
On my home web form there is a label that displays user ID as shown below:
Home.aspx
<asp:Label ID="user" runat="server" Font-Size="Medium" Text="" ForeColor="White"></asp:Label>
And a button:
Home.aspx
<script src="https://js.paystack.co/v1/inline.js"></script>
<button type="button" id="paybutton" runat="server" class="btn btn-primary navbar-btn" onclick="payWithPaystack()">Deposit</button>
When the deposit button is clicked, it redirects to the payment page where payment data is required before loading the payment gateway javascript portal for payment. The code is shown below
(It is a Paystack payment gateway):
PaymentPage.aspx
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Payment</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<form id="paymentForm" runat="server">
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<script src="https://js.paystack.co/v1/inline.js"></script>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email-address" required />
<br />
</div>
<div class="form-group">
<label for="amount">Amount</label>
<input type="tel" id="amount" required />
<br />
</div>
<div class="form-group">
<label for="first-name">First Name</label>
<input type="text" id="first-name" />
<br />
</div>
<div class="form-group">
<label for="last-name">Last Name</label>
<input type="text" id="last-name" />
<br />
</div>
<div class="form-submit">
<button type="submit">Pay </button>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</form>
<script>
var paymentForm = document.getElementById('paymentForm');
paymentForm.addEventListener("submit", payWithPaystack, false);
function payWithPaystack() {
var handler = PaystackPop.setup({
key: 'pk_live_8971529205020dd307b6f5f4cec944c62712066d', // Replace with your public key
email: document.getElementById("email-address").value,
amount: document.getElementById("amount").value * 100,
firstname: document.getElementById("first-name").value,
lastname: document.getElementById("first-name").value,
ref: '' + Math.floor((Math.random() * 1000000000) + 1), // generates a pseudo-unique reference. Please replace with a reference you generated. Or remove the line entirely so our API will generate one for you
// label: "Optional string that replaces customer email"
onClose: function () {
alert('Window closed.');
},
callback: function (response) {
var message = 'Payment complete! Reference: ' + response.reference;
alert(message);
}
});
handler.openIframe();
}
</script>
</body>
</html>
From the above codes, when the “deposit” button on the home web form is clicked, it redirects to the payment page, then the user ID is expected to be passed from the home web form (“user ID label”) into the <input> tag highlighted
in the yellow area. The issue is that if I change the id of the input tag to “user” in order to pass the information; it passes the information, but the payment portal
(in javascript) will not load because the IDs don't match. But when the <input> tag have the same ID as the “email ID” on the javascript (as shown in the red highlighted area), it loads. This means that on the <input >tag,
the email information which is the user’s ID will be inputted manually. But I would prefer to pass user ID into the input tag in order to help user’s not to mistakenly input another email address.
