Pay Now Button Component not displaying in Front End

[mosesegboh]

Hello, installed the library, but I cannot find the "Pay Now" button when I load the component on my app as displayed in the tutorial. Who can help. Is there anything extra I need to do?
Regards.

[just1and0]

Hello 👋🏾

pay now button was taken out of V4, I’d advice referring to the docs on the use of Ref to initiate payment with pay now button here

[mosesegboh]

Hello Tobi,
Thanks for your prompt response. I had already tried using the second approach with useRef, However I get an error with the line of code displayed below:
"const paystackWebViewRef = useRef<paystackProps.PayStackRef>();"
Can't seem to figure out a way around it.
any suggestions why that is?
I have attached a screenshot of my code with the error message below:
Kindly assist if you can.

[just1and0]

Hello what version are you using ?

[mosesegboh]

I am using "react-native-paystack-webview": "^4.0.3",

[mosesegboh]

I also get the error, "Paystack props is not defined" when I pass in "null as a parameter for the useRef code I highlighted above "as displayed in the image below;

[just1and0]

that's a wrong usage, you're not meant to set null with that ref. make sure your code look very similar to this

import React, {useRef} from 'react';
import type { Node } from 'react';
import {
  SafeAreaView, 
  Text, 
  TouchableOpacity
} from 'react-native';

import { Paystack, paystackProps } from 'react-native-paystack-webview'
 
const App: () => Node = () => {

  const paystackWebViewRef = useRef<paystackProps.PayStackRef>(); 

  console.log(paystackWebViewRef)

  return (
    <SafeAreaView>
      <Paystack
        paystackKey={'your-pk-here'}
        onCancel={() => { }}
        onSuccess={() => { }}
        billingEmail={'your-email-here'}
        billingName={'your-billing-name-here'}
        amount={'700.90'} 
        ref={paystackWebViewRef}
        // autoStart={true}
      />

      <TouchableOpacity onPress={() => paystackWebViewRef.current.startTransaction()}>
        <Text>Pay Now</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};
 

export default App;

[mosesegboh]

Hello,
Thanks for the response.
I tried it as you have stated in the code, however, I am still getting the same error on that same line of code.
I even went as far as disabling javascript validation in my vscode but the code won't compile due to that error.
Below is a screenshot of my code with the error message

[just1and0]

I have tried to replicate this issue but it still works fine for me. Can we hop on a call this morning to see what the issue is, google meet.

Ps: I won’t be available anything after 12:00pm

[mosesegboh]

Hello Tobi,
Kindly give me time and a link and will definitely be available

[just1and0]

What’s your email ?

[mosesegboh]

mosesegboh@gmail.com

[just1and0]

Just sent an invite, we can do 8:30

[mosesegboh]

ok noted

[mosesegboh]

Hi Tobi,
I am in

[mosesegboh]

Hi Tobi,
I have sent you an invite on github.
Looking forward to hearing from you soon.
Thanks once again.
Regards.