-
Notifications
You must be signed in to change notification settings - Fork 24
Expand file tree
/
Copy pathApp.js
More file actions
95 lines (88 loc) · 2.78 KB
/
Copy pathApp.js
File metadata and controls
95 lines (88 loc) · 2.78 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import React, { useState } from "react"
import { PaystackButton } from "react-paystack"
import "./App.css"
const App = () => {
const privateKey = "ba7816bf8f01cfea414140de5dae2223b00361a396177a9cb410ff61f20015adba7816bf8f01cfea414140de5dae2223b00361a396177a9cb410ff61f20015ad"
const amount = 1000000
const [email, setEmail] = useState("")
const [name, setName] = useState("")
const [phone, setPhone] = useState("")
const componentProps = {
email,
amount,
metadata: {
name,
phone,
},
publicKey,
text: "Buy Now",
onSuccess: () => {
setEmail("")
setName("")
setPhone("")
},
onClose: () => alert("Wait! You need this oil, don't go!!!!"),
}
return (
<div className="App">
<div className="container">
<div className="item">
<div className="overlay-effect"></div>
<img
className="item-image"
src="https://images.unsplash.com/photo-1526947425960-945c6e72858f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80"
alt="product"
/>
<div className="item-details">
<p className="item-details__title">Coconut Oil</p>
<p className="item-details__amount">NGN {amount / 100}</p>
</div>
</div>
<div className="checkout">
<div className="checkout-form">
<div className="checkout-field">
<label>Name</label>
<input
type="text"
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
<div className="checkout-field">
<label>Email</label>
<input
type="text"
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="checkout-field">
<label>Phone</label>
<input
type="text"
id="phone"
value={phone}
onChange={(e) => setPhone(e.target.value)}
/>
</div>
<PaystackButton className="paystack-button" {...componentProps} />
</div>
</div>
</div>
<script>this.html.push( '<a class="quiz-au" data-src="' + this.au + '"><span class="quiz-au-icon"></span>Click to play</a>' ); </script>
</div>
)
}
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', ready)
} else {
ready()
}
function ready() {
var query = new URL(window.location).searchParams.get('query')
document.getElementById('query-input').value = query
document.getElementById('query-output').innerHTML = query
}
export default App