<body ng-app="BlankApp" ng-cloak>
<md-toolbar class="header">
<img src="https://checkout.paystand.co/v4/demo/ps-hood-white.png" class="logo" /> PayStand Pacific Condos
</md-toolbar>
<md-content class="md-padding">
<p>Welcome to PayStand Pacific Condominiums. Please enter your lease contract details below to pay your application fee, submit your security deposit and setup your monthly rent.</p>
<form name="condoLeaseForm" ng-controller="leaseController" novalidate layout-margin>
<div layout="row">
<div flex layout="column">
<md-input-container flex-offset="50">
<label>Lease Agreement Number</label>
<input name="leaseNumber" ng-model="leaseNumber" required md-maxlength="6" minlength="6">
<div ng-messages="condoLeaseForm.leaseNumber.$error" ng-show="condoLeaseForm.leaseNumber.$dirty">
<div ng-message="required">Lease number is required!</div>
<div ng-message="md-maxlength">Lease number should be exactly 6 characters!</div>
<div ng-message="minlength">Lease number should be exactly 6 characters!</div>
</div>
</md-input-container>
<md-input-container>
<label>Tentant(s) Full Name</label>
<input name="fullName" ng-model="fullName" required md-maxlength="40" md-minlength="4">
<div ng-messages="condoLeaseForm.fullName.$error" ng-show="condoLeaseForm.fullName.$dirty">
<div ng-message="required">Full name is required!</div>
<div ng-message="maxlength">Not more than the first 40 characters!</div>
<div ng-message="minlength">Full name should be at least 4 characters!</div>
</div>
</md-input-container>
<md-input-container>
<label>Property Address</label>
<input name="address" ng-model="address" required md-maxlength="125">
<div ng-messages="condoLeaseForm.address.$error" ng-show="condoLeaseForm.address.$dirty">
<div ng-message="required">Lease number is required!</div>
<div ng-message="md-maxlength">Address cannot be longer than 125 characters!</div>
</div>
</md-input-container>
<md-datepicker name="startDate" ng-model="startDate" md-placeholder="Start date" required md-min-date="now();" md-max-date="maxDate"></md-datepicker>
<div class="validation-messages" ng-messages="condoLeaseForm.startDate.$error" ng-show="condoLeaseForm.startDate.$dirty">
<div ng-message="valid">The entered value is not a valid date!</div>
<div ng-message="required">The start date is required!</div>
<div ng-message="mindate">The start date cannot be in the past!</div>
<div ng-message="maxdate">Date is too late!</div>
</div>
<div layout="row" layout-align="space-between">
<md-input-container>
<label>Monthly Rent</label>
<input name="rent" ng-model="rent" required type="number" text-align="right" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01">
<div ng-messages="condoLeaseForm.rent.$error" ng-show="condoLeaseForm.rent.$dirty">
<div ng-message="required">Rent is required!</div>
</div>
</md-input-container>
<md-input-container>
<label>Term in months</label>
<input name="term" ng-model="term" required type="number" step="any" min="3" max="36" ng-pattern="/[0-9]{1,2}/">
<div ng-messages="condoLeaseForm.term.$error" ng-show="condoLeaseForm.term.$dirty">
<div ng-message="required">Term is required!</div>
<div ng-message="min">Minimum 3 months!</div>
<div ng-message="max">Maximum 36 months!</div>
</div>
</md-input-container>
</div>
<md-input-container>
<label>Notes</label>
<textarea name="notes" ng-model="notes" md-maxlength="150" placeholder="Any additional notes as needed"></textarea>
<div ng-messages="condoLeaseForm.notes.$error" ng-show="condoLeaseForm.notes.$dirty">
<div ng-message="md-maxlength">That's too long!</div>
</div>
</md-input-container>
</div>
<div flex flex-gt-xs="50" layout-padding layout-margin>
<div class="md-whiteframe-2dp" layout="column">
<md-subheader class="md-primary">
<h1>Summary</h1></md-subheader>
<md-list>
<md-list-item>
<p>Lease</p>{{leaseNumber}}
</md-list-item>
<md-list-item>
<p>Tenant</p>{{fullName}}
</md-list-item>
<md-list-item>
<p>Property</p>{{address}}
</md-list-item>
<md-list-item>
<p>Application Fee</p>$50.00
</md-list-item>
<md-list-item>
<p>Security Deposit</p>{{3 * rent | currency}}
</md-list-item>
<md-list-item>
<p>Monthly Rent</p>{{1 * rent | currency}}
</md-list-item>
<md-list-item>
<p>Start</p>{{startDate | date}}
</md-list-item>
<md-list-item>
<p>Lease Term</p>{{1 * term}}
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<md-button class="md-primary md-raised" aria-label="Enter payment method" id="dialogWayPoint" type="submit" layout-fill ng-click="schedulePayment();" ng-disabled="condoLeaseForm.$invalid">
Enter payment method
</md-button>
</md-list-item>
</md-list>
</div>
</div>
</div>
</form>
</md-content>
<md-divider></md-divider>
<div class="footer">
<md-button class="md-accent md-raised md-hue-2">This is a demo system</md-button>
<p>Copyright 2016 PayStand Inc</p>
</div>
<script type="text/javascript" id="paystand_checkout" src="https://checkout.paystand.co/v4/js/paystand.checkout.js" ps-env="sandbox" ps-publishable-key="1noqhele1yjgieoi8aqe4n8i" ps-width="400px" ps-height="750px" ps-preset-name="scheduledPayment" ps-includes="disableCards,showReceipt"></script>
</body>
/**
* You must include the dependency on 'ngMaterial'
*/
angular.module('BlankApp', ['ngMaterial', 'ngMessages'])
.controller('leaseController', function($scope, $mdDialog) {
angular.extend($scope, {
"fullName": null,
"address": null,
"leaseNumber": null,
"rent": null,
"term": null,
"startDate": null,
"notes": null
});
$scope.schedulePayment = function() {
PayStandCheckout.reset({
"resources": {
"payer": {
"name": $scope.fullName
},
"meta": {
"fullName": $scope.fullName,
"address": $scope.address,
"leaseNumber": $scope.leaseNumber,
"rent": $scope.rent,
"term": $scope.term,
"startDate": $scope.startDate,
"notes": $scope.notes
},
"scheduledPayment": {
"name": "Lease number: " + $scope.leaseNumber,
"description": $scope.address,
"currency": "USD",
"scheduledItems": [{
"name": "Application Fee",
"description": "One time application fee of $50.00",
"schedule": {
"name": "Application Fee",
"description": "Pay a one time non-refundable application fee"
},
"amount": "50.00"
}, {
"name": "Security Deposit",
"description": "Refundable security deposit of 3 times the monthly rent",
"schedule": {
"name": "Security Deposit",
"dateStart": $scope.startDate,
},
"amount": 3 * $scope.rent
}, {
"name": "Monthly Rent",
"description": "Rent of $1200 is due on the first of every month",
"schedule": {
"name": "Rent",
"description": "Pay rent on the 1st of the month",
"interval": "month",
"intervalCount": "1",
"anchor": "start",
"dateStart": $scope.startDate,
"timesToRun": $scope.term
},
"amount": $scope.rent
}]
}
}
})
.showCheckout();
};
});
