Skip to content

Commit 0d4162f

Browse files
polo2ropolo2ro
committed
Credit card menu
1 parent 7ef1364 commit 0d4162f

File tree

13 files changed

+108
-53
lines changed

13 files changed

+108
-53
lines changed

‎.tags

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@
66
!_TAG_PROGRAM_VERSION 5.9~svn20110310 //
77
angular bower.json /^ "angular": "~1.5.9",$/;" f
88
angular-cookies bower.json /^ "angular-cookies": "~1.5.9",$/;" f
9-
angular-local-storage bower.json /^ "angular-local-storage": "~0.5.2"$/;" f
9+
angular-local-storage bower.json /^ "angular-local-storage": "~0.5.2",$/;" f
1010
angular-strap bower.json /^ "angular-strap": "~2.3.9",$/;" f
11+
card bower.json /^ "card": "~2.2.1"$/;" f
1112
createTagForLang addDocVersions.sh /^createTagForLang()$/;" f
1213
dependencies bower.json /^ "dependencies": {$/;" f
1314
dependencies package.json /^ "dependencies": {$/;" f

‎bower.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"angular-strap": "~2.3.9",
1111
"mark.js": "~8.4.0",
1212
"flickity": "~2.0.5",
13-
"angular-local-storage": "~0.5.2"
13+
"angular-local-storage": "~0.5.2",
14+
"card": "~2.2.1"
1415
}
1516
}

‎themes/gadael/languages/en.yml

+4-2
Original file line numberDiff line numberDiff line change
@@ -228,10 +228,10 @@ creditcard:
228228
title: 'Credit card settings'
229229
paymentday: 'Your payout date is the {{session.paymentDay}} of each month.'
230230
savebutton: 'Save'
231-
freeplan: 'Payment informations are not required for your plan.'
232231
number: 'Payment card number'
232+
fullname: 'Full name'
233233
cvc: 'CVC code'
234-
exp_month_year: 'Expiry month and year'
234+
exp_month_year: 'Expiry month/year'
235235
social:
236236
github: 'Github'
237237
bug: 'Report a bug'
@@ -281,3 +281,5 @@ affiliation:
281281
status: 'I want to receive a report of my affiliation'
282282
email: 'My email address'
283283
button: 'Send'
284+
stripe:
285+
testaccount: 'This site is configured with a test account for payment, no transaction will be accounted. The test card number is: 4242424242424242'

‎themes/gadael/languages/fr.yml

+4-2
Original file line numberDiff line numberDiff line change
@@ -228,10 +228,10 @@ creditcard:
228228
title: 'Carte bancaire'
229229
paymentday: 'Votre date de prélévement est le {{session.paymentDay}} de chaque mois.'
230230
savebutton: 'Enregistrer'
231-
freeplan: 'Les informations de paiement ne sont pas requise pour votre type d''abonnement.'
232231
number: 'Numéro de carte bancaire'
232+
fullname: 'Nom complet du porteur'
233233
cvc: 'code CVC'
234-
exp_month_year: 'Mois et année de fin de validité'
234+
exp_month_year: 'Fin de validité mois/année'
235235
social:
236236
github: 'Github'
237237
bug: 'Reporter un bug'
@@ -282,3 +282,5 @@ affiliation:
282282
status: 'Je veut recevoir un contre-rendu de mon affiliation'
283283
email: 'Mon adresse email'
284284
button: 'Envoyer'
285+
stripe:
286+
testaccount: 'Ce site est configuré avec un compte de test pour les paiements, aucune transaction ne sera comptabilisée. Le numéro de carte de test est : 4242424242424242'

‎themes/gadael/layout/account_creditcard.ejs

+20-37
Original file line numberDiff line numberDiff line change
@@ -9,56 +9,39 @@
99
</p>
1010
</div>
1111

12-
<div ng-if="session.plan!='paid'">
13-
<p>
14-
<%= __('creditcard.freeplan') %>
15-
</p>
16-
</div>
17-
18-
<form>
19-
20-
<p class="text-center">
12+
<%- partial('common/stripe') %>
2113

22-
<img src="/css/images/visa.png" />
23-
<img src="/css/images/mastercard.png" />
24-
<img src="/css/images/american-express.png" />
2514

26-
&nbsp;
15+
<form>
16+
<p class="card-wrapper"></p>
2717

28-
<img src="/css/images/powered_by_stripe.png" />
18+
<p class="half">
19+
<input type="text" id="creditcard_number" placeholder="<%= __('creditcard.number') %>" ng-model="creditcard.number" />
2920
</p>
3021

31-
32-
<p>
33-
<label for="creditcard_number"><%= __('creditcard.number') %></label>
34-
<input type="text" id="creditcard_number" ng-model="creditcard.number" />
22+
<p class="half">
23+
<input type="text" id="creditcard_fullname" placeholder="<%= __('creditcard.fullname') %>" ng-model="creditcard.name" />
3524
</p>
3625

37-
<table>
38-
<tr>
39-
<td class="col1">
40-
<label for="creditcard_cvc"><%= __('creditcard.cvc') %></label>
41-
<input type="text" id="creditcard_cvc" ng-model="creditcard.cvc" />
42-
</td>
43-
44-
45-
46-
<td class="col2">
47-
<label for="creditcard_exp_month"><%= __('creditcard.exp_month_year') %></label>
48-
<select id="creditcard_exp_month" ng-model="creditcard.exp_month" ng-options="month as month for month in months" placeholder="<%= __('creditcard.month') %>">
49-
</select>
50-
<select id="creditcard_exp_year" ng-model="creditcard.exp_year" ng-options="year as year for year in years" placeholder="<%= __('creditcard.year') %>">
51-
</select>
52-
</td>
53-
</tr>
54-
</table>
55-
26+
<p class="half">
27+
<input type="text" id="creditcard_expiry" ng-model="expiry" placeholder="<%= __('creditcard.exp_month_year') %>" />
28+
</p>
5629

30+
<p class="half">
31+
<input type="text" id="creditcard_cvc" placeholder="<%= __('creditcard.cvc') %>" ng-model="creditcard.cvc" />
32+
</p>
5733

5834
<p class="button">
5935
<button type="submit" ng-click="saveCard()"><i class="fa fa-save"></i> <%= __('creditcard.savebutton') %></button>
6036
</p>
6137
</form>
38+
39+
<footer>
40+
<img class="cardtype" src="/css/images/visa.png" />
41+
<img class="cardtype" src="/css/images/mastercard.png" />
42+
<img class="cardtype" src="/css/images/american-express.png" />
43+
<img class="stripe" src="/css/images/powered_by_stripe.png" />
44+
</footer>
6245
</div>
6346
</section>
6447

‎themes/gadael/layout/account_exportcompany.ejs

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div id="account_exportcompany" class="accountform">
44
<h2><%= __('export.title') %></h2>
55

6-
<p class="security">
6+
<p class="warn-bloc">
77
<i class="fa fa-warning"></i>
88
<%= __('export.security') %>
99
</p>

‎themes/gadael/layout/account_plan.ejs

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55

66
<form method="POST" action="<%= url_for_lang('setplan') %>">
77

8+
<%- partial('common/stripe') %>
9+
810
<div>
911
<label class="main"><input type="radio" name="plan" ng-model="session.user.plan" value="free" /> <%= __('plan.freeradio') %></label>
1012
<div class="plan-description">0 &euro;, <%= __('plan.freedesc') %></div>

‎themes/gadael/layout/common/scripts.ejs

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<%- js('/bower_components/lunr-languages/lunr.fr.js') %>
1212
<%- js('/bower_components/lunr-languages/lunr.multi.js') %>
1313
<%- js('/bower_components/mark.js/dist/mark.min.js') %>
14+
<%- js('/bower_components/card/dist/card.js') %>
1415

1516
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
1617

‎themes/gadael/layout/common/stripe.ejs

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<p ng-if="!session.stripeProd" class="warn-bloc">
2+
<i class="fa fa-warning"></i>
3+
<%= __('stripe.testaccount') %>
4+
</p>

‎themes/gadael/source/css/_extend.styl

+3
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,9 @@ $base-form
141141
margin: 2em 0
142142
em
143143
color: color-grey
144+
.half
145+
width: 49%
146+
display: inline-block
144147

145148
p.button
146149
padding: 2em 0 3em 0

‎themes/gadael/source/css/_partial/account.styl

+14-6
Original file line numberDiff line numberDiff line change
@@ -99,10 +99,18 @@
9999
font-weight: bold
100100

101101
#account_creditcard
102-
.text-center
102+
p
103+
margin: .5em 0
104+
105+
p.button
106+
padding-top: .3em
107+
108+
footer
109+
border-top: #eee 1px solid
110+
padding-top:1em
111+
padding-bottom:1em
103112
text-align: center
104-
.col1
105-
padding-right: 2em
106-
.col2
107-
select
108-
width 45%
113+
114+
.cardtype
115+
height: 48px
116+
margin: 0px 10px

‎themes/gadael/source/css/_partial/accountform.styl

+1-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
font-weight: bold
1414

1515

16-
.security
16+
.warn-bloc
1717
margin: 1.5em 0
1818
padding: 1em
1919
background: color-fashy-background
@@ -27,7 +27,6 @@
2727

2828

2929

30-
3130
h2,h3
3231
padding: line-height 0
3332

‎themes/gadael/source/js/creditcard.js

+50-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ angular.module('HexoCreditcard', [])
77
.controller("CreditcardController", ['$scope', '$http',
88
function($scope, $http) {
99

10+
11+
1012
var now = new Date();
1113
$scope.months = [];
1214
$scope.years = [];
@@ -30,7 +32,47 @@ function($scope, $http) {
3032

3133
$http.get('/'+currentRootFolder+'/creditcard')
3234
.then(function(response) {
33-
$scope.creditcard = response.data;
35+
36+
var currentName = 'Full Name';
37+
var currentNumber = '•••• •••• •••• ••••';
38+
var currentExpiry = '••/••••';
39+
40+
if (response.data) {
41+
42+
// Initialize placeholders with current partial data if possible
43+
44+
if (response.data.name) {
45+
currentName = response.data.name;
46+
}
47+
48+
if (response.data.number) {
49+
currentNumber = response.data.number;
50+
}
51+
52+
if (response.data.exp_month && response.data.exp_year) {
53+
currentExpiry = response.data.exp_month+'/'+response.data.exp_year;
54+
}
55+
}
56+
57+
58+
var card = new Card({
59+
form: '#account_creditcard>form',
60+
container: '.card-wrapper',
61+
62+
formSelectors: {
63+
numberInput: '#creditcard_number', // optional — default input[name="number"]
64+
expiryInput: '#creditcard_expiry', // optional — default input[name="expiry"]
65+
cvcInput: '#creditcard_cvc', // optional — default input[name="cvc"]
66+
nameInput: '#creditcard_fullname'
67+
},
68+
69+
// Default placeholders for rendered fields - optional
70+
placeholders: {
71+
name: currentName,
72+
number: currentNumber,
73+
expiry: currentExpiry
74+
}
75+
});
3476
})
3577
.catch(function(response) {
3678
console.log(response);
@@ -59,6 +101,13 @@ function($scope, $http) {
59101

60102

61103
$scope.saveCard = function() {
104+
105+
106+
var expiry = $scope.expiry.split('/');
107+
$scope.creditcard.exp_month = parseInt(expiry[0], 10);
108+
$scope.creditcard.exp_year = parseInt(expiry[1], 10);
109+
110+
62111
Stripe.setPublishableKey('pk_test_NQQfxEp03QaFUUSuxSYISJC0');
63112
Stripe.card.createToken($scope.creditcard, stripeResponseHandler);
64113
};

0 commit comments

Comments
 (0)