It shows blank white screen

[EzenwakaKaycee]

The payment modal shows blank white screen

[thecodecafe]

Hi @EzenwakaKaycee can you share your implementation? That can help!
Also what OS and device are you testing on?

[maniecodes]

<PayWithFlutterwave onRedirect={this.onRedirect} options={{ tx_ref: transactionId, authorization: "", customer: { email: user.email, }, amount: parseFloat(amount), currency: "NGN", payment_options: "card", }} customButton={() => ( <TouchableOpacity style={styles.payButton} onPress={this.makePayment} isBusy={this.isLoading} disabled={this.isDisabled} > <Text>Pay</Text> </TouchableOpacity> )} />

On click of the custom button shows blank screen or the modal won't show up.

[thecodecafe]

Hi, @EzenwakaKaycee and @Dev-Manny are you both still experiencing this?

[thecodecafe]

Closing this for now as there's been no feedback from the OP, please feel free to open if the issue persists.

[lesley88]

hi, @thecodecafe am experiencing the same. All seemed fine at first until I tried adding customization props under options.
Code

`
<PayWithFlutterwave
onRedirect={handleOnRedirect}
options={{
tx_ref: reference_generator,
authorization: 'Public_api',
customer: {
email: 'customer@email.com',
},
amount: 2000,
currency: 'NGN',
payment_options: 'card',
//started after adding bellow code
customizations: {
title: 'Pied Piper Payments',
description: 'Middleout isnt free. Pay the price',
logo: 'https://assets.piedpiper.com/logo.png',
},
}}
customButton={props => (

<Button
icon={props => }

    onPress={props.onPress}>

Checkout


)}
/>;

`

[Oluwaturheeb]

I am also experiencing the same thing here
this is the code that i use.
<PayWithFlutterwave onRedirect={param => console.log(param)} options={{ authorization: 'FLWPUBK_TEST-' tx_ref: ref(), amount: item.price, customer: user, currency: 'NGN', payment_options: 'card,banktransfer,ussd', customizations: { title: 'VenueHub', description: ``Upgrade to ${item.name}``, } }} customButton={(props) => ( <Button onPress={props.onPress} mode='contained' disabled={item.id === user?.sub ? true : props.disabled} labelStyle={{ color: item.id === user?.user?.sub ? Colors.grey500 : Colors.white, fontSize: 12 }}> {item.id === user?.user?.sub ? 'Active' : 'Activate'} </Button>) } />

Also this seem to work directly inside webview
const upgrade = async item => { let init = await FlutterwaveInit({ authorization: 'FLWPUBK_TEST-', tx_ref: ref(), amount: item.price, customer: user, currency: 'NGN', payment_options: 'card,bank,ussd', redirect_url: 'http://venuehub.ng', customizations: { title: 'VenueHub', description: Upgrade to ${item.name}`,
}
});

setUrl(init);

}
// calling the webview directly
<WebView source={{ uri: url }} />
`

while calling the flutterwave init is there a way one can bypass the redirectly url and just close the modal and handle the rest from withing the app!