Payment XHTML (23 07 2016)

<?xml version="1.0" encoding="UTF-8"?
>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:pe="http://primefaces.org/ui/extensions"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<title>EPA Payment Portal</title>
<style type="text/css">
.ui-inputfield.ui-inputtext.ui-widget.ui-state-default.ui-corner-all.uistate-error
{
border-color: #cd0a0a !important;
}
.ui-selectonemenu-label.ui-inputfield.ui-corner-all {
height: 35px !important;
text-align: center !important;
padding-top: 13px !important;
width: 101px !important;
font-family: sans-serif !important;
font-size: 13px !important;
}
.ui-selectonemenu-item.ui-selectonemenu-list-item.ui-corner-all {
text-align: center !important;
font-family: sans-serif !important;
}
.ui-button-icon-only .ui-icon.fa, .ui-button-text-icon-left .ui-icon.fa,
.ui-button-text-icon-right .ui-icon.fa {
margin-top: -10px !important;
margin-left: 31px !important;
position: absolute !important;
}
.logoimgcsscls {
width: 26% !important;
max-height: 100% !important;
}
.disable-scroll .ui-dialog-content {
overflow: hidden !important;
}
.ui-icon-closethick {
background-image: url(../resources/images/button_icons.png) !important;
background-position: -224px -40px;
background-repeat: no-repeat;
height: 18px;
width: 18px;
}
.ui-dialog .ui-dialog-title {
font-weight: 100 !important;
}
.ui-widget {
font-size: 14px;
font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
.ui-messages-error, .ui-message-error {
background-color: #fff !important;
}
.ui-messages-error-summary {
font-weight: 100;
font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
</style>
<link href="/ePayAccept/resources/Semantic-UI/semantic.css"
rel="stylesheet" type="text/css" />
<link rel="stylesheet"
href="/ePayAccept/resources/Semantic-UI/styles.css" />
<script src="/ePayAccept/resources/Semantic-UI/semantic.js"
type="text/javascript"></script>
</h:head>
<h:body>
<f:event listener="#{externalAddPaymentsBean.init}"
type="preRenderComponent"></f:event>
<p:dialog widgetVar="loginDialogue" closable="false"
draggable="false"
modal="true" resizable="false" header="Logged Out">
<p:spacer height="15"></p:spacer>
<h:outputText
value="#{ePayacceptmessages.loginDlgsessionexp}"
style="font-size:1.2em;" />
<br />
<p:spacer height="15"></p:spacer>
<h:outputLink
value="#{request.contextPath}/portal/Payment.xhtml" style="align:center;textdecoration:none;">
<p style="font-weight: bold; font-size: 1.5em;"
align="center">click Here to Refresh
page</p>
</h:outputLink>
</p:dialog>
<p:idleMonitor timeout="#{ePayacceptmessages.timeout}"
onidle="startIdleMonitor();" />
<p:dialog id="timeoutSession" header="Session Expiry Check"
widgetVar="timeoutDialog" showEffect="fade" modal="true"
closable="false" draggable="false" resizable="false"
appendToBody="true" onHide="stopCount()" onShow="doTimer()">
<br />
<h:outputText value="#{ePayacceptmessages.sessionexpwarn}"
styleClass="info" style="fontsize:1.2em;"></h:outputText>
<h:form>
<p:panel>
<br></br>
<p align="center">
<span class="ui-icon ui-icon-alert"
style="float: left;" /> <span
id="dialog-countdown"
style="font-weight: bold; font-size:
2.0em;" />
</p>
<p style="font-weight: bold; font-size: 1.5em;"
align="center">seconds</p>
<br></br>
<h:panelGrid columns="3">
<h:commandLink onclick="keepAlive()"
oncomplete="PF('timeoutDialog').hide();"
style="align:center;textdecoration:none;">
<p style="font-weight: bold; fontsize: 1.5em;" align="center">Keep
Alive</p>
</h:commandLink>
</h:panelGrid>
</p:panel>
</h:form>
</p:dialog>
<h:form>
<p:remoteCommand name="keepAlive"
actionListener="#{externalAddPaymentsBean.keepAlive}"
/>
seconds
<h:outputScript type="text/javascript">
var TIME = #{ePayacceptmessages.counterTime}; // In
var countTimer = TIME;
var processTimer;
var timer_is_on = 0;
var countDownDiv = "dialog-countdown";

var txtCountDown = null;
if (!txtCountDown)
txtCountDown =
document.getElementById(countDownDiv);
function startIdleMonitor() {
if(countTimer>0){
countTimer = TIME;
txtCountDown.innerHTML = countTimer;
PF('timeoutDialog').show();
}
}
function timedCount() {
txtCountDown.innerHTML = countTimer;
if (countTimer == 0) {
stopCount();

PF('timeoutDialog').hide();
PF('loginDialogue').show();
TIME=0;
}
countTimer = countTimer - 1;
processTimer = setTimeout("timedCount()", 1000);
}
function doTimer() {
if (!timer_is_on) {
timer_is_on = 1;
timedCount();
}
}
function stopCount() {
clearTimeout(processTimer);
timer_is_on = 0;
keepAlive();
}
</h:outputScript>
</h:form>
<h:form styleClass="ui form" id="creditCardFormId"
enctype="multipart/form-data">
<div class="ui container">

<div class="ui raised very padded segment">
<div class="top-bar">
<div>
styleClass="logoimgcsscls"
<p:graphicImage alt="No image"
value="#{externalAddPaymentsBean.photoStream}" cache="false"
id="logoId">
</p:graphicImage>
<p:graphicImage alt="No image"
styleClass="logoimgcsscls"
name="anchorops-epay-acceptlogo.png" cache="false"
id="logoOfAops" library="images"
style="margin-left: 485px;">
</p:graphicImage>
</div>
</div>
<div class="ui equal width divided grid">
<div class="padded column">
<h3 class="ui header">
<label class="ui outlined circular
label">1</label> Credit Card
</h3>
<div class="ui mini images"
style="float: right; margin-top:
-45px;">
<p:graphicImage library="images"
name="MC.png"
rendered="#{externalAddPaymentsBean.submerchant.masterCardAccept == 1}"
cache="false" />
name="VI.png"
rendered="#{externalAddPaymentsBean.submerchant.visaAccept == 1}"
cache="false" />
name="AX-card.png"
rendered="#{externalAddPaymentsBean.submerchant.americanExpressAccept
== 1}"
name="discover-card.png"
cache="false" />
rendered="#{externalAddPaymentsBean.submerchant.discoverAccept == 1}"
cache="false" />
</div>
<div class="field">
<label>Name on Card</label>
<div class="ui icon input">
<p:inputText
id="nameoncardId" placeholder="Name on Card"
required="true"
autocomplete="off"
requiredMessage="Please
enter cardholder name as it appears on the credit card"
value="#{externalAddPaymentsBean.externalPayments.nameOnCard}"
maxlength="50">
</p:inputText>
</div>
</div>
<div>
<p:message for="nameoncardId"
display="text"></p:message>
</div>
<div class="field">
<label>Card Number</label>
<p:inputText maxlength="19"
autocomplete="off"
value="#{externalAddPaymentsBean.externalPayments.cardNumber}"
id="cardnumberId">
<p:ajax event="keyup"
update=":creditCardFormId:paymenttypeimg :creditCardFormId:messageId"
listener="#{externalAddPaymentsBean.onkeyupmethod}" />
</p:inputText>
<h:graphicImage
id="paymenttypeimg" library="images"
name="#{externalAddPaymentsBean.paymentType}"
style="height:38px !
important; margin-left: -59px !important;"></h:graphicImage>
</div>
</div>
<div>
<p:message id="cardnumbermsgId"
for="cardnumberId" display="text"></p:message>
</div>
<div class="fields">
<div class="twelve wide field">
<label>Expiration Date</label>
field">
<div class="six wide
<div class="ui
fluid selection dropdown"
style="padding-top: 0px !important; padding-bottom: 0px !important;

padding-left: 0px !important; padding-right: 0px !important; height: 24px !
important;">
<p:selectOneMenu id="cardexpmnth" required="true"
requiredMessage="Please select credit cards expiration month"
style="width: 115px !important;height: 35px !important;"
value="#{externalAddPaymentsBean.month}">
<f:selectItem itemLabel="Month" itemValue="" />
<f:selectItems value="#{externalAddPaymentsBean.months}" />
</p:selectOneMenu>
</div>
</div>
<div class="six wide
field">
<div class="ui
fluid selection searchable dropdown"
style="padding-top: 0px !important; padding-bottom: 0px !important;

padding-left: 0px !important; padding-right: 0px !important; height: 24px !
important;">
<p:selectOneMenu id="cardexpyear" required="true"
requiredMessage="Please select credit cards expiration year"
style="width: 115px !important;height: 35px !important;"
value="#{externalAddPaymentsBean.externalPayments.cardExpiryDate}">
<f:selectItem itemLabel="Year" itemValue="" />
<f:selectItems value="#{externalAddPaymentsBean.years}" />
</p:selectOneMenu>
</div>
</div>
</div>
</div>
<div class="four wide field">

<label>Security Code</label>
<p:inputText
maxlength="4" autocomplete="off" required="true"
requiredMessage="Please enter credit cards security code"
value="#{externalAddPaymentsBean.externalPayments.cardValidationNumber}"
validatorMessage="Invalid security code." id="cvv">
minimum="3"></f:validateLength>
pattern="[0-9]*" />
id="helpId" library="images"
name="question.png"
<f:validateLength
<f:validateRegex
</p:inputText>
<p:graphicImage
style="height:
20px; margin-left: -23px; margin-top: 9px;"></p:graphicImage>
</div>
<p:tooltip
id="toolTipContent" for="helpId" position="bottom"
style="backgroundcolor:white;font-size: 14px !important;font-family: sans-serif !important;">
<p style="font-weight:
bold !important;">Where do I find
this</p>
<div>
<p>
For Visa,
MasterCard and Discover, the 3 <br />digits are on
the
<em>back</em> of your card.
</p>
<p>
For American
Express, the 4 digits are on<br /> the <em>front</em>
of your
card.
</p>
<div class="ui
small images">
<img
src="/ePayAccept/resources/Semantic-UI/assets/security-code-card1.png"
style="width: 120px !important" /> <img
src="/ePayAccept/resources/Semantic-UI/assets/security-code-card2.png"
style="width: 120px !important;" />
</div>
</div>
</p:tooltip>
</div>
</div>
<div>
<p:message for="cardexpmnth"
</div>
<div>
<p:message for="cardexpyear"
</div>
<div>
<p:message for="cvv"
</div>
label">2</label> Billing
Address
</h3>
<div class="two fields">
<div class="field">
<label>First Name</label>
<p:inputText id="firstnameId"
required="true"
enter cardholders first name"
value="#{externalAddPaymentsBean.externalPayments.billToFirstName}"></p:inputT
ext>
</div>
<div class="field">
<label>Last Name</label>
<p:inputText required="true"
enter cardholders last name"
value="#{externalAddPaymentsBean.externalPayments.billToLastName}"
id="lastnameId"></p:inputText>
</div>
</div>
<div>
<p:message for="firstnameId"
</div>
<div>
<p:message for="lastnameId"
</div>
<div class="field">
<label>Address</label>
requiredMessage="Please enter
cardholders address"
value="#{externalAddPaymentsBean.externalPayments.address1}"
id="adress"></p:inputText>
</div>
<div>
<p:message for="adress"
</div>
<div class="field">
<p:inputText
value="#{externalAddPaymentsBean.externalPayments.address2}"></p:inputText>
</div>
<div class="seven wide field">
<label>City</label>
enter cardholders city"
value="#{externalAddPaymentsBean.externalPayments.city}"
id="city"></p:inputText>
</div>
<div class="four wide field">
<label>State</label>
<div class="ui fluid
selection searchable dropdown"
style="padding-top: 0px
!important; padding-bottom: 0px !important; padding-left: 0px !important;
padding-right: 0px !important; height: 24px !important;">
<p:selectOneMenu
id="state" required="true"
requiredMessage="Please enter cardholders state"
style="width:
96px !important;height: 35px !important;"

value="#{externalAddPaymentsBean.externalPayments.state}">
<f:selectItem
itemLabel="State" itemValue="" />
<f:selectItems
value="#{externalAddPaymentsBean.statesList}"></f:selectItems>
</p:selectOneMenu>
</div>
</div>
<div class="five wide field">
<label>Zip Code</label>
<div class="field">
<p:inputText
required="true"
requiredMessage="Please enter cardholders zip code"
value="#{externalAddPaymentsBean.externalPayments.postalCode}"
id="zip"></p:inputText>
</div>
</div>
</div>
<div>
<p:message for="city"
</div>
<div>
<p:message for="state"
</div>
<div>
<p:message for="zip"
</div>
</div>
<div class="padded column">

label">3</label> Payment
Details
</h3>
autocomplete="off"
<div class="field">
<label>Company Name</label>
the name of the company that is making this payment"
value="#{externalAddPaymentsBean.externalPayments.customerName}"
id="companyName"
maxlength="50"></p:inputText>
</div>
<div>
<p:message for="companyName"
</div>
<div class="field">
<label>Invoice Number</label>
autocomplete="off"
invoice number associated with this payment"
value="#{externalAddPaymentsBean.externalPayments.invoiceReferenceNumberL3}"
id="invoice"></p:inputText>
</div>
<div>
<p:message for="invoice"
</div>
<div class="field">
<label>Payment Amount</label>
<div class="ui labeled input">
<div class="ui label">$</div>
<pe:inputNumber
required="true"
style="height: 35px !
important;width: 418px !important;"
decimalSeparator="."
thousandSeparator=","
enter payment amount"
value="#{externalAddPaymentsBean.externalPayments.purchaseAmount}"
maxlength="19"
autocomplete="off"
validatorMessage="Payment amount should be greater than zero"
id="amount">
<f:validateLongRange
minimum="1" />
</pe:inputNumber>
</div>
</div>
<div>
<p:message for="amount"
</div>
<div id="submit-container"
class="ui middle aligned column
centered grid">
<div class="ten wide column">

<div class="ui checkbox">
<h:selectBooleanCheckbox
id="sendemailId"
value="#{externalAddPaymentsBean.isSendEmail}" />
<label>Send Confirmation
Email</label>
</div>
<div class="field">
<p:inputText
type="text"
value="#{externalAddPaymentsBean.externalPayments.email}"
validatorMessage="Invalid email format" id="email">
<f:validateRegex
pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z09]+)*(\.[A-Za-z]{2,})$" />
</p:inputText>
</div>
<div>
<p:message for="email"
</div>
<p:commandButton icon="fa falock"
action="#{externalAddPaymentsBean.addPayments}"
styleClass="ui huge
green raised fluid button" process="@form"
value="Submit Payment"
update="@form"
style="height: 55px !
important;margin-top: 52px;">
</p:commandButton>
</div>
</div>
closable="false" autoUpdate="true"
<p:messages id="messageId"
style="font-size: 15px !
important;font-family: sans-serif !important;"
showIcon="false"
globalOnly="true"></p:messages>
</div>
</div>
</div>
</div>
</h:form>
<script>
$('.ui.dropdown').dropdown();
</script>
<script type="text/javascript">
$('.help.icon').popup({
inline : true,
delay : {
show : 0,
hide : 500
}
});
</script>
<p:ajaxStatus onstart="PF('statusDialog').show()"
onsuccess="PF('statusDialog').hide()" />
<p:dialog widgetVar="statusDialog" modal="true" draggable="false"
closable="false" resizable="false" showHeader="false"
styleClass="disable-scroll">
<div
style="width: 90px; height: 50px; text-align: center;
margin-top: 10px;">
<h:outputText value="Please Wait..." />
<br></br>
<h:graphicImage value="/resources/images/ajax-loader.gif" />
</div>
</p:dialog>
</h:body>
</html>

Payment XHTML (23 07 2016)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Payment XHTML (23 07 2016)

Uploaded by

Copyright:

Available Formats

<?xml version="1.0" encoding="UTF-8"?

var countDownDiv = "dialog-countdown";

<div class="ui container">

<p:graphicImage alt="No image"

fluid selection dropdown"

style="padding-top: 0px !important; padding-bottom: 0px !important;

<div class="six wide

fluid selection searchable dropdown"

style="padding-top: 0px !important; padding-bottom: 0px !important;

<div class="four wide field">

bold !important;">Where do I find

MasterCard and Discover, the 3 <br />digits are on

<em>back</em> of your card.

Express, the 4 digits are on<br /> the <em>front</em>

enter cardholders first name"

96px !important;height: 35px !important;"

<div class="padded column">

<div class="ten wide column">

green raised fluid button" process="@form"

You might also like