How to get started with KalletPay Click here  

Header background

Website Payment Form Integration Sample

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.
KalletPay Support Team

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

  1. 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, and callback_url with your specific details.

  2. Paste into Your Website: Insert the copied HTML code into the appropriate section of your website where you want the payment form to appear.

  3. 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 and public_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.

We uses cookies to ensure you get the best experience on our website.