universal 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|