universal 0.1.1 → 0.1.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +3 -3
- data/_includes/get.it.html +159 -9
- data/_includes/js.html +3 -7
- data/assets/css/custom.css +83 -79
- data/assets/js/stripe.form-v2.js +101 -0
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 0c76f9ca8f3412025c35ecdbed849a83e4c9cf582b59bc013e569cb6d3d297ce
|
|
4
|
+
data.tar.gz: 2ab540f9df513faf5fdd2b78575b154ed2dec3dca826cbaad08ebb21a08974dd
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 429d105c8bf4084b8e10482c9ed6196cdfab275ee9c2d65ee7383e45f98b4663d77549377610ecf0c3b845636103cd5b1f78afcb097270094814a32a0d6c8694
|
|
7
|
+
data.tar.gz: 07c5617b85de508761fd93b417fd50b254717046ef4b9152dd0eff087693c782b4f016d651668130e9d90e2a3c8ea0f36ea9fc160ccf548f1b0d2339d86f63b5
|
data/README.md
CHANGED
|
@@ -12,13 +12,13 @@ TODO: Delete this and the text above, and describe your gem
|
|
|
12
12
|
Add this line to your Jekyll site's `Gemfile`:
|
|
13
13
|
|
|
14
14
|
```ruby
|
|
15
|
-
gem "universal
|
|
15
|
+
gem "universal"
|
|
16
16
|
```
|
|
17
17
|
|
|
18
18
|
And add this line to your Jekyll site's `_config.yml`:
|
|
19
19
|
|
|
20
20
|
```yaml
|
|
21
|
-
theme: universal
|
|
21
|
+
theme: universal
|
|
22
22
|
```
|
|
23
23
|
|
|
24
24
|
And then execute:
|
|
@@ -27,7 +27,7 @@ And then execute:
|
|
|
27
27
|
|
|
28
28
|
Or install it yourself as:
|
|
29
29
|
|
|
30
|
-
$ gem install universal
|
|
30
|
+
$ gem install universal
|
|
31
31
|
|
|
32
32
|
## Usage
|
|
33
33
|
|
data/_includes/get.it.html
CHANGED
|
@@ -1,10 +1,160 @@
|
|
|
1
|
-
<
|
|
2
|
-
<div
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
<section>
|
|
2
|
+
<div id="content">
|
|
3
|
+
<div class="row">
|
|
4
|
+
<div id="get-it">
|
|
5
|
+
<div class="container">
|
|
6
|
+
<div class="col-md-8 col-sm-12">
|
|
7
|
+
<h3>Vous voulez ce site pour vous ?</h3>
|
|
8
|
+
</div>
|
|
9
|
+
<div class="col-md-4 col-sm-12">
|
|
10
|
+
<button class="btn btn-lg btn-warning" data-parent="#accordionThree" data-toggle="collapse" href="#collapse3a"> Commandez !</button>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
|
14
|
+
<div class="container">
|
|
15
|
+
<div class="panel-group accordion" id="accordionThree">
|
|
16
|
+
<div class="panel panel-default">
|
|
17
|
+
<div id="collapse3a" class="panel-collapse collapse">
|
|
18
|
+
<div class="panel-body">
|
|
19
|
+
<script src="https://js.stripe.com/v3/"></script>
|
|
20
|
+
|
|
21
|
+
<div class="col-md-9 clearfix" id="checkout">
|
|
22
|
+
|
|
23
|
+
<div class="box">
|
|
24
|
+
<form id="payment-form">
|
|
25
|
+
<input type="hidden" name="token" />
|
|
26
|
+
<input type="hidden" name="stamplayId" value="{{ stamplayId }}"/>
|
|
27
|
+
|
|
28
|
+
<div class="row">
|
|
29
|
+
<div class="col-sm-6">
|
|
30
|
+
<div class="form-group">
|
|
31
|
+
<label for="firstname">Prénom</label>
|
|
32
|
+
<input type="text" class="form-control" id="firstname">
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="col-sm-6">
|
|
36
|
+
<div class="form-group">
|
|
37
|
+
<label for="lastname">Nom</label>
|
|
38
|
+
<input type="text" class="form-control" id="lastname">
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
<!-- /.row -->
|
|
43
|
+
|
|
44
|
+
<div class="row">
|
|
45
|
+
<div class="col-sm-6">
|
|
46
|
+
<div class="form-group">
|
|
47
|
+
<label for="company">Société</label>
|
|
48
|
+
<input type="text" class="form-control" id="company">
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
<div class="col-sm-6">
|
|
52
|
+
<div class="form-group">
|
|
53
|
+
<label for="street">Email</label>
|
|
54
|
+
<input type="text" class="form-control" id="email">
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
<!-- /.row -->
|
|
59
|
+
|
|
60
|
+
<div class="row">
|
|
61
|
+
<div class="col-sm-6">
|
|
62
|
+
<div class="form-group">
|
|
63
|
+
<label for="phone">Rue</label>
|
|
64
|
+
<input type="text" class="form-control" id="street">
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="col-sm-6 col-md-3">
|
|
68
|
+
<div class="form-group">
|
|
69
|
+
<label for="zip">Code postal</label>
|
|
70
|
+
<input type="text" class="form-control" id="zip">
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="col-sm-6 col-md-3">
|
|
74
|
+
<div class="form-group">
|
|
75
|
+
<label for="city">Ville</label>
|
|
76
|
+
<input type="text" class="form-control" id="city">
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
<div class="row">
|
|
81
|
+
<div class="col-sm-12">
|
|
82
|
+
<div class="form-group">
|
|
83
|
+
<p>
|
|
84
|
+
Votre paiement est sécurisé par notre partenaire Stripe. Vos informations confidentielles ne nous sont pas accessibles et sont conservées sur les serveurs sécurisés de Stripe.
|
|
85
|
+
</p>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
<div class="row">
|
|
90
|
+
<div class="col-sm-12">
|
|
91
|
+
<div class="form-group">
|
|
92
|
+
<label for="card">Carte bancaire</label>
|
|
93
|
+
<div id="card-element" class="form-control no-padding"></div>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
<button class="btn btn-template-main" type="submit">Payer</button>
|
|
98
|
+
<div class="outcome">
|
|
99
|
+
<div class="error"></div>
|
|
100
|
+
<div class="success">
|
|
101
|
+
Success! Your Stripe token is <span class="token"></span>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</form>
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
<!-- /.box -->
|
|
110
|
+
|
|
111
|
+
<!-- /.col-md-9 -->
|
|
112
|
+
|
|
113
|
+
<div class="col-md-3">
|
|
114
|
+
|
|
115
|
+
<div class="box" id="order-summary">
|
|
116
|
+
<div class="box-header">
|
|
117
|
+
<h3>Résumé</h3>
|
|
118
|
+
</div>
|
|
119
|
+
<p class="text-muted">Dés votre commande effectuée, vous recevrez un formulaire vous permettant de modifier le contenu de votre site.</p>
|
|
120
|
+
|
|
121
|
+
<div class="table-responsive">
|
|
122
|
+
<table class="table">
|
|
123
|
+
<tbody>
|
|
124
|
+
<tr>
|
|
125
|
+
<td>Création du site</td>
|
|
126
|
+
<th>400.00€</th>
|
|
127
|
+
</tr>
|
|
128
|
+
<tr>
|
|
129
|
+
<td>Hébergement</td>
|
|
130
|
+
<th>Offert la première année</th>
|
|
131
|
+
</tr>
|
|
132
|
+
<tr>
|
|
133
|
+
<td>Sous total</td>
|
|
134
|
+
<th>400,00€</th>
|
|
135
|
+
</tr>
|
|
136
|
+
<tr>
|
|
137
|
+
<td>TVA 20%</td>
|
|
138
|
+
<th>80,00€</th>
|
|
139
|
+
</tr>
|
|
140
|
+
<tr class="total">
|
|
141
|
+
<td>Total</td>
|
|
142
|
+
<th>480.00€</th>
|
|
143
|
+
</tr>
|
|
144
|
+
</tbody>
|
|
145
|
+
</table>
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
</div>
|
|
149
|
+
|
|
150
|
+
</div>
|
|
151
|
+
<!-- /.col-md-3 -->
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
5
159
|
</div>
|
|
6
|
-
|
|
7
|
-
<button class="btn btn-lg btn-warning" id="stripe"> Commandez !</button>
|
|
8
|
-
</div>
|
|
9
|
-
</div>
|
|
10
|
-
</div>
|
|
160
|
+
</section>
|
data/_includes/js.html
CHANGED
|
@@ -12,13 +12,9 @@
|
|
|
12
12
|
|
|
13
13
|
<!-- owl carousel -->
|
|
14
14
|
<script src="assets/js/owl.carousel.min.js"></script>
|
|
15
|
-
|
|
16
|
-
<!-- stripe -->
|
|
17
|
-
|
|
18
|
-
<script src="https://checkout.stripe.com/checkout.js"></script>
|
|
19
|
-
<script src="assets/js/stripe.checkout.js"></script>"
|
|
20
|
-
|
|
21
|
-
<!-- stripe end -->
|
|
15
|
+
|
|
16
|
+
<!-- stripe form -->
|
|
17
|
+
<script src="assets/js/stripe.form-v2.js"></script>
|
|
22
18
|
|
|
23
19
|
<script>
|
|
24
20
|
(function(i, s, o, g, r, a, m) {
|
data/assets/css/custom.css
CHANGED
|
@@ -1,80 +1,84 @@
|
|
|
1
|
-
form {
|
|
2
|
-
margin-bottom: 20px;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
.label {
|
|
6
|
-
font-family: "Roboto", Helvetica, Arial, sans-serif;
|
|
7
|
-
font-weight: normal;
|
|
8
|
-
text-transform: uppercase;
|
|
9
|
-
letter-spacing: 0.08em;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
label {
|
|
13
|
-
font-weight: normal;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
label > span {
|
|
17
|
-
float: left;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.field {
|
|
21
|
-
-webkit-box-shadow: none;
|
|
22
|
-
box-shadow: none;
|
|
23
|
-
border-radius: 0;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.field:focus {
|
|
27
|
-
border-color: #467fbf;
|
|
28
|
-
outline: 0;
|
|
29
|
-
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(70, 127, 191, 0.6);
|
|
30
|
-
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(70, 127, 191, 0.6);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.field.StripeElement--focus {
|
|
34
|
-
border-color: #F99A52;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
button {
|
|
38
|
-
color: #467fbf;
|
|
39
|
-
background-color: #ffffff;
|
|
40
|
-
border-color: #467fbf;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
button:focus {
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
button:active {
|
|
47
|
-
background: #467fbf;
|
|
48
|
-
color: #ffffff;
|
|
49
|
-
border-color: #467fbf;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.outcome {
|
|
53
|
-
float: left;
|
|
54
|
-
width: 100%;
|
|
55
|
-
padding-top: 8px;
|
|
56
|
-
min-height: 20px;
|
|
57
|
-
text-align: center;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.success, .error {
|
|
61
|
-
display: none;
|
|
62
|
-
font-size: 13px;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.success.visible, .error.visible {
|
|
66
|
-
display: inline;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.error {
|
|
70
|
-
color: #E4584C;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.success {
|
|
74
|
-
color: #F8B563;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.success .token {
|
|
78
|
-
font-weight: 500;
|
|
79
|
-
font-size: 13px;
|
|
1
|
+
form {
|
|
2
|
+
margin-bottom: 20px;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.label {
|
|
6
|
+
font-family: "Roboto", Helvetica, Arial, sans-serif;
|
|
7
|
+
font-weight: normal;
|
|
8
|
+
text-transform: uppercase;
|
|
9
|
+
letter-spacing: 0.08em;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
label {
|
|
13
|
+
font-weight: normal;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
label > span {
|
|
17
|
+
float: left;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.field {
|
|
21
|
+
-webkit-box-shadow: none;
|
|
22
|
+
box-shadow: none;
|
|
23
|
+
border-radius: 0;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.field:focus {
|
|
27
|
+
border-color: #467fbf;
|
|
28
|
+
outline: 0;
|
|
29
|
+
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(70, 127, 191, 0.6);
|
|
30
|
+
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(70, 127, 191, 0.6);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.field.StripeElement--focus {
|
|
34
|
+
border-color: #F99A52;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
button {
|
|
38
|
+
color: #467fbf;
|
|
39
|
+
background-color: #ffffff;
|
|
40
|
+
border-color: #467fbf;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
button:focus {
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
button:active {
|
|
47
|
+
background: #467fbf;
|
|
48
|
+
color: #ffffff;
|
|
49
|
+
border-color: #467fbf;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.outcome {
|
|
53
|
+
float: left;
|
|
54
|
+
width: 100%;
|
|
55
|
+
padding-top: 8px;
|
|
56
|
+
min-height: 20px;
|
|
57
|
+
text-align: center;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.success, .error {
|
|
61
|
+
display: none;
|
|
62
|
+
font-size: 13px;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.success.visible, .error.visible {
|
|
66
|
+
display: inline;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.error {
|
|
70
|
+
color: #E4584C;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.success {
|
|
74
|
+
color: #F8B563;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.success .token {
|
|
78
|
+
font-weight: 500;
|
|
79
|
+
font-size: 13px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.no-padding {
|
|
83
|
+
padding: 0;
|
|
80
84
|
}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
var stripe = Stripe('pk_test_NIFiGhJBpoH8kDhbdLTx7TPv');
|
|
2
|
+
var elements = stripe.elements();
|
|
3
|
+
|
|
4
|
+
var card = elements.create('card', {
|
|
5
|
+
hidePostalCode: true,
|
|
6
|
+
style: {
|
|
7
|
+
base: {
|
|
8
|
+
iconColor: '#F99A52',
|
|
9
|
+
color: '#32315E',
|
|
10
|
+
lineHeight: '34px',
|
|
11
|
+
'::placeholder': {
|
|
12
|
+
color: '#CFD7DF',
|
|
13
|
+
padding:0,
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
card.mount('#card-element');
|
|
19
|
+
|
|
20
|
+
function generatePassword() {
|
|
21
|
+
var length = 8,
|
|
22
|
+
charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",
|
|
23
|
+
retVal = "";
|
|
24
|
+
for (var i = 0, n = charset.length; i < length; ++i) {
|
|
25
|
+
retVal += charset.charAt(Math.floor(Math.random() * n));
|
|
26
|
+
}
|
|
27
|
+
return retVal;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
function setOutcome(result) {
|
|
31
|
+
var successElement = document.querySelector('.success');
|
|
32
|
+
var errorElement = document.querySelector('.error');
|
|
33
|
+
successElement.classList.remove('visible');
|
|
34
|
+
errorElement.classList.remove('visible');
|
|
35
|
+
|
|
36
|
+
if (result.token) {
|
|
37
|
+
|
|
38
|
+
Stamplay.init('parsiweb');
|
|
39
|
+
|
|
40
|
+
var userData = {
|
|
41
|
+
email : document.getElementById('email').value,
|
|
42
|
+
password : generatePassword(),
|
|
43
|
+
userId: document.getElementById('stamplayId').value
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
Stamplay.User.signup(userData)
|
|
47
|
+
.then(function(user) {
|
|
48
|
+
Stamplay.Stripe.createCreditCard(user.id, result.token.id)
|
|
49
|
+
.then(function(creditCard) {
|
|
50
|
+
Stamplay.Stripe.createCustomer(user.id)
|
|
51
|
+
.then(function(res) {
|
|
52
|
+
|
|
53
|
+
// success
|
|
54
|
+
// Appel sur le webhook avec les data en question
|
|
55
|
+
Stamplay.Webhook("parsiweb_payment")
|
|
56
|
+
.post({
|
|
57
|
+
firstname: document.getElementById('firstname').value
|
|
58
|
+
lastname: document.getElementById('lastname').value,
|
|
59
|
+
user.id,
|
|
60
|
+
organisation_name: document.getElementById('company').value,
|
|
61
|
+
address: document.getElementById('street').value,
|
|
62
|
+
city: document.getElementById('city').value,
|
|
63
|
+
zip: document.getElementById('zip').value,
|
|
64
|
+
})
|
|
65
|
+
.then(function(res) {
|
|
66
|
+
// success
|
|
67
|
+
}, function(err) {
|
|
68
|
+
// error
|
|
69
|
+
})
|
|
70
|
+
}, function(err) {
|
|
71
|
+
// error
|
|
72
|
+
})
|
|
73
|
+
}, function(err){
|
|
74
|
+
// error
|
|
75
|
+
})
|
|
76
|
+
}, function(err) {
|
|
77
|
+
// error
|
|
78
|
+
})
|
|
79
|
+
} else if (result.error) {
|
|
80
|
+
errorElement.textContent = result.error.message;
|
|
81
|
+
errorElement.classList.add('visible');
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
card.on('change', function(event) {
|
|
86
|
+
setOutcome(event);
|
|
87
|
+
});
|
|
88
|
+
|
|
89
|
+
document.querySelector('form').addEventListener('submit', function(e) {
|
|
90
|
+
e.preventDefault();
|
|
91
|
+
var options = {
|
|
92
|
+
firstname: document.getElementById('firstname').value,
|
|
93
|
+
lastname: document.getElementById('lastname').value,
|
|
94
|
+
name: firstname + " " + lastname,
|
|
95
|
+
address_line1: document.getElementById('company').value,
|
|
96
|
+
address_line2: document.getElementById('street').value,
|
|
97
|
+
address_city: document.getElementById('city').value,
|
|
98
|
+
address_zip: document.getElementById('zip').value,
|
|
99
|
+
};
|
|
100
|
+
stripe.createToken(card, options).then(setOutcome);
|
|
101
|
+
});
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: universal
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Ondrej Svestka
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2017-11-
|
|
11
|
+
date: 2017-11-21 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -134,6 +134,7 @@ files:
|
|
|
134
134
|
- assets/js/jquery.parallax-1.1.3.js
|
|
135
135
|
- assets/js/owl.carousel.min.js
|
|
136
136
|
- assets/js/stripe.checkout.js
|
|
137
|
+
- assets/js/stripe.form-v2.js
|
|
137
138
|
- assets/js/stripe.form.js
|
|
138
139
|
- assets/js/waypoints.min.js
|
|
139
140
|
homepage: https://bootstrapious.com/p/universal-business-e-commerce-template
|