flutterwave / vue-v3 Goto Github PK

When testing the subaccounts feature, is the key "subaccounts" or "subaccount".
While using subaccounts the application crashes with the error below.

v3.js:1 Uncaught DOMException: Failed to execute 'postMessage' on 'Window': [object Array] could not be cloned. at q.readytorecieve (https://checkout.flutterwave.com/v3.js:1:29543) at t.PBFPubKey.F.<computed> (https://checkout.flutterwave.com/v3.js:1:31481)

When using subaccount it works fine but the split transaction cannot be found in the flutterwave portal.

this dependency was not found:

• flutterwave-vue-v3 in ./src/main.ts
  To install it, you can run: npm install --save flutterwave-vue-v3

v 1.0.8

I was looking at this module and am curious if it can be integrated into a nuxt 3 project

As an example, php/laravel's SDK sends successfully OTP to customer's phone number on a test mode, but not in Vue SDK. Unless if a user or I already know that it's 123456, it wont be possible to know.

Regardless, on a live mode, it works swiftly👌🏽

Howdy again,

I read from the Flutterwave inline docs that one has two options when a payment is successfully completed, either

• use redirect_url, or
• use callback

The docs state that

... If you provide both redirect_url and callback in your request, the callback will be ignored and the customer will be redirected to the provided redirect URL. i.e redirect_url takes precedence over callback function when both are available.

and I have proved this to be true.

However, I have a situation where I need to perform some actions and then redirect to a particular route. I have ommitted the redirect_url option as per docs, and my callback is something like this:

    makePaymentCallback(response) {
      console.log("Pay", response);
      // some other stuff here ...
      this.$router.replace({ path: "/start" });
    },

However, this.$router.replace({ path: "/start" }); has no effect. Is there a way of being able to rediret in a callback?

Thanks

Correct me if I'm wrong but I thought the redirect_url property was for the link to the page on your site that handles success or failure of a transaction depending on the status query param. I set mine to the page on the site waiting to handle the query params but I keep getting a server not found error. What am I doing wrong?

First of all, I'd like to thank you for putting up this excellent library, it really makes it much easier and faster to integrate flutterwave payments into a vue.js application.

I have noticed situations where, after payment has been initiated, flutterwave takes a long time to finalize the payment. The money would already have been deducted from one's account, but the payment would still be incomplete on the app, and therefore, a redirect or callback function would still be pending.

When a user gets tired of waiting and clicks the modal close button, they are prompted to confirm whether they want to cancel the transaction. Upon confirmation, the modal is closed and the payment processing is cancelled. However, money has already been deducted from one's account (they even receive a receipt and flutterwave records it as a successful transaction), and yet they cannot use the service because payment wasn't "successful" on the app (in the sense that neither redirect_url nor callback were triggered).

I would therefore like to request that such matters are looked into and addressed, so that users have a better user experience. It would be good if people could get a refund automatically if a transaction wasn't successful.

Thanks.

Hello,
Putting my account in test mode no longer allows testing with currencies other than the one for the account. e.g If my account is NGN I cannot test with a USD (or any other currency) transaction which wasn't the case until recently. The simulation of transactions is essential for demos for potential clients.

Hi team,

I'm having the following issue, using the 'payWithFlutterwave' api with Vue and Typescript.

Property 'payWithFlutterwave' does not exist on type 'ComponentPublicInstance<{} ...>

It seems like the issue started with finding the declaration file

Could not find a declaration file for module 'flutterwave-vue-v3'. '/.../node_modules/flutterwave-vue-v3/dist/flutterwave-vue-v3.ssr.js' implicitly has an 'any' type....

This line is actually breaking the code:
this.payWithFlutterwave(this.paymentData)

I hope this can be looked into, and a solution provided for TS users.

Thank you

I keep getting an invalid email error on the modal every time I bind the customer name, email, and phone number fields to the v-model on the input fields to programmatically populate those fields. The same goes for the amount stating that it must not be less than zero. Using console log statements to debug indicates that all fields are returning expected values. Help!
I'm using Vue/Nuxt 2.x
I basically need to not hardcode the customer details.

Access to fetch at 'https://api.ravepay.co/v3/checkout/initialize' from origin 'https://checkout-v3-ui-prod.f4b-flutterwave.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
checkout.js:1 POST https://api.ravepay.co/v3/checkout/initialize net::ERR_FAILED 403

The method closePaymentModal() does not close the modal

Hello,
how do I handle a situation where a customer's WhatsApp number is different from the mobile money number? This question is a result of receiving the OTP via WhatsApp during development.

All usage methods in the documentation give this error. I've followed all procedures to no avail. Please help!

Howdy,

Thank you so much for this awesome library 🔥

I just encountered the following error while testing out the library in a browser:

Access to fetch at 'https://kgelfdz7mf.execute-api.us-east-1.amazonaws.com/staging/sendevent' 
from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
header is present on the requested resource. If an opaque response serves your needs,
set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I'm using quasar and I intend to target Android.

Would be most grateful for help on resolving this.