Flutterwave Integration with Ionic 4 - ionic-framework

Question

Invalid Public Key Passed
please am having issue during payment process, this is what i received
"invalid public key passed"
The api has been returning this error for days now, what is the problem? i am using the live pubkey and secret key from my dashboard.
this.rave.Card.charge(
{
"PBFPubKey":"FLWPUBK-33223e3cd910016924752a8373518225-X",
"cardno": "5438898014560229",
"cvv": "564",
"expirymonth": "10",
"expiryyear": "20",
"currency": "NGN",
"country": "NG",
"amount": "10",
"email": "user#gmail.com",
"phonenumber": "0902620185",
"firstname": "temi",
"lastname": "desola",
"IP": "355426087298442",
"txRef": "MC-" + Date.now(),// your unique merchant reference
"meta": [{ metaname: "flightID", metavalue: "123949494DC" }],
"redirect_url": "https://rave-webhook.herokuapp.com/receivepayment",
"device_fingerprint": "69e6b7f0b72037aa8428b70fbe03986c"
}
).then(resp => {
console.log(resp.body);
this.rave.Card.validate({
"transaction_reference": resp.body.data.flwRef,
"otp": 12345
}).then(response => {
console.log(response.body.data.tx);
console.log(response.body);
})
}).catch(err => {
console.log(err);
})

Answer 1

Step 1 : Get the Flutterwave-Angular-v3 here [https://github.com/Flutterwave/Flutterwave-Angular-v3]
run either of these commands depending on your runtime
environment
npm install flutterwave-angular-v3
or
yarn add flutterwave-angular-v3
step 2 : Import FlutterwaveModule to the app root module i.e. app.module.ts file and declare it in your imports array.
import { FlutterwaveModule } from "flutterwave-angular-v3"
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FlutterwaveModule
],
providers: [],
bootstrap: [AppComponent]
})
you have 2 options to either
use in code or use as a component, depending on
the architectural pattern of your application.
the README.md on the link is well explanatory.
step 3 : for the purpose of this question choose
Use in Code, Method 2 (Promise): Async Payment Response
import {Component} from '#angular/core';
import {Flutterwave, AsyncPaymentOptions} from "flutterwave-angular-v3"
(so you are able to get a promise back and do whatever you wish programmatically with your response data)..
Now fire up chrome and test your application, this should work fine on chrome when pay button is clicked prompting up the https://flutterwave.com/ng/ payment page modal,
P:S if you are building Natively (i.e. on device), you might encounter issues, worthy of note is running into an infinite loop when you click on the pay button, and you have a white blank screen that just keeps showing the loading icon.. resolve this by whitelisting https://cordova.apache.org/docs/en/9.x/reference/cordova-plugin-whitelist/ in your Config.xml file .....
Kindly ensure that these configs are included in the config.xml file :
<access origin="*" subdomains="true" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-navigation href="*" />
after this, delete your respective platform build folder and rebuild i.e.
ionic cordova build android
OR
ionic cordova build ios
now serve your project again and start testing, this should work fine on your device or simulator perfectly now. incase you get different error reach out on their forum https://developer.flutterwave.com/discuss, you sure will get an answer within record timing, their Engineers are doing an Amazing job..
if you get this working consider yourself approved the status of Jedi, and please mark this answer.

Answer 2

make sure you go to your dashboard and under settings->API the copy the public key.
Also note that the package was built for ionic 3 and not ionic 4.
you can use this package for ionic 4 [rave ionic 4] (https://www.npmjs.com/package/rave-ionic4).
I updated the current one for ionic 3 to work for ionic 4