JSF + JS -> 只有在一切都成功时才执行重定向（条纹）
Posted
技术标签:
【中文标题】JSF + JS -> 只有在一切都成功时才执行重定向（条纹）【英文标题】：JSF + JS -> Execute Redirect only if everything is successful (Stripe) 【发布时间】：2022-01-18 15:08:48 【问题描述】：我有一个使用 Stripe API 的订单结账页面。 我正在使用 JSF 和 Stripe JS 库：
这是我的图形用户界面：
这里是我的 JSF/JS 代码：
<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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions"
xmlns:jsf="http://xmlns.jcp.org/jsf"
template="/WEB-INF/layout/portal/template.xhtml">
<ui:define name="head" />
<ui:define name="title">Bestellseite</ui:define>
<ui:define name="content">
<script type="text/javascript" src="https://js.stripe.com/v3/" />
<script>
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('#billingOrderProcessEditController.publicKey');
const options =
clientSecret: '#billingOrderProcessEditController.paymentIntent.clientSecret',
;
// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 2
const elements = stripe.elements(options);
// Create and mount the Payment Element
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');
const form = document.getElementById('payment-form');
form.addEventListener('submit', async(event) =>
event.preventDefault();
// Create BillingOrder
createOrder();
const error = await stripe.confirmPayment(
//Elements instance that was used to create the Payment Element
elements,
confirmParams:
return_url: '#billingOrderProcessEditController.redirectPage',
,
);
if (error)
// This point will only be reached if there is an immediate error when
// confirming the payment. Show error to your customer (e.g., payment
// details incomplete)
const messageContainer = document.querySelector('#error-message');
messageContainer.textContent = error.message;
else
// Your customer will be redirected to your return_url. For some payment
// methods like iDEAL, your customer will be redirected to an intermediate
// site first to authorize the payment, then redirected to the return_url.
);
</script>
<h:form id="payment-form" prependId="false">
<div class="ui-g ui-fluid">
<div class="ui-g-12 ui-lg-6">
<p:panel id="billingOrderDetails_container"
styleClass="grayPanel">
<f:facet name="header">
<i class="fa fa-file-o fa-lg"></i>
<h:outputText value="Ihre Rechnungsdaten"
styleClass="FontBold Fs12" style="margin-left: 10px;" />
</f:facet>
<p:panelGrid columns="1" layout="grid"
styleClass="ui-panelgrid-blank grid-pad"
style="margin-top:10px">
<h:panelGroup id="billingOrder_surname_container">
<p:outputLabel for="billingOrder_surname" value="Vorname:" />
<p:inputText id="billingOrder_surname" required="true"
requiredMessage="Bitte Vorname angeben"
value="#billingOrderProcessEditController.billingPaymentBearer.tempAddress.surname"
placeholder="Bitte Vorname eingeben" styleClass="Wid90">
<p:ajax event="blur" update="@parent" global="false" />
</p:inputText>
</h:panelGroup>
<div class="EmptyBox2"></div>
</p:panelGrid>
</p:panel>
</div>
<div class="ui-g-12 ui-lg-6">
<p:panel styleClass="grayPanel">
<f:facet name="header">
<i class="fa fa-eur fa-lg"></i>
<h:outputText value="Ihre Zahlungsdaten"
styleClass="FontBold Fs12" style="margin-left: 10px;" />
</f:facet>
<div id="payment-element">
<!-- Elements will create form elements here -->
</div>
<div id="error-message">
<!-- Display error message to your customers here -->
</div>
</p:panel>
</div>
</div>
<div class="EmptyBox10"></div>
<button id="submit"
jsf:rendered="#billingOrderProcessEditController.billingOrder != null"
onclick="startPayment(); PF('statusDialog').show();"
style="background-color: #4CAF50; border: 1px solid #4CAF50; border-radius: 3px; color: white; padding: 6px 16px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; font-weight: bold">
<span class="fa fa-save"></span> <span>Zahlungspflichtig
bestellen</span>
</button>
<p:remoteCommand name="startPayment"
update=":growl, @form:billingOrderDetails_container"
process="@form" />
<p:remoteCommand name="createOrder" async="true"
actionListener="#billingOrderProcessEditController.doSaveOrderAndStartPayment()" />
</h:form>
</h:panelGroup>
<div class="EmptyBox20"></div>
</div>
</div>
</div>
</ui:define>
我的问题如下，我很确定我必须更改 JS 代码中的某些内容：
如果我填写信用卡部分（右侧）而不是左侧，重定向将起作用....但重定向应该只在用户填写右侧和左侧时才起作用。知道如何解决这个问题吗？
【问题讨论】：
【参考方案1】：这是您在应用程序逻辑中处理的事情。从本质上讲，您需要在致电stripe.confirmPayment 进入付款流程之前验证您的表格是否符合您的要求。
您可以通过多种方式执行此操作，例如在填写表单之前阻止按钮，或者在点击处理程序事件中检查表单并显示一些有关完成缺失字段的用户反馈消息。
【讨论】：
是的，正确...但是为此我需要帮助，我需要在代码中采用这些帮助...结合 JSF 和 JS 似乎有问题... 你能帮忙吗？ 您似乎没有任何代码尝试验证其他详细信息。你试过添加这个吗？什么不符合您的预期？以上是关于JSF + JS -> 只有在一切都成功时才执行重定向（条纹）的主要内容，如果未能解决你的问题，请参考以下文章
iPhone 应用程序只有在 3GS 用户在 iTunes 中升级时才会出现问题？