Integrating Flutterwave’s secure payment gateway into your website.

Flutterwave is one of the leading payment gateways in Nigeria and Africa. If you have a business that requires secure online payment from customers, then I suggest you try them out. You can collect payments in USD, GBP, EUR, NGN and a host of other African currencies. They have so many payment solutions with which you can complete your payment and as I just saw recently, you can borrow and pay back later on the checkout page. In this guide, I’ll be showing you how to integrate rave into your website. So let’s dive in.

1. Create a Rave account If you have not created an account yet, go to https://dashboard.flutterwave.com/signup to create an account. Navigate to the settings page and click on the API tabs to get your public and secret key, we are going to need it.

screenshot of settings page and API tab on flutterwave dashboard

1. Collect payment information and charge the customer We have to collect the user’s email, the amount that will be paid and the currency if the payment will not be in naira(NGN). You can provide an input tag for the user to fill in the amount and their email or you can use a hidden input tag if the amount to be paid is static or you already have the user’s info. There are two main methods of doing this quick start integration; (i) Rave inline (ii) Rave standard Rave Inline The rave inline JS is secure, convenient and very easy to integrate. The user does not even need to redirect to another page. Below is a sample page I created with HTML and CSS for demonstration.

The above HTML is a simple card that holds the product we want to pay for. The card has an image and a description of the product. The form below contains a hidden input that holds the amount to be paid which is NGN3000, the other two inputs are for the user email and phone number. You can hide these inputs if you already have this information beforehand. The Buy Now button has an id of submit which will be used to listen for click events on it.
Most importantly add the rave-inline JS before the ending body tag. Without it, this method will not work. Under the rave-inline JSfile is my own script.js file in which the form value will be submitted for processing.
Below is the script.js file, where the magic happens;

Add a click event listener to the submit button which will which will be the starting point of the payment process, paste in the public key you got from your dashboard. Generate a unique transaction reference for the payment, assign the email, phone and amount you got from your inputs to variables and pass it as an argument to the getPaidSetup function. The getPaidSetup function now activates the rave modal for you to input your credit card to be processed. If you implemented everything correctly, then you should see something like this;

Image for post
If the payment is successful, you will see a success modal like this;

When the getPaidSetup function finishes execution, a response object is returned in the callback. This response contains all the information about the payment including the transaction reference you generated. you can console the response to see the details.
As you can see in the callback function, we are going to use the chargeResponseCode to know whether the payment is successful. A successful payment will have a chargeResponseCode with a value of 0 or 00 while a failed payment will have a value of 02. We can now redirect the user to the success or error page. If you still want to run a verification to clear any doubt, pass in the unique payment reference you generated as txRef to a backend verification page. We are going to come back to it later if you want to implement it.
Rave standard
The rave standard and rave inline are almost the same. The main difference is unlike in rave-inline, the payment was processed with javascript, here the user information is submitted in a form to a backend script. I named my own script processpayment.php. This script will call the https://api.ravepay.co/flwv3-pug/getpaidx/api/v2/hosted/pay endpoint. I also used a dummy book as the product to buy instead of trousers(it doesn’t really matter anyway).

Below is the paymentprocess.php file which will handle that for us

Assign the email and amount submitted by the POST request to variables. Validate those variables to make sure that the user has not done anything dubious. Generate a unique transaction reference. It is advisable to store this reference, amount, information about the product to be bought in a database and then set the transaction status to pending. Paste in your public key and specify your redirect URL.
The curl is used to call the https://api.ravepay.co/flwv3-pug/getpaidx/api/v2/hosted/pay. The amount, email, phone, currency, unique reference, your public key and redirect URL is passed into it as well and then executed. Use json_decode to decode the response returned by the API and store in a transaction variable. Check the transaction object to see if it has the data property and if the link that will process the payment also exists(this link is from Rave and not the one you provided earlier. don’t worry about it). We are now redirected to the link which is the checkout page for our card details.
When the transaction is completed, Rave will now redirect to the URL provided earlier.

1. Verify the payment status If you used rave inline and still want to send your transaction reference to a backend server for verification, append your reference to the URL of the page and use window.location to redirect to the verification page which in our case is status.php.

Right now, the rave-inline and rave-standard example are at the same stage which is the verification stage. Regardless of the method you chose, every process is the same.
After the transaction has been completed, use the reference returned in the redirect URL to check for the status of the transaction. below is the status.php file which does the verification for us.

use $_GET to collect the reference passed to the redirect URL and store as txRef, get the collect amount of the product you just sold from your database. encode your secret key from your dashboard and your txRef as JSON and call the https://api.ravepay.co/flwv3-pug/getpaidx/api/v2/verify endpoint with it to verify the payment. Decode the response returned. Check the chargecode, amount and currency to make sure they synchronize. Use the txRef to update the status of the transaction, redirect the user to the success or error page or do anything you’d like to do after a successful or failed transaction.

1. Use webhook to ensure stability Webhooks are used for notifying our server that a payment event has just occurred. A web application implementing WebHooks will POST a message to a URL when certain things happen. Webhooks are optional. Without it, everything will work but it makes our application stable. Let’s say that a user completes his payment successfully but maybe due to poor network signal was unable to get to your designated URL, or maybe closes the browser or the payment tab mistakenly, it will be difficult to ascertain the status of his payment unless we visit the dashboard manually and crosscheck. But with webhooks, you can still know if the transaction succeeded or failed and then you can update your transaction table and give or deny the user access to value being paid for whenever he comes back. Another case is when the user is subscribing to a service and will be billed periodically, whenever the user is billed, the status of the transaction is sent to your webhook URL. You can now keep offering the service to the user or stop if he wasn’t billed. Other examples are for events — like getting paid via mobile money or USSD where the transaction is completed outside your application. Below is a sample webhook from the documentation page.

if you want to use alternative methods of payment like USSD or mobile money, it’s advisable to set this up so that your application will be notified when the payment becomes successful.