how to use paystack with react

1  import React from 'react';
2  import logo from './logo.svg';
3  import { PaystackButton } from 'react-paystack';
4  import './App.css';
5  
6  const config = {
7    reference: (new Date()).getTime().toString(),
8    email: "user@example.com",
9    amount: 20000,
10    publicKey: 'pk_test_dsdfghuytfd2345678gvxxxxxxxxxx',
11  };
12  
13  function App() {
14    // you can call this function anything
15    const handlePaystackSuccessAction = (reference) => {
16      // Implementation for whatever you want to do with reference and after success call.
17      console.log(reference);
18    };
19
20    // you can call this function anything
21    const handlePaystackCloseAction = () => {
22      // implementation for  whatever you want to do when the Paystack dialog closed.
23      console.log('closed')
24    }
25
26    const componentProps = {
27        ...config,
28        text: 'Paystack Button Implementation',
29        onSuccess: (reference) => handlePaystackSuccessAction(reference),
30        onClose: handlePaystackCloseAction,
31    };
32
33    return (
34      <div className="App">
35        <header className="App-header">
36          <img src={logo} className="App-logo" alt="logo" />
37          <p>
38            Edit <code>src/App.js</code> and save to reload.
39          </p>
40          <a
41            className="App-link"
42            href="https://reactjs.org"
43            target="_blank"
44            rel="noopener noreferrer"
45          >
46            Learn React
47          </a>
48        </header>
49        <PaystackButton {...componentProps} />
50      </div>
51    );
52  }
53  
54  export default App;

1yarn add react-paystack

1npm install react-paystack --save

1import React from 'react';
2import logo from './logo.svg';
3import { PaystackConsumer } from 'react-paystack';
4import './App.css';
5  
6  const config = {
7      reference: (new Date()).getTime().toString(),
8      email: "user@example.com",
9      amount: 20000,
10      publicKey: 'pk_test_dsdfghuytfd2345678gvxxxxxxxxxx',
11  };
12  
13  // you can call this function anything
14  const handleSuccess = (reference) => {
15    // Implementation for whatever you want to do with reference and after success call.
16    console.log(reference);
17  };
18
19  // you can call this function anything
20  const handleClose = () => {
21    // implementation for  whatever you want to do when the Paystack dialog closed.
22    console.log('closed')
23  }
24
25  function App() {
26      const componentProps = {
27          ...config,
28          text: 'Paystack Button Implementation',
29          onSuccess: (reference) => handleSuccess(reference),
30          onClose: handleClose
31      };
32  
33    return (
34      <div className="App">
35        <header className="App-header">
36          <img src={logo} className="App-logo" alt="logo" />
37          <p>
38            Edit <code>src/App.js</code> and save to reload.
39          </p>
40          <a
41            className="App-link"
42            href="https://reactjs.org"
43            target="_blank"
44            rel="noopener noreferrer"
45          >
46            Learn React
47          </a>
48        </header>
49        <PaystackConsumer {...componentProps} >
50          {({initializePayment}) => <button onClick={() => initializePayment(handleSuccess, handleClose)}>Paystack Consumer Implementation</button>}
51        </PaystackConsumer>
52      </div>
53    );
54  }
55  
56  export default App;

1  import React from 'react';
2  import logo from './logo.svg';
3  import { usePaystackPayment } from 'react-paystack';
4  import './App.css';
5  
6  const config = {
7      reference: (new Date()).getTime().toString(),
8      email: "user@example.com",
9      amount: 20000,
10      publicKey: 'pk_test_dsdfghuytfd2345678gvxxxxxxxxxx',
11  };
12  
13  // you can call this function anything
14  const onSuccess = (reference) => {
15    // Implementation for whatever you want to do with reference and after success call.
16    console.log(reference);
17  };
18
19  // you can call this function anything
20  const onClose = () => {
21    // implementation for  whatever you want to do when the Paystack dialog closed.
22    console.log('closed')
23  }
24
25  const PaystackHookExample = () => {
26      const initializePayment = usePaystackPayment(config);
27      return (
28        <div>
29            <button onClick={() => {
30                initializePayment(onSuccess, onClose)
31            }}>Paystack Hooks Implementation</button>
32        </div>
33      );
34  };
35  
36  function App() {
37    return (
38      <div className="App">
39        <header className="App-header">
40          <img src={logo} className="App-logo" alt="logo" />
41          <p>
42            Edit <code>src/App.js</code> and save to reload.
43          </p>
44          <a
45            className="App-link"
46            href="https://reactjs.org"
47            target="_blank"
48            rel="noopener noreferrer"
49          >
50            Learn React
51          </a>
52        </header>
53        <PaystackHookExample />
54      </div>
55    );
56  }
57  
58  export default App;