Question

我正在尝试基于用户在“ isStudent”单选按钮中选择的内容来实现可变数据量的Stripe自定义签出。该页面还包含一个表单，该表单需要在提交之前进行验证，我对此感到麻烦。

我正在使用$（“＃myForm”）。checkValidity（）检查表单。但是，然后条纹弹出窗口不显示，并提交了表单。没有表单有效性，请检查Stripe Checkout。

任何建议将不胜感激。

HTML表单的一部分：

<form id="myForm" action="assets/php/serverSideCode.php" method="POST">
    <input type="hidden" id="stripeToken" name="stripeToken" />
    <input type="hidden" id="stripeEmail" name="stripeEmail" />
    <input type="hidden" id="amountInCents" name="amountInCents" />

    <input  type="radio" name="isStudent"  value="FullTraining" checked> Full Registration: Symposium and Training ($490)</input> <br>
    <input  type="radio" name="isStudent"  value="Full"> Full Registration: Symposium only ($295) </input><br>  
    <input class="form-control input-lg" type="text" name="fname" id="fname" required />
</form>

JavaScipt部分：

//Custom Checkout
var handler = StripeCheckout.configure({
  key: 'pk_test_IVOG4db1mAIbNQlPEJgFyeKp',
  image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
  token: function(token) {
    $("#stripeToken").val(token.id);
    $("#stripeEmail").val(token.email);
    $("#amountInCents").val(Math.floor(parseFloat( $("#priceSpan").text() ) * 100));
    $("#myForm").submit();
  }
});



$('#customButton').on('click', function(e) {   
  // Form is invalid!
  if (! $("#myForm").checkValidity()) {
    // do nothing and prompt the user to fill out the name field
    e.preventDefault();  
  } else {
    // Form is valid, show stripe pop up
  var amountInCents = Math.floor(parseFloat($("#priceSpan").text()) * 100);
  var displayAmount = parseFloat(Math.floor(parseFloat($("#priceSpan").text()) * 100) / 100).toFixed(2);

  // Open Checkout with further options
  handler.open({
    name: 'Some Name',
    description: 'Registration ($' + displayAmount + ')',
    amount: amountInCents,
  });
  e.preventDefault(); 
}
});

// Close Checkout on page navigation
$(window).on('popstate', function() {
  handler.close();
});

Answer 1

因此，在表单验证之外，您可以通过多种配置来实现Checkout，例如：http://jsfiddle.net/ns2fezag/

有效地，对于您拥有的每个不同变体，您将拥有自己的自定义handler.open()调用。

$('#buyPants').on('click', function(e) {
  $("#product").val("pants");
  openCheckout("Buy pants for $50", 5000);
  e.preventDefault();
});

我会说，我建议您避免将金额传递给您的后端。由于前端使用Javascript，因此可以通过Web检查器轻松更改金额。因此，恶意用户可能会在致电您的后端之前更改金额（例如，从$ 100.00更改为$ 0.50），这将使他们破坏您的付款方式。相反，我建议您改回一个产品名称/ id，该名称/ id映射到您后端的适当数量。

条纹自定义结帐-表单验证

1 个答案: