Skip to content

P
PERFORMA_REPLICA
Commit c943d9a0 by Nilu
Options

billing page changes

parent a4945b01
Showing with 56 additions and 35 deletions
cmsWebApp/webroot/extensions/adminportal/CustomServlets_adminPortal.xml
...@@ -53,6 +53,7 @@ ...@@ -53,6 +53,7 @@
<FORM name="*.saveClient" factory="Participant" class="performa.form.SaveClientFP"/> <FORM name="*.saveClient" factory="Participant" class="performa.form.SaveClientFP"/>
<FORM name="*.saveCompany" factory="Participant" class="performa.form.SaveCompanyFP"/> <FORM name="*.saveCompany" factory="Participant" class="performa.form.SaveCompanyFP"/>
<FORM name="*.processCulture" factory="Participant" class="performa.form.ProcessCultureFP"/> <FORM name="*.processCulture" factory="Participant" class="performa.form.ProcessCultureFP"/>
<FORM name="*.savePayment" factory="Participant" class="performa.form.MakePaymentFP"/>
</NODE> </NODE>
<NODE name="job_assessment_criteria_add_jsp" factory="Participant"> <NODE name="job_assessment_criteria_add_jsp" factory="Participant">
......
cmsWebApp/webroot/extensions/adminportal/billing.jsp
...@@ -14,14 +14,6 @@ ...@@ -14,14 +14,6 @@
String nextPage = WebUtils.getSamePageInRenderMode(request, "Page"); String nextPage = WebUtils.getSamePageInRenderMode(request, "Page");
%> %>
<script src="https://js.stripe.com/v3/"></script>
<script>
var stripePubKey = '<%= MakePaymentFP.STRIPE_PUB_KEY %>';
</script>
<oneit:script>
<!-- MUST be included after initializing stripePubKey -->
<oneit:script src="/scripts/performaStripe.js"/>
</oneit:script>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() $(document).ready(function()
{ {
...@@ -34,7 +26,7 @@ ...@@ -34,7 +26,7 @@
<div class="main-content-area"> <div class="main-content-area">
<h1 class="page-title">My Hiring Team</h1> <h1 class="page-title">My Hiring Team</h1>
<div class="my-company-area"> <div class="my-company-area">
<oneit:form name="editCompany" method="post" enctype="multipart/form-data"> <oneit:form name="makePayment" method="post" enctype="multipart/form-data">
<div style="padding-left: 15px; padding-right: 15px;"> <div style="padding-left: 15px; padding-right: 15px;">
<oneit:dynInclude page="/extensions/applicantportal/inc/multifieldtext.jsp" data="<%= CollectionUtils.EMPTY_MAP%>"/> <oneit:dynInclude page="/extensions/applicantportal/inc/multifieldtext.jsp" data="<%= CollectionUtils.EMPTY_MAP%>"/>
...@@ -54,12 +46,10 @@ ...@@ -54,12 +46,10 @@
<label class="label-14">Your card details will be saved for future billing</label> <label class="label-14">Your card details will be saved for future billing</label>
</div> </div>
<div class="grey-area"> <div class="grey-area">
<div class="form-group hide">
<input type="hidden" name="stripe-token-id" />
</div>
<div class="form-group"> <div class="form-group">
<label>Card Number</label> <label>Card Number</label>
<oneit:ormInput obj="<%= company %>" type="text" attributeName="CompanyName" cssClass="form-control" /> <div id="card-number" class="form-control">
</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Name on Card</label> <label>Name on Card</label>
...@@ -68,17 +58,20 @@ ...@@ -68,17 +58,20 @@
<div class="form-group row"> <div class="form-group row">
<div class="col-md-4"> <div class="col-md-4">
<label>Expires</label> <label>Expires</label>
<oneit:ormEnum obj="<%= company %>" attributeName="Country" cssClass="form-control"/> <div id="card-expiry" class="form-control">
</div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label>CCV</label> <label>CCV</label>
<oneit:ormEnum obj="<%= company %>" attributeName="State" cssClass="form-control"/> <div id="card-cvc" class="form-control">
</div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label>Postal Code</label> <label>Postal Code</label>
<oneit:ormInput obj="<%= company %>" type="text" attributeName="PostCode" cssClass="form-control" /> <oneit:ormInput obj="<%= company %>" type="text" attributeName="PostCode" cssClass="form-control" />
</div> </div>
</div> </div>
<div id="card-errors" role="alert"></div>
<div class="form-group"> <div class="form-group">
<oneit:button value="Save Card" name="saveCompany" cssClass="btn btn-primary btn-green large-btn" <oneit:button value="Save Card" name="saveCompany" cssClass="btn btn-primary btn-green large-btn"
requestAttribs="<%= CollectionUtils.mapEntry("nextPage", nextPage) requestAttribs="<%= CollectionUtils.mapEntry("nextPage", nextPage)
...@@ -90,22 +83,27 @@ ...@@ -90,22 +83,27 @@
</div> </div>
</div> </div>
<form action="/charge" method="post" id="payment-form"> </oneit:form>
<div class="form-row"> <oneit:form name="editCompany" method="post" enctype="multipart/form-data">
<label for="card-element"> <div class="row">
Credit or debit card <div class="col-lg-4 col-md-4 col-sm-6">
</label> <div class="form-group hide">
<div id="card-element"> <input type="hidden" name="stripe-token-id" />
a Stripe Element will be inserted here.
</div> </div>
Used to display Element errors
<div id="card-errors" role="alert"></div>
</div> </div>
</div>
<button>Submit Payment</button> <oneit:button value="Pay" name="savePayment" cssClass="hide" id="payNow"
</form> requestAttribs='<%= CollectionUtils.mapEntry("nextPage", nextPage)
.toMap() %>'/>
</oneit:form> </oneit:form>
<script src="https://js.stripe.com/v3/"></script>
<script>
var stripePubKey = '<%= MakePaymentFP.STRIPE_PUB_KEY %>';
</script>
<oneit:script>
<!-- MUST be included after initializing stripePubKey -->
<oneit:script src="/scripts/performaStripe.js"/>
</oneit:script>
</div> </div>
</div> </div>
</div> </div>
......
cmsWebApp/webroot/scripts/performaStripe.js
...@@ -26,15 +26,37 @@ cardExpiry.mount('#card-expiry'); ...@@ -26,15 +26,37 @@ cardExpiry.mount('#card-expiry');
var cardCvc = elements.create('cardCvc', {style: style}); var cardCvc = elements.create('cardCvc', {style: style});
cardCvc.mount('#card-cvc'); cardCvc.mount('#card-cvc');
registerElements([cardNumber, cardExpiry, cardCvc], 'example2');
// Create an instance of the card Element // Create an instance of the card Element
var card = elements.create('card', {style: style}); //var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div> // Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element'); //card.mount('#card-element');
card.addEventListener('change', function(event) { //card.addEventListener('change', function(event) {
// var displayError = document.getElementById('card-errors');
// if (event.error) {
// displayError.textContent = event.error.message;
// } else {
// displayError.textContent = '';
// }
//});
cardNumber.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
cardExpiry.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
cardCvc.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors'); var displayError = document.getElementById('card-errors');
if (event.error) { if (event.error) {
displayError.textContent = event.error.message; displayError.textContent = event.error.message;
...@@ -44,11 +66,11 @@ card.addEventListener('change', function(event) { ...@@ -44,11 +66,11 @@ card.addEventListener('change', function(event) {
}); });
// Create a token or display an error when the form is submitted. // Create a token or display an error when the form is submitted.
var form = document.getElementById('payment-form'); var form = document.getElementById('makePayment');
form.addEventListener('submit', function(event) { form.addEventListener('submit', function(event) {
event.preventDefault(); event.preventDefault();
stripe.createToken(card).then(function(result) { stripe.createToken(cardNumber).then(function(result) {
if (result.error) { if (result.error) {
// Inform the customer that there was an error // Inform the customer that there was an error
var errorElement = document.getElementById('card-errors'); var errorElement = document.getElementById('card-errors');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment