257 lines
15 KiB
HTML
257 lines
15 KiB
HTML
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:h="http://java.sun.com/jsf/html"
|
|
xmlns:f="http://java.sun.com/jsf/core"
|
|
xmlns:c="http://java.sun.com/jstl/core"
|
|
xmlns:ui="http://java.sun.com/jsf/facelets"
|
|
xmlns:p="http://primefaces.org/ui"
|
|
xmlns:pe="http://primefaces.org/ui/extensions"
|
|
template="/WEB-INF/templates/template.xhtml"
|
|
xmlns:maia="http://java.sun.com/jsf/composite/maiaComponents">
|
|
|
|
<ui:define name="content">
|
|
<h:outputScript name="js/payment_checkout_stable.js?v=1" />
|
|
<!--
|
|
<script src="../../resources/js/payment_checkout_stable.js" />
|
|
-->
|
|
|
|
<h:form id="formTramite" >
|
|
<style>
|
|
.ui-growl-title {
|
|
font-weight:bold;
|
|
padding:0 0 7px 0;
|
|
display:block;
|
|
font-size: 200%;
|
|
}
|
|
.ui-growl-message p {
|
|
font-size: 200%
|
|
}
|
|
</style>
|
|
<p:growl id="msjRecuerdeInicioTramite" showDetail="true" sticky="true" />
|
|
<maia:pageEvents controller="#{pagarTarjetaController}"
|
|
queryProcess="@this, :formTramite:filters"
|
|
queryUpdate=":formTramite:filters, :formTramite:documentotramite"
|
|
focusContainer=":formTramite:filters"
|
|
saveProcess=""
|
|
saveUpdate=":formTramite:controls" />
|
|
|
|
<h:panelGrid id="msjError" columns="3" rendered="#{pagarTarjetaController.isDenied and pagarTarjetaController.isOnlyMsj} " >
|
|
<h:outputLabel value="#{msg_armas.lbl_expiro_fecha_deposito}" class="ui-messages-error-icon" style="background-color:#F2DEDE; color: #B94A48; border-color: #EED3D7; border: 1px solid; font-family: Geneva,Arial,Helvetica,sans-serif; padding: 10px 10px 2px 30px; font-weight: bold; width: 700px" />
|
|
<br/><br/>
|
|
</h:panelGrid>
|
|
<p:panelGrid id="tramites" columns="3" styleClass="m-filters" style="padding-right: 50px;width:300px">
|
|
<f:facet name="header">
|
|
<h:outputText value="#{msg_armas.htbl_seleccionetramite}" />
|
|
</f:facet>
|
|
<p:outputLabel value="#{msg_general.lbl_seleccionar}:" />
|
|
<p:commandButton id="btntramite" icon="ui-icon-search" action="#{pagarTarjetaController.consultaTramites()}"
|
|
update=":formTramites:tblTramites " process="@this" oncomplete="PF('dialog').show()" />
|
|
</p:panelGrid>
|
|
<p:panelGrid id="filters" columns="3" styleClass="m-filters" style="padding-right: 50px;width:300px">
|
|
<f:facet name="header">
|
|
<h:outputText value="#{msg_general.lbl_filters}" />
|
|
</f:facet>
|
|
<p:outputLabel value="#{msg_armas.lbl_numerodetramite}:" for="numeroDeTramite"/>
|
|
<p:inputText id="numeroDeTramite" value="#{pagarTarjetaController.numTramite}" style="width:150px" maxlength="14" required="true" disabled="true"/>
|
|
<p:message for="numeroDeTramite" />
|
|
</p:panelGrid>
|
|
<h:panelGrid columns="9" id="controls">
|
|
<p:commandButton id="queryBtn" value="#{msg_general.btn_query}" icon="ui-icon-search"
|
|
action="#{pagarTarjetaController.consultarSolicitud()}"
|
|
update=":formTramite:filters :formTramite:documentotramite" process="@this, :formTramite:filters" disabled="#{!pagarTarjetaController.isEnableGrabar}"/>
|
|
<!-- <p:commandButton value="#{msg_general.lbl_save_pay}"
|
|
ajax="false"
|
|
actionListener="#{pagarTarjetaController.save}"
|
|
icon="ui-icon-disk"
|
|
disabled="#{!pagarTarjetaController.isEnableGrabar}"
|
|
update="formTramite:controls, :formTramite:msjRecuerdeInicioTramite"/> -->
|
|
|
|
|
|
<p:commandButton id="idIniciFlujo" value="#{msg_armas.lbl_inicarFlujo}" icon="ui-icon-circle-check" process="@this"
|
|
onclick="PF('confirmFlowDialog').show()" disabled="#{!pagarTarjetaController.isEnableCompletarTarea}">
|
|
</p:commandButton>
|
|
</h:panelGrid>
|
|
<p:panelGrid id="documentotramite" columns="1" styleClass="m-filters">
|
|
<f:facet name="header">
|
|
<h:outputText value="#{msg_armas.fct_registrarDeposito}" />
|
|
</f:facet>
|
|
<h:panelGrid columns="3" >
|
|
<p:commandButton value="#{msg_general.lbl_save_pay}"
|
|
icon="ui-icon-disk"
|
|
styleClass="js-payment-checkout"
|
|
disabled="#{!pagarTarjetaController.isEnableGrabar}"
|
|
ajax="true"
|
|
|
|
/>
|
|
|
|
<button class="js-payment-checkout" id="btnOpen1">Pagar con tarjeta</button>
|
|
<p:outputLabel value="#{msg_armas.lbl_tramite}:" for="tipoTramite"/>
|
|
<p:inputText id="tipoTramite" value="#{pagarTarjetaController.nombreTramite.description}" disabled="true" style="width:280px" maxlength="15"/>
|
|
<h:panelGroup/>
|
|
|
|
<p:outputLabel value="#{msg_general.lbl_category}:" for="categoria"/>
|
|
<p:inputText id="categoria" value="#{pagarTarjetaController.nombreCategoria.description}" disabled="true" style="width:280px" maxlength="30"/>
|
|
<h:panelGroup/>
|
|
|
|
<p:outputLabel value="#{msg_armas.lbl_usoActividad}:" for="usoActividad"/>
|
|
<p:inputText id="usoActividad" value="#{pagarTarjetaController.nombreUsoActividad.description}" disabled="true" style="width:280px" maxlength="30"/>
|
|
<h:panelGroup/>
|
|
|
|
<p:outputLabel value="#{msg_armas.lbl_centroControlArmas}:" for="txtccontrolArmas" rendered="#{pagarTarjetaController.requiereNoSolAucpBln}"/>
|
|
<p:inputText id="txtccontrolArmas" value="#{pagarTarjetaController.nombreInstitucion}" rendered="#{pagarTarjetaController.requiereNoSolAucpBln}" disabled="true" style="width:280px"/>
|
|
<h:panelGroup rendered="#{pagarTarjetaController.requiereNoSolAucpBln}"/>
|
|
|
|
<p:outputLabel value="#{msg_armas.lbl_numerosolicitud_aucp}:" for="txtNumSolAucp" rendered="#{pagarTarjetaController.requiereNoSolAucpBln}"/>
|
|
<p:inputText id="txtNumSolAucp" value="#{pagarTarjetaController.solicitud.aucp}" rendered="#{pagarTarjetaController.requiereNoSolAucpBln}" disabled="true" style="width:280px"/>
|
|
<h:panelGroup rendered="#{pagarTarjetaController.requiereNoSolAucpBln}"/>
|
|
|
|
<p:outputLabel for="valorAPagar" value="#{msg_armas.lbl_valorAPagar}:" />
|
|
<h:panelGroup>
|
|
<p:inputText id="valorAPagar" value="#{pagarTarjetaController.record.valorapagar}" onchange="" maxlength="7" disabled="true" >
|
|
<f:convertNumber pattern="#0.00" minFractionDigits="2" />
|
|
<pe:keyFilter regEx="/[\d\s,]/"/>
|
|
<p:ajax event="blur" update="valorAPagar"/>
|
|
</p:inputText>
|
|
<p:outputLabel value="#{msg_armas.lbl_usd}" />
|
|
</h:panelGroup>
|
|
<h:panelGroup/>
|
|
|
|
<p:outputLabel for="fechaDeposito" value="#{msg_armas.lbl_fechaDeDeposito}:" />
|
|
<p:calendar id="fechaDeposito" value="#{pagarTarjetaController.record.fechacomprobante}" style="width:150px" showOn="button" navigator="true" pattern="#{msg_general.dateformat}" converter="converter.date" required="true" maxlength="10" disabled="#{pagarTarjetaController.isDenied}"/>
|
|
<p:message for="fechaDeposito" />
|
|
|
|
<p:outputLabel for="interes" value="#{msg_armas.lbl_interes_tarjeta}:" />
|
|
<p:inputText id="interes" value="#{pagarTarjetaController.interesPorcentaje}" style="width:150px" maxlength="15" required="true" disabled="#{pagarTarjetaController.isDenied}">
|
|
</p:inputText>
|
|
<p:message for="interes" />
|
|
<p:outputLabel for="valorPagar" value="#{msg_armas.lbl_total_pagar}:" />
|
|
<h:panelGroup>
|
|
<p:inputText id="valorPagar" value="#{pagarTarjetaController.totalPagar}" required="true" onchange="" maxlength="7" disabled="#{pagarTarjetaController.isDenied}">
|
|
<f:convertNumber pattern="#0.00" minFractionDigits="2" />
|
|
<f:validateDoubleRange minimum="0.00" />
|
|
<pe:keyFilter regEx="/[\d\s,]/"/>
|
|
<p:ajax event="blur" update="valorPagar" listener="#{pagarTarjetaController.valorMayorACero}"/>
|
|
</p:inputText>
|
|
<p:outputLabel value="#{msg_armas.lbl_usd}" />
|
|
</h:panelGroup>
|
|
<p:message for="valorPagar" />
|
|
|
|
</h:panelGrid >
|
|
</p:panelGrid >
|
|
<br/><br/>
|
|
|
|
</h:form>
|
|
<h:form id="transactionForm">
|
|
<p:inputText id="statustrans" value="" style="width:150px" required="true" disabled="#{pagarTarjetaController.isDenied}">
|
|
</p:inputText>
|
|
</h:form>
|
|
<div id="response" />
|
|
<h:commandButton
|
|
value="#{msg_general.lbl_save_pay}"
|
|
disabled="#{!pagarTarjetaController.isEnableGrabar}"
|
|
id="btnOpen"
|
|
/>
|
|
|
|
<script type="text/javascript">
|
|
let paymentCheckout = new PaymentCheckout.modal({
|
|
|
|
client_app_code: 'PMTZ-CAFE-CLIENT',
|
|
client_app_key: 'xVbpg7Q8XWMQfx7dDyoZ8b1gOHhOn3',
|
|
locale: 'es', // User's preferred language (es, en, pt). English will be used by default.
|
|
env_mode: 'stg', // `prod`, `stg`, `local` to change environment. Default is `stg`
|
|
onOpen: function () {
|
|
console.log('modal open');
|
|
},
|
|
onClose: function () {
|
|
console.log('modal closed');
|
|
},
|
|
onResponse: function (response) { // The callback to invoke when the Checkout process is completed
|
|
let statusComponent = document.getElementById('transactionForm:statustrans');
|
|
if(response.transaction.status == 'success'){
|
|
statusComponent.value='EXITANTE';
|
|
}else{
|
|
statusComponent.value='FALLIDO';
|
|
|
|
}
|
|
/**
|
|
* {"transaction":{"status":"success","authorization_code":"9X9Eyk","status_detail":3,"message":"Response by mock","id":"RB-142646","payment_date":"2022-10-14T17:06:46.969","payment_method_type":"0","dev_reference":"#234323411","carrier_code":"00","product_description":"Un arroz con pollo","current_status":"APPROVED","amount":5.58,"carrier":"Redeban","installments":1},"card":{"bin":"411111","status":"","token":"","expiry_year":"2024","expiry_month":"12","transaction_reference":"RB-142646","type":"vi","number":"1111","origin":"Paymentez"}}
|
|
* */
|
|
/**
|
|
//In Case of an error, this will be the response.
|
|
response = {
|
|
"error": {
|
|
"type": "Server Error",
|
|
"help": "Try Again Later",
|
|
"description": "Sorry, there was a problem loading Checkout."
|
|
}
|
|
}
|
|
|
|
//When the User completes all the Flow in the Checkout, this will be the response.
|
|
response = {
|
|
"transaction":{
|
|
"status": "success", // success or failure
|
|
"id": "CB-81011", // transaction_id
|
|
"status_detail": 3 // for the status detail please refer to: https://paymentez.github.io/api-doc/#status-details
|
|
}
|
|
}
|
|
*/
|
|
console.log('modal response', response);
|
|
let valorR = JSON.stringify(response);
|
|
console.log('>>>>>> TYPE OF VALOR R', typeof(valorR));
|
|
|
|
document.getElementById('response').innerHTML = valorR;
|
|
|
|
}
|
|
});
|
|
|
|
let btnOpenCheckout = document.querySelector('#btnOpen');
|
|
|
|
btnOpenCheckout.addEventListener('click', function () {
|
|
console.log(document.getElementById('formTramite:valorPagar'));
|
|
paymentCheckout.open({
|
|
user_id: '1231',
|
|
user_email: 'test@test.com', //optional
|
|
user_phone:'41231', //optional
|
|
order_description: 'Un arroz con pollo',
|
|
order_amount: parseFloat(document.getElementById('formTramite:valorPagar').value.replace(',','.')),
|
|
order_vat: 0,
|
|
order_reference: '#234323411',
|
|
order_installments_type: 1, // optional: The installments type are only available for Ecuador and Mexico. The valid values are: https://paymentez.github.io/api-doc/#payment-methods-cards-debit-with-token-base-case-installments-type
|
|
order_taxable_amount: 0, // optional: Only available for Ecuador. The taxable amount, if it is zero, it is calculated on the total. Format: Decimal with two fraction digits.
|
|
order_tax_percentage: 0, // optional: Only available for Ecuador. The tax percentage to be applied to this order.
|
|
currency: "USD",
|
|
country:"EC"
|
|
|
|
|
|
});
|
|
});
|
|
|
|
window.addEventListener('popstate', function () {
|
|
paymentCheckout.close();
|
|
});
|
|
</script>
|
|
<p:dialog widgetVar="dialog" resizable="false" closeOnEscape="true" modal="true" appendTo="@(body)" showEffect="explode" hideEffect="explode"
|
|
styleClass="m-dialog" style="width:500px !important">
|
|
<f:facet name="header">
|
|
<h:outputText value="#{msg_armas.lbl_tramites}" />
|
|
</f:facet>
|
|
<h:form id="formTramites">
|
|
<p:dataTable id="tblTramites" value="#{pagarTarjetaController.lrecord}" var="item" style="width:500px !important">
|
|
<p:column headerText="#{msg_armas.lbl_tramite}" resizable="true" sortBy="#{item.numerotramite}">
|
|
<p:outputLabel value="#{item.numerotramite}"/>
|
|
</p:column>
|
|
<p:column headerText="#{msg_armas.lbl_solicitud}" resizable="true" sortBy="#{item.modifiedData['solicitud']}" >
|
|
<p:outputLabel value="#{item.modifiedData['solicitud']}"/>
|
|
</p:column>
|
|
|
|
<p:column style="text-align:center">
|
|
<p:commandButton icon="ui-icon-copy" actionListener="#{pagarTarjetaController.solicitudSeleccionada(item)}"
|
|
process="@this tblTramites" update=":formTramite:filters :formTramite:documentotramite" oncomplete="PF('dialog').hide()"/>
|
|
</p:column>
|
|
</p:dataTable>
|
|
</h:form>
|
|
</p:dialog>
|
|
|
|
</ui:define>
|
|
|
|
|
|
</ui:composition> |