How to Integrate Noupia Payment with Laravel 8.x
Example: Voting System.
Tech Stack:
php/Laravel, Html, Css, Bootstrap, Mysql, Javascript/Jquery
This post is about intergrating Noupia payment with PHP/Laravel Framework. Noupia is a financial App with local payment integrations such as MTN MOBILE MONEY and ORANGE MONEY. This post will help developers be able to receive payments from their websites or Mobile applications directly into their MTN Mobile Money account or Orange Money account. You can learn more about Noupia on their official website.
Environment Setup
To get your environment setup with Laravel, you can visit the Laravel Official documentation Here
After Your Laravel environment is setup, you can Login to your Noupia Mobile application. If you do not have the app yet, you can download it from PlayStore or AppStore. In your Noupia App, ask for the API KEY using the LiveChat functionality provided. When you have all the above, you can now proceed with the integration.
Writing Laravel Code
Head to your laravel application/project and create a controller. Name the controller as you wish.
Important Routes.
The Routes below are the initiate payment( the pay) routes and verify payment. When you initialize payment with Noupia, you have to check the status of your payment withing 30seconds.
At the verify noupia payment route, we need both the constenstantId from our platform and the transactionId from Noupia.
Initiate Payment in Controller
Verify Payment Status.
Front End of the Application
HTML/CSS/Boosttrap in Laravel Blade Template
This is the html code found in Laravel Blade template which we will use JQUERY to validate inputs and process payment.
Javascript/Jquery part.
In this section, the user inputs are validated, and catch any errors.
Once the transaction has been initiated, the transaction Id is put into the session and Setinterval function of jquery used to check transaction status every 2seconds for 30seconds and the transaction status sent to the verifyPaymentStatus method in the controller.
Note:
In case of any difficulties, feel free to use the WhatsApp button on the bottom left or the livechat button on your right. We will be happy to help you.