basic angular form which has data bound to it

This commit is contained in:
Henry Oswald 2014-12-18 17:48:23 +00:00
parent 505675803b
commit 47fb2a0878
2 changed files with 71 additions and 13 deletions

View file

@ -1,14 +1,19 @@
extends ../layout
block scripts
script(type='text/javascript').
window.recomendedCurrency = '#{currency}'
window.plan_code = '#{plan_code}'
window.recurlyCreds = { apiKey : "", apiUrl:""}
block content
- locals.supressDefaultJs = true
script(data-main=jsPath+'main.js', src=jsPath+'libs/require.js', baseurl=jsPath)
script(src=jsPath+'libs/recurly.min.js')
script(src="https://js.recurly.com/v3/recurly.js")
.content.content-alt
.container(ng-controller="NewSubscriptionController" ng-cloak)
@ -29,9 +34,38 @@ block content
ng-click="changeCurrency(currency)",
) {{currency}} ({{value['symbol']}})
h1 #{translate("new_subscription")}
#subscribeForm(style="min-height: 700px;") #{translate("loading_billing_form")}...
span {{ error }}
form
.form-group
label #{translate("credit_card_number")}
input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly='number', ng-model='data.number')
.form-group
label #{translate("month")}
input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly='month', ng-model='data.month')
.form-group
label #{translate("year")}
input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly='year', ng-model='data.year')
.form-group
label #{translate("cvv")}
input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly='cvv', ng-model='data.cvv')
.form-group
label #{translate("first_name")}
input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="first_name", ng-model="data.first_name")
.form-group
label #{translate("last_name")}
input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="last_name", ng-model="data.last_name")
.form-group
button.btn.btn-success(ng-click="submit()") #{translate("submit")}
.col-md-3.col-md-pull-6
if showStudentPlan == 'true'
@ -77,14 +111,6 @@ block content
script(type="text/javascript").
Recurly.config(!{recurlyConfig})
var recurlySubscriptionFormConfig = !{subscriptionFormOptions}
recurlySubscriptionFormConfig.successHandler = function(){
ga('send', 'event', 'subscription-funnel', 'subscribed')
}
Recurly.buildSubscriptionForm(recurlySubscriptionFormConfig);
window.ab = [
{step:1, bucket:"red", testName:"button_color"},
{step:1, bucket:"blue", testName:"button_color"}

View file

@ -11,4 +11,36 @@ define [
window.location = "/user/subscription/new?planCode=#{window.plan_code}&currency=#{newCurrency}"
$scope.switchToStudent = ()->
window.location = "/user/subscription/new?planCode=student&currency=#{$scope.currencyCode}"
window.location = "/user/subscription/new?planCode=student&currency=#{$scope.currencyCode}"
__api_key = recurlyCreds.apiKey
__api_url = recurlyCreds.apiUrl
configured = false
$scope.error = false
$scope.token = false
$scope.data =
number: ""
month: ""
year: ""
cvv: ""
first_name: ""
last_last: ""
postal_code: ""
$scope.submit = ->
throw new Error("Recurly API Library Missing.") if typeof recurly is "undefined"
console.log $scope.data
$scope.error = ""
if !configured
recurly.configure __api_key
configured = true
recurly.token $scope.data, (err, token) ->
if err
$scope.error = err.message
else
$scope.token = token