When building a platform that handles payments, integrating a reliable and secure payment gateway is essential. Flutterwave is one such payment gateway that simplifies payments across Africa. In this post, we’ll walk through how to implement a withdrawal form using Flutterwave's API to fetch available banks dynamically.
Prerequisites
Before we begin, ensure you have:
A Flutterwave account.
Your Flutterwave secret key (found in the Flutterwave dashboard under API settings).
Basic knowledge of PHP and HTML.
Objective
We'll be creating a form that allows users to:
Select their bank from a dropdown list dynamically populated via the Flutterwave API.
Enter their account number, full name, and the amount to withdraw.
Submit the form for processing.
Step 1: Set Up Your HTML Form
Here’s the basic structure of the HTML form. We will use PHP to interact with the Flutterwave API and dynamically populate the bank dropdown.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flutterwave Withdraw</title>
</head>
<body>
<div class="row">
<div class="col-12">
<div class="tabcontent active">
<h5 class="text-center le">Withdraw</h5>
<br>
<div class="card-header">
<h6 class="card-title">Add Payment Information</h6>
</div>
<form action="withdraw.php" method="post">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<!-- Bank Name Dropdown -->
<fieldset class="form-group">
<label for="helpInputTop">Select Bank Name</label>
<?php
// Fetching Banks using Flutterwave API
$flutterwaveSecretKey = 'YOUR_FLUTTERWAVE_SECRET_KEY';
$url = "https://api.flutterwave.com/v3/banks/NG";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
"Authorization: Bearer $flutterwaveSecretKey"
]);
$response = curl_exec($ch);
$curl_error = curl_error($ch);
curl_close($ch);
if ($curl_error) {
die("CURL Error: " . $curl_error);
}
$banks = json_decode($response, true);
if (!$banks['status']) {
die("Failed to fetch banks: " . json_encode($banks));
}
echo '<select name="bank_code" class="form-control" id="helpInputTop">';
foreach ($banks['data'] as $bank) {
echo '<option value="' . $bank['code'] . '">' . $bank['name'] . '</option>';
}
echo '</select>';
?>
</fieldset>
<!-- Fullname (Read-only) -->
<fieldset class="form-group">
<label for="basicInput">Fullname</label>
<input type="text" name="fullname" class="form-control" id="basicInput"
placeholder="Enter fullname" value="<?php echo $fullname; ?>" readonly>
</fieldset><br>
<!-- Account Number -->
<fieldset class="form-group">
<label for="helperText">Account Number</label>
<input type="text" name="accountnumber" id="helperText" class="form-control"
placeholder="Enter account number" required="">
</fieldset><br>
</div>
<div class="col-md-6">
<!-- Withdrawal Amount -->
<fieldset class="form-group">
<label for="disabledInput">Amount</label>
<input type="number" name="amount" step=".01" min="3000" class="form-control"
id="disabledInput" placeholder="Enter amount" required="">
</fieldset><br>
<!-- Additional Info -->
<fieldset class="form-group">
<label for="disabledInput">In order to withdraw, you need to make at least 5 bets
or more</label>
</fieldset><br>
<!-- Submit Button -->
<div class="col-12">
<button class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Step 2: Integrating Flutterwave’s Bank List API
The crucial part of the form is dynamically fetching the list of available banks from Flutterwave’s API and populating the dropdown. Here’s how it works:
Initialize a cURL session to request the bank list from Flutterwave’s API.
Pass the
Authorizationheader with your Flutterwave secret key.Parse the API response and populate the bank dropdown dynamically.
<?php
// Configuration
$flutterwaveSecretKey = 'YOUR_FLUTTERWAVE_SECRET_KEY';
$url = "https://api.flutterwave.com/v3/banks/NG"; // Replace 'NG' with the desired country code
// Initialize cURL session
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
"Authorization: Bearer $flutterwaveSecretKey"
]);
// Execute the request and fetch the response
$response = curl_exec($ch);
$curl_error = curl_error($ch);
curl_close($ch);
// Check for errors
if ($curl_error) {
die("CURL Error: " . $curl_error);
}
$banks = json_decode($response, true);
if (!$banks['status']) {
die("Failed to fetch banks: " . json_encode($banks));
}
// Populate the dropdown
echo '<select name="bank_code" class="form-control" id="helpInputTop">';
foreach ($banks['data'] as $bank) {
echo '<option value="' . $bank['code'] . '">' . $bank['name'] . '</option>';
}
echo '</select>';
?>
Step 3: Processing the Withdrawal Request
Once the user submits the form, you’ll handle the data in withdraw.php. Here, you will validate the user’s input, verify the bank code, account number, and other details, and send the withdrawal request to Flutterwave.
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$bankCode = $_POST['bank_code'];
$accountNumber = $_POST['accountnumber'];
$amount = $_POST['amount'];
$fullName = $_POST['fullname'];
// Process the withdrawal (use the Flutterwave payout API here)
// Example: Send payout request with the bank code, account number, and amount.
}
?>
Conclusion
In this tutorial, we walked through creating a Flutterwave withdrawal form that dynamically fetches and displays available banks in a dropdown using the Flutterwave API. By integrating payment APIs such as Flutterwave, you can provide seamless withdrawal functionality for your users, ensuring a smoother payment experience.
Additional Tips:
Ensure that sensitive information like API keys is securely stored (consider environment variables).
Always validate user input before processing any payment requests.