-
Notifications
You must be signed in to change notification settings - Fork 37
/
payment.vue
165 lines (155 loc) · 9.22 KB
/
payment.vue
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<template>
<div>
<div class="container">
<div class="row">
<div class="col-md-12 mt-2 mb-2">
<div class="card">
<div class="row">
<aside class="col-sm-5 border-right">
<img
src="storage/images/mug.gif"
class="img-fluid mt-5"
>
</aside>
<aside class="col-sm-7">
<article class="card-body p-3">
<h3 class="title mb-3">Payment Template</h3>
<p class="price-detail-wrap">
<span class="price h3 text-warning">
<span class="currency">US $</span><span class="num">5</span>
</span>
</p>
<dl class="item-property">
<dt>Description</dt>
<dd>
<p>
This is an example template for a simple product page. To recieve payments in your VIPFS app, I recommend that you use <a href="https://metamask.io/">MetaMask</a>. This Chrome/Firefox extension injects an Ethereum provider into the browser tab.
</p>
<p>
You can then use the method <code>this.$root.createRequestTransaction(0.037)</code> to prompt the user into sending an Ethereum transaction directly from their browser to your Ethereum account. You can find the code for this template in <code>vipfs/src/components/payment.vue</code>. You can easily modify the code to make a fully decentralised crypto-based e-commerce store.
</p>
<p>
<strong>Note:</strong> If you click the Buy Now button you will be prompted to pay 0.037 ETH (~$5 USD) to my account as a donation, you will not recieve a product.
</p>
</dd>
</dl>
<hr>
<div class="row">
<div class="col-md-4">
<dl class="param param-feature">
<dt>Model#</dt>
<dd>12345611</dd>
</dl>
</div>
<div class="col-md-4">
<dl class="param param-feature">
<dt>Color</dt>
<dd>Black and white</dd>
</dl>
</div>
<div class="col-md-4">
<dl class="param param-feature">
<dt>Delivery</dt>
<dd>USA, Japan and Europe</dd>
</dl>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-5">
<dl class="param param-inline">
<dt>Quantity:</dt>
<dd>
<select
class="form-control form-control-sm"
style="width:70px;"
v-model="quantity"
>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</dd>
</dl>
</div>
<div class="col-sm-7">
<dl class="param param-inline">
<dt>Size:</dt>
<dd>
<label class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="size"
value="s"
v-model="size"
>
<span class="form-check-label">S</span>
</label>
<label class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="size"
value="m"
v-model="size"
>
<span class="form-check-label">M</span>
</label>
<label class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="size"
value="l"
v-model="size"
>
<span class="form-check-label">L</span>
</label>
<label class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="size"
value="xl"
v-model="size"
>
<span class="form-check-label">XL</span>
</label>
</dd>
</dl>
</div>
</div>
<hr>
<button
@click="buyNow"
class="btn btn-lg btn-primary"
>Buy Now</button>
</article>
</aside>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data: () => ({
quantity: 1,
size: 'l'
}),
mounted () {},
methods: {
buyNow () {
this.$root
.createRequestTransaction(0.037)
.then(() => this.$notify('Transaction Successful!'))
.catch(err => console.error(err))
}
}
}
</script>