Loading Screen

[code-wizard]

I tried using this library with react-native expo. After setting up all the configuration when I load the webview it keeps showing the loader without any feedback. This is the example I used

<View style={{flex: 1}}>
        <PaystackWebView
          showPayButton={false}
          paystackKey="MY_OWN_KEY"
          amount={120000}
          billingEmail="paystackwebview@something.com"
          billingMobile="09787377462"
          billingName="Oluwatobi Shokunbi"
          ActivityIndicatorColor="green"
          SafeAreaViewContainer={{marginTop: 5}}
          SafeAreaViewContainerModal={{marginTop: 5}}
          onCancel={() => {  alert('cancelled'); }}
          onSuccess={() => {  alert('success'); }}
           ref={childRef}
        /> <TouchableOpacity onPress={()=> childRef.current.StartTransaction()}>
             <Text>pay now</Text>
                        <TouchableOpacity/>
      </View>

[just1and0]

Hi! could your share the react-native version used? and any other version number used for your project so i can test on my end?

[code-wizard]

@just1and0 thanks for the swift response react-native: 0.59.8 expo: ^35.0.0 React-Native-Paystack-WebView: 3.0.3

[Somtozech]

having the same issue too

[rebirthtobi]

I don't think this is particular to expo,

I see a blank screen on react-native: 0.61.5 React-Native-Paystack-WebView: 3.0.4

[rebirthtobi]

I don't think this is particular to expo,

I see a blank screen on react-native: 0.61.5 React-Native-Paystack-WebView: 3.0.4

i figure out that i was passing a null as email not knowing that it is required. it will be better if this is specified in the readMe

[GideonAgboba]

please can some one help with the requirements for react-native-paystack-webview 3.0.7 to run perfectly with expo

[just1and0]

could you use v3.0.1 of React-Native-Paystack-WebView instead?

[habibkayode123]

I am also seeing blank screen and I have try v3.0.1

[just1and0]

What’s your React Native and react native webview version ?

On Thu, 14 May 2020 at 10:14 AM, Popooola Habib notifications@github.com wrote:

I am also seeing blank screen and I have try v3.0.1

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/just1and0/React-Native-Paystack-WebView/issues/13#issuecomment-628506828, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEDTHN7GDFBKVR2RNYWEQ4LRROY7HANCNFSM4LUIL5TA .

[Remig9]

am parsing in my refNumber but getting another number after successful payment , pls help

[dayaki]

@just1and0 mine is stuck on white blank screen after the loading indicator. React Native v0.61 and react native webview 8.1.1

[Somtozech]

@just1and0 mine is stuck on white blank screen after the loading indicator. React Native v0.61 and react native webview 8.1.1

Sometimes this happens when the data you passed to the modal is undefined. Make sure whatever you passing is not undefined

[dayaki]

Everything was hard-coded to test, and it still fails. Maybe @just1and0 should indicate the required fields

[Oguntoye]

@just1and0 .. The white screen seems to be a general problem.. I've tried both libraries suggested by paystack for react native...None seems to works as expected.

[dayaki]

I have been able to modify this package to make it work with latest expo and webview, will try share soon

[aripuzo]

I stuck here too, blank screen after hardcoding prop values

[saladinjake]

i was able to get it out of the blank screen but i get a message we could not start this transaction. this transaction is either invalid or already completed. please confirm that the link is correct . what do i do to make this work? what link is the api asking about? please help!!!!

[Remig9]

You have to change the reference id

On Thu, Jun 4, 2020, 5:33 PM Juwa Victor notifications@github.com wrote:

i was able to get it out of the blank screen but i get a message we could not start this transaction. this transaction is either invalid or already completed. please confirm that the link is correct

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/just1and0/React-Native-Paystack-WebView/issues/13#issuecomment-638968301, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALF7QKS5RDZ6AB2KYGG32A3RU7EF5ANCNFSM4LUIL5TA .

[saladinjake]

i autogenerate a ref id all the time

[saladinjake]

i i use a shortid library. but it still throws the same exception error. here is my code snippet

<PaystackWebView buttonText="Pay Now" showPayButton={true} paystackKey="key is publick key" amount={12000} billingEmail="juwavictor@gmail.com" billingMobile="08068291106" billingName="mongodbname-for my client-is not known" ActivityIndicatorColor="green" SafeAreaViewContainer={{marginTop: 25}} SafeAreaViewContainerModal={{marginTop: 25}} onCancel={() => { alert('cancelled'); }} onSuccess={() => { alert('success'); }} autoStart={false} refNumber={shortid.generate()} />

[saladinjake]

please i need help. how do i get out of this? is there a code snippet to solve these reference id?

[Remig9]

Comment the refNumber out and see if it works

On Thu, Jun 4, 2020, 6:24 PM Juwa Victor notifications@github.com wrote:

i i use a shortid library. but it still throws the same exception error. here is my code snippet

<PaystackWebView buttonText="Pay Now" showPayButton={true} paystackKey="key is publick key" amount={12000} billingEmail=" juwavictor@gmail.com" billingMobile="08068291106" billingName="mongodbname-for my client-is not known" ActivityIndicatorColor="green" SafeAreaViewContainer={{marginTop: 25}} SafeAreaViewContainerModal={{marginTop: 25}} onCancel={() => { alert('cancelled'); }} onSuccess={() => { alert('success'); }} autoStart={false} refNumber={shortid.generate()} />

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/just1and0/React-Native-Paystack-WebView/issues/13#issuecomment-638994153, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALF7QKSI5TBXJBW7JWFKIMTRU7KDHANCNFSM4LUIL5TA .

[saladinjake]

OK

[saladinjake]

Trying it out just now

[saladinjake]

same issue. didnt work for me

[saladinjake]

could not start this transaction. am using version 3 as requested

[rebirthtobi]

can you log the error in onLoadEnd

Also can you create an expo snack so as to reproduce the error? snack.expo.io

[saladinjake]

Sorry bout the delay .Cant get it to show on the snack.expo.io . here https://snack.expo.io/@saladinjake/great-chips

[rebirthtobi]

Sorry bout the delay .Cant get it to show on the snack.expo.io . here https://snack.expo.io/@saladinjake/great-chips

Put your code in there so as to help debug, let us know after

[saladinjake]

ok

[saladinjake]

https://snack.expo.io/@saladinjake/paystack-wahala . i was able to reproduce the error on snack. its not even showing the form. just keeps loading

[saladinjake]

Goodmorning guys. Can this be resolved? https://snack.expo.io/@saladinjake/paystack-wahala. tried all night to find a fix. it starts off with a loading screen but the form doesnt show up rather this transaction is either invalid or completed. i check my dashboard for any such transaction but i see nothing regarding the transaction. and i cant get to log the onLoadEnd function. i tried to reproduce the error on snack but it just keeps on loading without the error message got from my andriod when i run it locally from the generated qr code

[saladinjake]

still showing could not start transaction

[walexanderos]

Hello Everybody,

For anyone experiencing the blank screen issue after the indicator, i resolve mine with the following steps:

In the above screen shot from the RN PAYSTACK WEBVIEW module file, channel prop (props.channels) is being assigned to the paystack channels configuration option which accepts only array values (['card', 'bank', 'ussd', 'qr', 'mobile_money']).

So channel props doesn't have a default value neither does it have a user defined value. All i had to do was to assign a channel value and it worked.

For some unknown reason, i was getting a "Transcation could not start" but after assigning props value, but i couldn't just continue troubleshooting so i had to assign values directly to the config options (currency, channels) in the module file.

I hope this can be of help to others too.

File Location: $....\node_modules\react-native-paystack-webview\index.js

[just1and0]

Thank @walexanderos for noting this, I've made changes and included it in V3.0.8, i have also tested it on expo and it works fine on my end. Do try it out and let me know if the blank screen still comes up.

[just1and0]

@all-contributors please add @walexanderos for bug

[allcontributors[bot]]

@just1and0

I've put up a pull request to add @walexanderos! :tada:

[walexanderos]

Thank @walexanderos for noting this, I've made changes and included it in V3.0.8, i have also tested it on expo and it works fine on my end. Do try it out and let me know if the blank screen still comes up.

Hello @just1and0 , i just tested and it worked fine. But i will suggest you update your documentation to inform users about specifying channel option since the default channel in the module is only card

Thank you

[just1and0]

@walexanderos Noted, but also keep in mind this is an open-source project, you could just fork the repo and make changes to the project and send a PR, it'll be better so you get recognition for your contributions.

[just1and0]

also do check out the contribution guidelines before making changes.

[walexanderos]

@just1and0 Alright, i will just do that then. Thank you

[saladinjake]

followed your instructions still didnt start transaction

[saladinjake]

using v.3.0.8 and still same issue

[walexanderos]

@saladinjake, please upgrade to the recent version (3.0.9) . Also can I have a view of how you are using the package

[saladinjake]

// <View style={{flex: 1}}> // <PaystackWebView // buttonText="Pay Now" // showPayButton={false} // paystackKey="public key" // amount={120000} // billingEmail="paystackwebview@something.com" // billingMobile="09787377462" // billingName="Oluwatobi Shokunbi" // channels={JSON.stringify(['card','ussd'])} // ActivityIndicatorColor="green" // SafeAreaViewContainer={{marginTop: 5}} // SafeAreaViewContainerModal={{marginTop: 5}} // onCancel={() => { // alert('cancelled'); // }} // onSuccess={() => { // alert('success'); // }} // autoStart={true} // /> //

[saladinjake]

if i create a linking out side react-native and say i open the url to a react page on a live server by redirecting a click event a page on the web it works. but on the react native environment it throws the same error

[walexanderos]

@saladinjake i created a snack demo which works fine with using v3.0.9 of the package

[saladinjake]

it does not start transaction tried it on my device

[saladinjake]

seems to me paystack api wont let this transaction start. i read the docs and found a clue to make it work and it scaled thru. thanks for all the digging deep paystack-webview made me do.. i made it work with no issues this time. try making sure the webview renders the paystack-webview once and not multiple times. find a way to communicate to a dedicated server having the paystack code that runs when u inject into the script loaded into webview and .... just make it work. thanks guys. good luck