Blank payment modal on Android

[Oluwaturheeb]

The PayWithFlutterwave component shows white modal and when i clicked anywhere inside the modal it brings up the keyboard.
i am testing on physical device on Android 7
<PayWithFlutterwave onRedirect={param => console.log(param)} options={{ authorization: 'FLWPUBK_TEST-3ffa62793f521b1e3134650390f7ea97-X', tx_ref: ref(), amount: 5000, customer: { name: Bello Toheeb, email: '[email protected]' }, currency: 'NGN', payment_options: 'card,banktransfer,ussd', customizations: { title: 'MedXpress', description: Session payment with Dr. Darasimi Vincent, } }} custoFlutterwaveInitmButton={(props) => ( <Button style={{ bottom: 125 }} onPress={props.onPress} mode='contained' disabled={disable}> Proceed </Button>) } />

But when i used the FlutterwaveInit method and run the returned uri with webview directly it works!

[sokoya]

Hi,
Are you able to fix this? What was the solution, facing the same on a project.
Cheers

The PayWithFlutterwave component shows white modal and when i clicked anywhere inside the modal it brings up the keyboard. i am testing on physical device on Android 7 <PayWithFlutterwave onRedirect={param => console.log(param)} options={{ authorization: 'FLWPUBK_TEST-3ffa62793f521b1e3134650390f7ea97-X', tx_ref: ref(), amount: 5000, customer: { name: Bello Toheeb, email: '[email protected]' }, currency: 'NGN', payment_options: 'card,banktransfer,ussd', customizations: { title: 'MedXpress', description: Session payment with Dr. Darasimi Vincent, } }} custoFlutterwaveInitmButton={(props) => ( <Button style={{ bottom: 125 }} onPress={props.onPress} mode='contained' disabled={disable}> Proceed </Button>) } />

But when i used the FlutterwaveInit method and run the returned uri with webview directly it works!

[toheeb-broadshift]

Hi, Are you able to fix this? What was the solution, facing the same on a project. Cheers

The PayWithFlutterwave component shows white modal and when i clicked anywhere inside the modal it brings up the keyboard. i am testing on physical device on Android 7 <PayWithFlutterwave onRedirect={param => console.log(param)} options={{ authorization: 'FLWPUBK_TEST-3ffa62793f521b1e3134650390f7ea97-X', tx_ref: ref(), amount: 5000, customer: { name: Bello Toheeb, email: '[email protected]' }, currency: 'NGN', payment_options: 'card,banktransfer,ussd', customizations: { title: 'MedXpress', description: Session payment with Dr. Darasimi Vincent, } }} custoFlutterwaveInitmButton={(props) => ( <Button style={{ bottom: 125 }} onPress={props.onPress} mode='contained' disabled={disable}> Proceed </Button>) } />
But when i used the FlutterwaveInit method and run the returned uri with webview directly it works!

Yes, i think it is device specific actually, cuz when i tested on other devices it worked better but yet still the issue still persist on that device but let share the work around i made to it, to make it work

[sokoya]

Hi, Are you able to fix this? What was the solution, facing the same on a project. Cheers

The PayWithFlutterwave component shows white modal and when i clicked anywhere inside the modal it brings up the keyboard. i am testing on physical device on Android 7 <PayWithFlutterwave onRedirect={param => console.log(param)} options={{ authorization: 'FLWPUBK_TEST-3ffa62793f521b1e3134650390f7ea97-X', tx_ref: ref(), amount: 5000, customer: { name: Bello Toheeb, email: '[email protected]' }, currency: 'NGN', payment_options: 'card,banktransfer,ussd', customizations: { title: 'MedXpress', description: Session payment with Dr. Darasimi Vincent, } }} custoFlutterwaveInitmButton={(props) => ( <Button style={{ bottom: 125 }} onPress={props.onPress} mode='contained' disabled={disable}> Proceed </Button>) } />
But when i used the FlutterwaveInit method and run the returned uri with webview directly it works!

Yes, i think it is device specific actually, cuz when i tested on other devices it worked better but yet still the issue still persist on that device but let share the work around i made to it, to make it work

Kindly share please, and thanks for quick response .

[toheeb-broadshift]

`
const forkParams = (url) => {
if (url.indexOf('medxpress')) {
var res = {};
if (url.split('?').length > 1) {
var params = url.split('?')[1].split('&');
for (var i = 0; i < params.length; i++) {
var param = params[i].split('=');
var val = decodeURIComponent(param[1]).trim();
res[param[0]] = String(val);
}
}
// return result
return res;
}
};

<WebView source={{ uri: go }} onNavigationStateChange={event => {
let state = forkParams(event.url);
console.log(state);
if (state.status == 'successful') setGo(false);
setStatus(state);
}} />`

i hope it helps

[toheeb-broadshift]

Right there since it uses webview to pass all the parameter to flutterwaveinit function and catch the url in onNavigationChange event and if the redirect url matches the passed parameter, break the parameter and get the transaction status

[sokoya]

Right there since it uses webview to pass all the parameter to flutterwaveinit function and catch the url in onNavigationChange event and if the redirect url matches the passed parameter, break the parameter and get the transaction status

Thank you for the snippet, I am still trying to understand it.
Is it that you called the WebView inside PayWithFlutterwave?

Please if you don't mind can I call you via Google Meet

Here is my code that is not showing blank white screen on Android

<PayWithFlutterwave onRedirect={handleOnRedirect} options={{ tx_ref: generateTxRef(), authorization: FLWPUBK, customer: { email, phone, name }, customizations: { title: 'Topup', description: "Top-up your account...", logo: APP_LOGO_URL }, meta: { customer_id: id, transaction_type: 'topup' }, amount: parseFloat(amount), currency: 'NGN', payment_options: 'card' }} customButton={(props) => ( <Button gradient shadow onPress={props.onPress} isBusy={props.isInitializing} disabled={props.disabled}> <Text white center bold transform="uppercase"> {props.disabled ? 'Processing' : 'Proceed'} </Text> </Button> )} />

[toheeb-broadshift]

You can actually but it'll really be good if we can fix it here to help others

this is my button that triggers the flutterwaveint function to generate the url for the webview
<Button mode='contained' onPress={async () => { const url = await FlutterwaveInit({ authorization: 'FLWPUBK_TEST', tx_ref: ref(), amount: profile.pricing, customer: { name: user.name, email: user.email }, currency: 'NGN', payment_options: 'card,banktransfer', redirect_url: 'https://google.com', customizations: { title: 'MedXpress', description: Session payment with ${user.firstname} ${user.lastname}`,
}
});

    setGo(url);
  }}>
    Proceed
  </Button>`

after the state has been set pass the value of the state to the webview

<WebView source={{ uri: go }} onNavigationStateChange={event => { let state = forkParams(event.url); console.log(state); if (state.status == 'successful') setGo(false); setStatus(state); }} />

listen to the onNavigationStateChange and fork the url thats returned with this function be sure to update the URL or can just use it like that

const forkParams = (url) => { if (url.indexOf('google')) { var res = {}; if (url.split('?').length > 1) { var params = url.split('?')[1].split('&'); for (var i = 0; i < params.length; i++) { var param = params[i].split('='); var val = decodeURIComponent(param[1]).trim(); res[param[0]] = String(val); } } // return result return res; } };

i hope it helps and if u still have any further question you can schedule a meet like you mentioned earlier

[sokoya]

const forkParams = (url) => { if (url.indexOf('google')) { var res = {}; if (url.split('?').length > 1) { var params = url.split('?')[1].split('&'); for (var i = 0; i < params.length; i++) { var param = params[i].split('='); var val = decodeURIComponent(param[1]).trim(); res[param[0]] = String(val); } } // return result return res; } };

Thank you so much! This worked.

I have one more concern, on click on cancel, it redirects to google, Please do you have a fix to avoid that. If I remove the redirect_url parameter it will throw error that it is required.

Regards

[toheeb-broadshift]

You can always handle that from event. As you can see from the code i only handled success event u can use else to close the webview and handle the failure by either redirecting to another screen or display error message to the user

[sokoya]

Oh! The event.status will still redirect to google.
I was able to close the webview by checking "canGoBaack"

Thank you bro, I appreciate!

[sokoya]

Lastly I just hope Flutterwave can fix the White Modal Screen issue. Cos this FlutterwaveInit method can not work for tokenized card