Website Payment Form Integration Sample
Written by KalletPay Support Team
Last updated
Integrate the KalletPay Payment Form on your website, allowing you to receive payments seamlessly from your customers. With just a few easy steps, you can start accepting payments in multiple currencies, including NGN, USD, GBP, MYR, and EURO.
Why Integrate KalletPay Payment Form?
Easy Integration: Just copy and paste the provided HTML form code into your website.
Multiple Currencies: Accept payments in various currencies.
Secure Transactions: All transactions are processed securely through KalletPay.
How to Integrate KalletPay Payment Form
Copy the HTML Code: Use the form template provided below. Update the necessary fields such as
amount
,email
,first_name
,last_name
,reference_code
,currency
, andcallback_url
with your specific details.Paste into Your Website: Insert the copied HTML code into the appropriate section of your website where you want the payment form to appear.
Customize as Needed: Adjust any additional parameters or styling to match your website’s design and needs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment Form</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f4f4;
margin: 20px; /* Added more padding */
padding: 20px; /* Added more padding */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
form {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
box-sizing: border-box;
}
h2 {
margin-top: 0;
text-align: center;
color: #333;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
color: #333;
font-weight: bold;
}
input,
select {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
transition: border-color 0.3s;
}
input:focus,
select:focus {
border-color: #007bff;
}
input[type="submit"] {
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
padding: 12px;
font-size: 16px;
border-radius: 4px;
transition: background-color 0.3s;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
</style>
</head>
<body>
<form method="POST" action="https://paywith.kalletpay.com/api/payment/merchant/create">
<h2>Payment Form</h2>
<label for="currency">Currency:</label>
<select name="currency" id="currency" required>
<option value="USD">USD</option>
<option value="NGN">NGN</option>
<option value="MYR">MYR</option>
<!-- Add more currency options as needed -->
</select>
<label for="amount">Amount:</label>
<input type="number" name="amount" id="amount" required />
<label for="quantity">Quantity:</label>
<input type="number" name="quantity" id="quantity" required />
<label for="first_name">First Name:</label>
<input type="text" name="first_name" id="first_name" required />
<label for="last_name">Last Name:</label>
<input type="text" name="last_name" id="last_name" required />
<label for="email">Email:</label>
<input type="email" name="email" id="email" required />
<input type="hidden" name="token" value="YOUR_MERCHANT_KEY_HERE" />
<input type="hidden" name="public_key" value="PK_LIVE_ANrS3tiemcJbSen5IdRG9e4acZjVV2G" />
<input type="hidden" name="callback_url" value="https://your_website.com/" />
<input type="hidden" name="reference_code" id="reference_code" />
<input type="hidden" name="title" value="Payment For Products" />
<input type="hidden" name="description" value="The description of entire payments" />
<input type="submit" value="Submit" onclick="document.getElementById('reference_code').value = generateReferenceCode();" />
</form>
<script>
// Function to generate a short reference code using JavaScript
function generateReferenceCode() {
return 'ref_' + Date.now().toString(36) + Math.random().toString(36).substr(2, 5);
}
</script>
</body>
</html>
Key Fields to Update
amount
: The amount to be charged.email
: The customer's email address.first_name
: The customer's first name.last_name
: The customer's last name.reference_code
: A unique reference code for each transaction.currency
: The currency in which the payment will be made (e.g., NGN, USD, GBP, MYR, EURO).callback_url
: The URL to which the customer will be redirected after a successful payment.
Tips for Smooth Integration
Test the Form: Before going live, test the form with different scenarios to ensure everything works as expected.
Secure Your Token: Keep your
MERCHANT_KEY
andpublic_key
secure and do not share them publicly.Monitor Transactions: Regularly check your KalletPay dashboard for transaction updates and manage payments efficiently.
API Integration for Developers
For a more comprehensive integration, your developers can access our detailed API Integration document. This guide provides extensive information on how to utilize KalletPay's API for broader payment functionalities.
Access via Dashboard: Navigate to the Website Payin section on your KalletPay dashboard to find the API documentation.
Visit Directly: You can also visit KalletPay API Documentation for detailed instructions.
We are committed to providing you with the best tools to enhance your business operations. Should you have any questions or need further assistance, please do not hesitate to contact our support team.