Connect with us

How to fix Flutterwave common error's while Integrating payment in your Laravel App

kizinho

Published

on

Follow
DEVELOPER PROGRAMMING: How to fix Flutterwave common error's while Integrating payment in your Laravel App [New  Developer Programming] » Naijacrawl
Photo: Naijacrawl
site

Hi folks, I was integrating FLutterwave on my laravel app, on the process i found a bunch of errors while trying to use it accept payment on my site. Have been a Paystack heavy user but decided to use Flutterwave for a reason that I love to do. Going through this article I will list the two types of error or bug that you must encounter while using Laravel Rave steps to get Flutterwave payment working.

Types of error

  1. Error on the payment page when user try to refresh the page without making payment
  2. Error when a user successfully made the payment but you have callback issues

How to fix this two type of errors


First error Fixed -> Error on the payment page when user try to refresh the page without making paymment

Your laravel Rave route for making payment is below:

Route::post('/pay', 'RaveController@initialize')->name('pay');

The error you will get when user refresh the payment page without making a payment is below:

Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException
The GET method is not supported for this route. Supported methods: POST.

The GET method is not supported for this route. Supported methods: POST.

You get this error because your pay route is a post method

Solved error

You can solve this error by using matching route or create separate GET and POST route, where get route will redirect your user back to pay now button, but I choose to use match method in which user has to go back and click pay now button again because Flutterwave wouldn't see those post credential again., code below is for matching when the route have GET or POST method without showing a user those ugly codes

    Route::match(['GET', 'POST'],'/pay', 'PaymentController@initialize')->name('pay');


Second error Fixed ->  Error when a user successfully made the payment but you have callback issues

This second error is when the user has successfully made payment whether success or not but you the developer want to do something with the returned data.

Default Laravel Rave callback route

Route::post('/rave/callback', 'RaveController@callback')->name('callback');

Error screen below:


Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException
The GET method is not supported for this route. Supported methods: POST.
http://127.0.0.1:4000/rave/callback?resp=%7B%22name%22%3A%22vbvcomplete%22%2C%22data%22%3A%7B%22transactionobject%22%3A%7B%22id%22%3A1441931%2C%22txRef%22%3A%22rave_5f246d0cb9dac%22%2C%22orderRef%22%3A%22URF_1596222756471_8337635%22%2C%22flwRef%22%3A%22FLW-MOCK-2aa82bc680c707b438cf9d2be8d30871%22%2C%22redirectUrl%22%3A%22http%3A%2F%2F127.0.0.1%3A4000%2Frave%2Fcallback%22%2C%22device_fingerprint%22%3A%22e5b87fff9ee84c0a929bf1e9fa408bb2%22%2C%22settlement_token%22%3Anull%2C%22cycle%22%3A%22one-time%22%2C%22amount%22%3A19.9999999999998%2C%22charged_amount%22%3A20%2C%22appfee%22%3A0.76%2C%22merchantfee%22%3A0%2C%22merchantbearsfee%22%3A1%2C%22chargeResponseCode%22%3A%2200%22%2C%22raveRef%22%3A%22RV3159622275508265EAA00C0E%22%2C%22chargeResponseMessage%22%3A%22Please%20enter%20the%20OTP%20sent%20to%20your%20mobile%20number%20080%2A%2A%2A%2A%2A%2A%20and%20email%20te%2A%2A%40rave%2A%2A.com%22%2C%22authModelUsed%22%3A%22VBVSECURECODE%22%2C%22currency%22%3A%22USD%22%2C%22IP%22%3A%22105.112.99.180%22%2C%22narration%22%3A%22CARD%20Transaction%20%22%2C%22status%22%3A%22successful%22%2C%22modalauditid%22%3A%22f90383b37b6e0e4194c6bb6f5573e0d2%22%2C%22vbvrespmessage%22%3A%22Approved.%20Successful%22%2C%22authurl%22%3A%22https%3A%2F%2Fravesandboxapi.flutterwave.com%2Fmockvbvpage%3Fref%3DFLW-MOCK-2aa82bc680c707b438cf9d2be8d30871%26code%3D00%26message%3DApproved.%20Successful%26receiptno%3DRN1596222756556%22%2C%22vbvrespcode%22%3A%2200%22%2C%22acctvalrespmsg%22%3Anull%2C%22acctvalrespcode%22%3A%22RN1596222756556%22%2C%22paymentType%22%3A%22card%22%2C%22paymentPlan%22%3A1%2C%22paymentPage%22%3Anull%2C%22paymentId%22%3A%226527778%22%2C%22fraud_status%22%3A%22ok%22%2C%22charge_type%22%3A%22normal%22%2C%22is_live%22%3A0%2C%22retry_attempt%22%3Anull%2C%22getpaidBatchId%22%3Anull%2C%22createdAt%22%3A%222020-07-31T19%3A12%3A36.000Z%22%2C%22updatedAt%22%3A%222020-07-31T19%3A12%3A46.000Z%22%2C%22deletedAt%22%3Anull%2C%22customerId%22%3A432208%2C%22AccountId%22%3A154719%2C%22customer%22%3A%7B%22id%22%3A432208%2C%22phone%22%3A%22%2B2348137140110%22%2C%22fullName%22%3A%22Kizito%20Adike%22%2C%22customertoken%22%3Anull%2C%22email%22%3A%22adikekizinho%40gmail.com%22%2C%22createdAt%22%3A%222020-07-31T19%3A12%3A35.000Z%22%2C%22updatedAt%22%3A%222020-07-31T19%3A12%3A35.000Z%22%2C%22deletedAt%22%3Anull%2C%22AccountId%22%3A154719%7D%2C%22chargeToken%22%3A%7B%22user_token%22%3A%22af107%22%2C%22embed_token%22%3A%22flw-t0-2d8204278bcb83865eedfbccc21980f1-m03k%22%7D%2C%22airtime_flag%22%3Afalse%7D%2C%22name%22%3A%22vbvcomplete%22%2C%22data%22%3A%7B%22status%22%3A%22successful%22%2C%22txRef%22%3A%22rave_5f246d0cb9dac%22%2C%22amount%22%3A%2219.9999999999998%22%7D%2C%22respcode%22%3A%2200%22%2C%22respmsg%22%3A%22Approved.%20Successful%22%7D%2C%22respcode%22%3A%2200%22%2C%22tx%22%3A%7B%22id%22%3A1441931%2C%22txRef%22%3A%22rave_5f246d0cb9dac%22%2C%22orderRef%22%3A%22URF_1596222756471_8337635%22%2C%22flwRef%22%3A%22FLW-MOCK-2aa82bc680c707b438cf9d2be8d30871%22%2C%22redirectUrl%22%3A%22http%3A%2F%2F127.0.0.1%3A4000%2Frave%2Fcallback%22%2C%22device_fingerprint%22%3A%22e5b87fff9ee84c0a929bf1e9fa408bb2%22%2C%22settlement_token%22%3Anull%2C%22cycle%22%3A%22one-time%22%2C%22amount%22%3A19.9999999999998%2C%22charged_amount%22%3A20%2C%22appfee%22%3A0.76%2C%22merchantfee%22%3A0%2C%22merchantbearsfee%22%3A1%2C%22chargeResponseCode%22%3A%2200%22%2C%22raveRef%22%3A%22RV3159622275508265EAA00C0E%22%2C%22chargeResponseMessage%22%3A%22Please%20enter%20the%20OTP%20sent%20to%20your%20mobile%20number%20080%2A%2A%2A%2A%2A%2A%20and%20email%20te%2A%2A%40rave%2A%2A.com%22%2C%22authModelUsed%22%3A%22VBVSECURECODE%22%2C%22currency%22%3A%22USD%22%2C%22IP%22%3A%22105.112.99.180%22%2C%22narration%22%3A%22CARD%20Transaction%20%22%2C%22status%22%3A%22successful%22%2C%22modalauditid%22%3A%22f90383b37b6e0e4194c6bb6f5573e0d2%22%2C%22vbvrespmessage%22%3A%22Approved.%20Successful%22%2C%22authurl%22%3A%22https%3A%2F%2Fravesandboxapi.flutterwave.com%2Fmockvbvpage%3Fref%3DFLW-MOCK-2aa82bc680c707b438cf9d2be8d30871%26code%3D00%26message%3DApproved.%20Successful%26receiptno%3DRN1596222756556%22%2C%22vbvrespcode%22%3A%2200%22%2C%22acctvalrespmsg%22%3Anull%2C%22acctvalrespcode%22%3A%22RN1596222756556%22%2C%22paymentType%22%3A%22card%22%2C%22paymentPlan%22%3A1%2C%22paymentPage%22%3Anull%2C%22paymentId%22%3A%226527778%22%2C%22fraud_status%22%3A%22ok%22%2C%22charge_type%22%3A%22normal%22%2C%22is_live%22%3A0%2C%22retry_attempt%22%3Anull%2C%22getpaidBatchId%22%3Anull%2C%22createdAt%22%3A%222020-07-31T19%3A12%3A36.000Z%22%2C%22updatedAt%22%3A%222020-07-31T19%3A12%3A46.000Z%22%2C%22deletedAt%22%3Anull%2C%22customerId%22%3A432208%2C%22AccountId%22%3A154719%2C%22customer%22%3A%7B%22id%22%3A432208%2C%22phone%22%3A%22%2B2348137140110%22%2C%22fullName%22%3A%22Kizito%20Adike%22%2C%22customertoken%22%3Anull%2C%22email%22%3A%22adikekizinho%40gmail.com%22%2C%22createdAt%22%3A%222020-07-31T19%3A12%3A35.000Z%22%2C%22updatedAt%22%3A%222020-07-31T19%3A12%3A35.000Z%22%2C%22deletedAt%22%3Anull%2C%22AccountId%22%3A154719%7D%2C%22chargeToken%22%3A%7B%22user_token%22%3A%22af107%22%2C%22embed_token%22%3A%22flw-t0-2d8204278bcb83865eedfbccc21980f1-m03k%22%7D%2C%22airtime_flag%22%3Afalse%7D%2C%22respmsg%22%3A%22Approved.%20Successful%22%7D

How to fix these error

changing callback from post to get

   Route::get('/rave/callback', 'PaymentController@callback')->name('callback');

Now you wouldn't be able to get those data from flutterwave because this will return null, you have to do something on your callback function

default laravel Rave callback function

namespace App\Http\Controllers;




use Illuminate\Http\Request;

use Rave;




class PaymentController extends Controller {




  public function initialize() {

    Rave::initialize(route('callback'));

  }




  public function callback() {




    $data = Rave::verifyTransaction(request()->txref);




    dd($data);

     




  }




}

Now you have to modify it to be able to receive the payment data's

code below

namespace App\Http\Controllers;


use Illuminate\Http\Request;
use Rave;


class PaymentController extends Controller {


    public function initialize() {
        Rave::initialize(route('callback'));
    }


    public function callback(Request $request) {
        $resp = $request->resp;
        $body = json_decode($resp, true);
        $txRef = $body['data']['data']['txRef'];
        $data = Rave::verifyTransaction($txRef);
        dd($data);
    }


}



After that, you now get those datas and do something, love this buy me a beer

Click Here To Comment

site


kizinho

I am a software developer, like meeting people and love blogging, that's why I developed naijacrawl because that's what I love doing.

Continue Reading
2 Comments

2 Comments

  1.   ucee Tony

    Nice one Odogwu... U Are doing well

    •  kizinho

      Thank you sir and enjoy , have just love flutterwave , easily accept any currency


Leave a Reply

Your email address will not be published. Required fields are marked *

How to Fix Npm Error (npm ERR! conflict Automatic conflict resolution failed. Please manually resolve conflicts in package-lock.json and try again)

kizinho

Published

on

NEWS: How to Fix Npm Error (npm ERR! conflict Automatic conflict resolution failed. Please manually resolve conflicts in package-lock.json and try again) [New  Developer] » Naijacrawl
Photo: Naijacrawl

Hi Folks today when i was working on a project , wanted to install NPM in my project, but encountered this errors saying .

 

npm ERR! conflict Automatic conflict resolution failed. Please manually resolve conflicts in package-lock.json and try again





npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Roaming\npm-cache\_logs\2019-06-10T15_01_39_991Z-debug.log
PS C:\xampp\htdocs\oer_coalcity\ccu-oer> npm install --package-lock
npm WARN conflict A git conflict was detected in package-lock.json. Attempting to auto-resolve.

 

How I solved It

1. Run rm package-lock.json

 

2. Run npm install

 

3. Run git add package-lock.json

 

Thats how i got my npm installed in my project. 

 

Continue Reading

Laravel 8 is now released!

kizinho

Published

on

DEVELOPER PROGRAMMING: Laravel 8 is now released! [New  Developer Programming] » Naijacrawl
Photo: Naijacrawl

Laravel 8 is now released and includes many new features including Laravel Jetstream, a models directory, model factory classes, migration squashing, rate-limiting improvements, time testing helpers, dynamic blade components, and many more features.

Before we jump into the new features, we’d like to point out that starting with version 6, Laravel now follows semver and will release a new major version every six months. You can see how the release process works here.

Laravel Jetstream

Laravel Jetstream improves upon the existing Laravel UI scaffolding found in previous versions. It provides a starting point for new projects, including login, registration, email verification, two-factor authentication, session management, API support via Laravel, and team management.

Models Directory

Laravel 8’s application skeleton includes an app/Models directory. All generator commands assume models exist in app/Models; however if this directory doesn’t exist, the framework will assume the application keeps models within the app/ folder.

Model Factory Classes

Eloquent model factories are now class-based starting in Laravel 8, with improved support for relationships between factories (i.e., a user has many posts). 

Migration Squashing

If your application contains many migration files, you can now squash them into a single SQL file. This file will be executed first when running migrations, followed by any remaining migration files that are not part of the squashed schema file. Squashing existing migrations can decrease migration file bloat and possibly improve performance while running tests.

Improved Rate Limiting

Laravel 8 brings improvements to existing rate limiting functionality while supporting backward compatibility with the existing throttle middleware and offering far more flexibility. Laravel 8 has the concept of Rate Limiters that you can define via a facade.

Time Testing Helpers

Laravel users have enjoyed full control over time modification via the excellent Carbon PHP library. Laravel 8 brings this one step further by providing convenient test helpers for manipulating the time within tests. When using these methods, the time will reset between each test.

Dynamic Blade Components

Sometimes you need to render a blade component dynamically at runtime. Laravel 8 provides the  to render the component.

Find out more about Laravel v8…

These are just a few of the new features in Laravel 8 and to see a complete list check out the Laravel 8 release notes as well as the upgrade guide. Also, don’t forget about Laravel Shift if you want an easy way of updating.

Taylor also gave a walkthrough of some of these features at Laracon Online and, you can still purchase a ticket if you’d like to see that. Also, Laracasts: What’s New in Laravel 8 series can help you get up-to-speed with new features in this release.

As with all releases, Laravel is made possible by so many people and, we’d like to thank everyone that contributes, that submits PR’s, that shares ideas and that uses the framework. Laravel is truly a global team effort.


Continue Reading

Upload files to Amazon S3 from the browser using pre-signed post (Laravel, Vue.js/Nuxt.js)

kizinho

Published

on

DEVELOPER PROGRAMMING: Upload files to Amazon S3 from the browser using pre-signed post (Laravel, Vue.js/Nuxt.js) [New  Developer Programming] » Naijacrawl
Photo: Naijacrawl

Upload files to Amazon S3 from the browser using pre-signed post (Laravel, Vue.js/Nuxt.js)

This article was written by Okonkwo Buchi Flair a ccolleague of mind, read and know how to simply upload your files via Amazon S3.

original article can be found here

Before I begin I would love to point out that is my first post so please pardon me any errors you may find as you read along


Recently I’ve been working on a e-learning platform which of course was going to deal with a lot of uploads and letting the server handle all that will be quite… 😫 And so I had to find an alternative which was direct uploads from the browser. I hit Google search and boy! there were tons of info but then they all made use of javascript, the ones with php used html forms. However, in this post we won’t be using html form. we’ll be making use of axios.

This post assumes you’ve set up your s3 bucket and is fully focused on how to get your uploads working. Don’t forget your CORS configuration as well.


First add your bucket details to your .env file and don’t forget to restart when you make changes to your .env file

AWS_ACCESS_KEY_ID=xxxxxxV2HQFVM
AWS_SECRET_ACCESS_KEY=xxxxxx+xxxx+xxxx+xxxxx
AWS_DEFAULT_REGION=eu-west-2
AWS_BUCKET=Your-Bucket-Name

Next install aws sdk by running the following code

composer require aws/aws-sdk-php-laravel

Create a controller that’s going to take care of your uploads. Meanwhile the filesystem configuration file located at config/filesystem.php is already set up by default to help you access your S3 configurations in the .env file

use Aws\S3\PostObjectV4;
use Aws\S3\S3Client;

class MyController extends Controller
{
public function upload(Request $request)
{
$filename =  $request->filename;
$directory =  $request->directory;
$s3 = config('filesystems.disks.s3');
$client = new S3Client(['version' => 'latest','region' => $s3['region'],'credentials' => ['key' => $s3['key'],'secret' => $s3['secret'],
]]);
$bucket = $s3['bucket'];
$prefix = $directory . '/';
$acl = 'public-read';
$expires = '+10 minutes';
$formInputs = [
 'acl' => $acl,
 'key' => $prefix . $filename,
];
$options = [
 ['acl' => $acl],
 ['bucket' => $bucket],
 ['starts-with', '$key', $prefix],
];
$postObject = new PostObjectV4($client, $bucket, $formInputs, $options, $expires);
$attributes = $postObject->getFormAttributes();
$inputs = $postObject->getFormInputs();
return response(['attributes' => $attributes, 'inputs' => $inputs, 'url' => $attributes['action'] . '/' . $directory . '/' . $filename]);
}
}

So let me explain what’s happening in the above code. From my frontend I am going to make a post request which would contain the name of the file (just as it would be in my s3 bucket and also the folder where it’s going to be saved since my files are going to be saved in different folders. I get my s3 configurations from the env file use s3 file configuration in the config/filesystem.php file. The rest are self explanatory I hope. The $attributes contains information like the form action which is going to look like https://your-bucket-url. Yours won’t necessary have a directory of course. The ‘url’ in my return is what I intend to save in my database once my upload is successful and it would look like this https://bucket-url/directory/filename. With this you will be able successfully generate a presigned POST.

Next create a post route that points to the controller. Since I am making use of Lumen my route looks like this

$router->post(‘uploads/store’, ‘MyController@upload’);

Next we’ll dive into the frontend part where we’ll be submitting a form with the detailed generated above.

In my Nuxt file I created a component S3FileUploads.vue that looked like this

I am going to attach screenshots instead for some codes.

I have a computed property which basically returns the file extension

computed property get file extension

I also have a method for generating random strings

random string generator

I like to have a general file or files where my endpoints are. It makes it easier to make changes. So I have an endpoint which points to the controller that generates the presigned post for me.

And then I have my upload file method. The first part of this method involved me trying to generate a unique name for my files and

There was an issue I encountered while trying send the file to my s3 with axios. My header already contained an Authorization token which made the s3 reject the request, and I couldn’t remove the Authorization because of course I can’t access the backend if my request doesn’t contain the token. So removing it wasn’t an option. Th alternative for me was to use the fetch

Of course there were other things I did like store the file url to the database if the upload was successful. That’s basically it. Feel free to ask any questions, I’ll try to reply them, and I’d really appreciate those claps too. Thanks for reading

Continue Reading

Latest