How To Integrate Flutterwave Payment Gateway In Website Using PHP And Save Details In Database

What is Flutterwave?

Flutterwave is a Nigerian fintech company that provides a payment infrastructure for global merchants and payment service providers across the continent. It assists most E-commerce platforms, Educational Organizations and lots more to accept payment from their customers.

To seamlessly integrate Flutter into PHP Applications, we must ensure our environment has the following in place:

Verified Flutterwave Account.
Your Flutterwave account public key.
A little knowledge of HTML, CSS & JavaScript
Step 1: Sign Up with Flutterwave

The first thing is to register your business account on Flutterwave's website and verify your sign up using a verification link sent to your email. The next thing is to Signin to your new Paystack account. On your dashboard you will find your public and secret key. We will make use of the public and secret key for this tutorial.
Step 2: Creating Our HTML, CSS Files

Our HTML file will be the markup for our checkout page where customer pays for our product. This page will display the summary of what the customer purchased with a pay button. We also link our CSS and JavaScript file.

The key element in our index.php file. This index.php file contains the required customer fields to process the transaction. In this Tutorial, we focus on (Name, email and Payment reference). The Html form is connected to initializeusd.php Using the Form post method.

initializeusd.php

This files contains the set of codes to process user inputs and send to flutterwave server. Note: Change the Flutterwave Public key to your own. Once the data is being send to flutterwave server, there is a call back function to verify if the transaction amount is altered or payment was successful, the successusd.php file take care of this.

on line $redirect_url = "127.0.0.1/flutterwave/successusd.php"; // Change the url to your website url for proper redirections
Step 3: Verifying the transaction

It is very important to verify if a transaction is successful before given value for what is being paid for. successusd.php file handles this.

$amount = "900"; //Correct Amount from Server

Always make sure the amount set here is the same as the amount accepted from customer, else the transaction will be failed and customer will be debited.

This function is to prevent a case where the user edit the amount required or did not pay up to the specified amount.

"SECKEY" => "FLWSECK_TEST-04d9408253eced86f18513ee58f57df4-X", // Replace with your secret key.

Once the transaction is successful, value will be given and user details will be saved inside the database. This can be best used for a subscription portal.

TO TEST RUN THE APP IN DEMO MODE, USE THE BELOW CARD DETAILS FROM FLUTTERWAVE:


CARD NO: "5531886652142950",
Security: "564",
EXPIRY DATE: "09/32",
PIN: "3310",
OTP: "12345"


Remember to replace with your own flutterwave secret key

After the setup, we can now use our setup to call the openIframe() function.

If you have followed this tutorial from the beginning then its time to test our app.

Download and View the source Code here: https://mavigoldsolutions.com/article/7/how-to-integrate-flutterwave-payment-gateway-in-website-using-php-and-save-details-in-database

How to integrate Paystack payment gateway in Website Using PHP and save in database
What is Paystack?
Paystack is an African payment gateway used by enterprises to accept payments from their customers. It is one of the most popular payment gateways in Africa, especially in Nigeria, Ghana and Kenya. It assists most E-commerce platforms, Educational Organizations and lots more to accept payment from their customers.

To seamlessly integrate Paystack into PHP Applications, we must ensure our environment has the following in place:
Paystack Account.
Your Paystack account public key.
A little knowledge of HTML, CSS & JavaScript
Step 1: Sign Up with Paystack

The first thing is to register your business account on Paystack’s website and verify your sign up using a verification link sent to your email. The next thing is to sign in to your new Paystack account. On your dashboard you will find your public and secret key. We will make use of the public and secret key for this tutorial.
Step 2: Creating Our HTML, CSS Files

Our HTML file will be the markup for our checkout page where customer pays for our product. This page will display the summary of what the customer purchased with a pay button. We also link our CSS and JavaScript file.

The key element in our index. html file is the Pay Button with on-click attribute that triggers our JavaScript function payWithPaystack() .

CheckOut with Paystack

We also link the Paystack’s javascript library and our own javascript to this html file.

Like this:

">">https://js.paystack.co/v1/inline.js">;

You can find the structure of the checkout for and Css styles in the Source Code after Download
Step 3: Creating Our JavaScript File

JavaScript is is very important when connecting your website with paystack.

Lets create our payWithPaystack() function. This function is were we finalize our payment setup before calling the Paystack’s payment modal.

Setup includes adding your public key, your customer’s email, phone number and the amount the customer is supposed to pay.
Remember to add/replace your own Paystack public key

const paymentForm = document.getElementById('paymentForm');

paymentForm.addEventListener("submit", payWithPaystack, false);

function payWithPaystack(e) {

e.preventDefault();

let handler = PaystackPop.setup({

key: 'pk_live_4446f9704a9a592421a27cc0cd131f9dc0a982d5', // Replace with your public key

email: document.getElementById("email".value,

amount: document.getElementById("amount".value * 100,

firstname: document.getElementById("firstname".value,

lastname: document.getElementById("lastname".value,

ref: 'VS'+Math.floor((Math.random() * 1000000000) + 1), // generates a pseudo-unique reference. Please replace with a reference you generated. Or remove the line entirely so our API will generate one for you

// label: "Optional string that replaces customer email"

onClose: function(){

window.location = "index.php?transaction=cancel";

alert('Transaction Cancelled.');

},

callback: function(response){

let message = 'Payment complete! Take note of your Access Code: ' + response.reference;

alert(message);

window.location = "verify_transaction.php?reference=" + response.reference;

}

});

handler.openIframe();

}



Lets talk about callback function. Inside this function is where we check if a customer was charged successfully or not by sending jquery post request using the transaction reference. Every transaction has its own unique key generated by the Paystack API. This callback function can be found in the verify_transaction.php file.

After the Payment is successful. we will save the Payment information retrieved from Paystack in the database.


Link to the Source Code: https://mavigoldsolutions.com/article/5/how-to-integrate-paystack-payment-gateway-in-website-using-php-and-verify-payment-transaction