<!DOCTYPE html>
<html>
<head>
<title>Sample Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333333;
text-align: center;
}
form {
max-width: 400px;
margin: 20px auto;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #dddddd;
border-radius: 3px;
}
select {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #dddddd;
border-radius: 3px;
}
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #4caf50;
color: #ffffff;
border: none;
border-radius: 3px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h1>Sample Webpage</h1>
<form action="process_form.php" method="POST" id="myForm">
<label for="merchant_key">Merchant Key:</label>
<input type="text" id="merchant_key" name="merchant_key" required>
<label for="connection_mode">Connection Mode:</label>
<select id="connection_mode" name="connection_mode">
<option value="Live">Live</option>
<option value="Test">Test</option>
</select>
<label for="checkout_amount">Amount:</label>
<input type="number" id="checkout_amount" name="checkout_amount" required>
<label for="currency_code">Currency Code:</label>
<select id="currency_code" name="currency_code">
<option value="NGN">NGN</option>
<option value="USD">USD</option>
</select>
<label for="email_address">Email:</label>
<input type="email" id="email_address" name="email_address" required>
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name" required>
<label for="last_name">Last Name:</label>
<input type="text" id="last_name" name="last_name" required>
<label for="phone_number">Phone:</label>
<input type="tel" id="phone_number" name="phone" required>
<label for="transaction_reference">Reference:</label>
<input type="text" id="transaction_reference" name="transaction_reference" required>
<!-- These are to be sent in the addition_details in json format. They are specific to your use case if you have any extra parameter you want to see on your dashboard -->
<!-- This is an example for an Airline -->
<label for="pnr">PNR:</label>
<input type="text" id="pnr" name="Passenger Name Record" required>
<label for="ticket_number">Ticket Number:</label>
<input type="text" id="ticket_number" name="Ticket Number" required>
<label for="redirect_url">Redirect URL:</label>
<input type="text" id="redirect_url" name="redirect_url" required>
<input type="submit" value="Submit">
</form>
<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent form submission
// Get form field values
var merchant_key= document.getElementById("merchant_key").value;
var connection_mode= document.getElementById("connection_mode").value;
var checkout_amount = document.getElementById("checkout_amount").value;
var currency_code = document.getElementById("currency_code").value;
var email_address = document.getElementById("email_address").value;
var first_name = document.getElementById("first_name").value;
var last_name = document.getElementById("last_name").value;
var phone_number = document.getElementById("phone_number").value;
var transaction_reference = document.getElementById("transaction_reference").value;
// Note that these are to be passed as optional parameters
var pnr = document.getElementById("pnr").value;
var ticket_number = document.getElementById("ticket_number").value;
// compose the additional details as a JSON object
var additional_details = JSON.stringify({
"pnr": pnr,
"ticket_number" : ticket_number
});
var redirect_url = document.getElementById("redirect_url").value;
// Build URL with form field values
var url = "https://payment.payaza.africa?merchant_key=" + encodeURIComponent(merchant_key) +
"&connection_mode=" + encodeURIComponent(connection_mode) +
"&checkout_amount=" + encodeURIComponent(checkout_amount) +
"¤cy_code=" + encodeURIComponent(currency_code) +
"&email_address=" + encodeURIComponent(email_address) +
"&first_name=" + encodeURIComponent(first_name) +
"&last_name=" + encodeURIComponent(last_name) +
"&phone_number=" + encodeURIComponent(phone_number) +
"&transaction_reference=" + encodeURIComponent(transaction_reference) +
"&additional_details=" + encodeURIComponent(additional_details) + // Encoded JSON; Note that this is optional
"&redirect_url=" + encodeURIComponent(redirect_url);
const a = document.createElement('a')
a.href = url
a.click()
});
</script>
</div>
</body>
</html>
