When integrating a secure and efficient payment gateway into your web application, Paystack is a popular choice for developers working in Africa. We’ve written a guide will walk you through integrating Paystack using AJAX and PHP, enabling seamless payment processing and real-time feedback for your users.
Step 1: Set Up a Paystack Account
To get started with Paystack payment integration with AJAX and PHP, you need an account. Follow these steps:
- Go to Paystack’s website and create an account.
- Verify your account and complete the required setup process.
- Navigate to the Settings > API Keys & Webhooks section to access your public and secret keys. You will use these keys for integration.
Step 2: Create a Payment Page
You’ll need a frontend form where users can initiate payments. Here’s a basic HTML form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paystack Integration</title>
<script src="https://js.paystack.co/v1/inline.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>Paystack Payment Integration</h2>
<form id="paymentForm">
<label for="email">Email:</label>
<input type="email" id="email" required><br><br>
<label for="amount">Amount (in Naira):</label>
<input type="number" id="amount" required><br><br>
<button type="button" onclick="payWithPaystack()">Pay Now</button>
</form>
<script>
function payWithPaystack() {
const email = document.getElementById('email').value;
const amount = document.getElementById('amount').value * 100; // Convert to kobo
const handler = PaystackPop.setup({
key: 'your-public-key-here', // Replace with your Paystack public key
email: email,
amount: amount,
currency: 'NGN',
callback: function (response) {
// Payment was successful
verifyPayment(response.reference);
},
onClose: function () {
alert('Transaction was not completed, window closed.');
}
});
handler.openIframe();
}
function verifyPayment(reference) {
$.ajax({
url: 'verify-payment.php',
method: 'POST',
data: { reference: reference },
success: function (response) {
const result = JSON.parse(response);
if (result.status) {
alert('Payment successful!');
} else {
alert('Payment verification failed: ' + result.message);
}
},
error: function () {
alert('An error occurred during payment verification.');
}
});
}
</script>
</body>
</html>
Step 3: Backend Payment Verification with PHP
The callback in the above script sends the payment reference to a PHP backend script for verification. Below is the verify-payment.php script:
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$reference = $_POST['reference']; // Get the transaction reference
if (!$reference) {
echo json_encode(['status' => false, 'message' => 'No reference supplied']);
exit;
}
$url = 'https://api.paystack.co/transaction/verify/' . $reference;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
'Authorization: Bearer your-secret-key-here' // Replace with your Paystack secret key
]);
$response = curl_exec($ch);
curl_close($ch);
$result = json_decode($response, true);
if ($result['status'] && $result['data']['status'] === 'success') {
// Payment was successful
echo json_encode([
'status' => true,
'message' => 'Payment verified successfully',
'reference' => $reference
]);
} else {
// Payment verification failed
echo json_encode([
'status' => false,
'message' => 'Payment verification failed',
'reference' => $reference
]);
}
}
?>
Step 4: Testing Your Integration
- Use the test keys provided by Paystack to test your integration.
- Navigate to the Paystack documentation and use the test card details for simulated payments.
- Ensure that your verification script handles errors appropriately.
- Once testing is complete, replace the test keys with live keys.
See also FlutterWave Payment Integration With PHP
See also Remita Payment Integration
Best Practices
- Secure Your Keys:
- Never expose your secret key on the frontend.
- Use environment variables to store your keys securely.
- Validate Inputs:
- Ensure that the email and amount fields are properly validated before initiating payments.
- Handle Errors Gracefully:
- Inform users if something goes wrong during payment or verification.
- Provide clear steps for retrying the payment.
- Logging:
- Log all payment references and verification responses for auditing purposes.
Conclusion
Paystack payment integration with AJAX and PHP can provide a seamless payment experience for your users. By following this guide, you’ve set up a secure and efficient payment flow with real-time feedback. Remember to test your implementation thoroughly and follow best practices to ensure a smooth experience for your users.
Author
