无法使用 PHP 和 Stripe 支付网关验证表单答案

【问题标题】：Could not validate the form using PHP and Stripe payment gateway无法使用 PHP 和 Stripe 支付网关验证表单
【发布时间】：2019-08-25 17:51:58
【问题描述】：

我需要验证我使用 Stripe 支付网关定期支付的表单。我的代码如下。

<form method="post" action="charge.php" name="renew" onsubmit="return validate();">
<input type="radio" name="package" id="package" mode="normal" duration="30" text="1 Monat" value="29.90"> 29.90 € Pro Werbeanzeige-Laufzeit: 1 Monat<br>
<input type="radio" name="package" id="package" mode="normal" duration="60" text="2 Monate" value="49.90"> 49.90 € Pro Werbeanzeige-Laufzeit: 2 Monate<br>
<input type="radio" name="package" id="package" mode="normal" duration="90" text="3 Monate" value="59.90"> 59.90 € Pro Werbeanzeige-Laufzeit: 3 Monate<br>
<input type="radio" name="package" id="package" mode="recurring" duration="30" text="Monate" value="19.90"> 19,90 € Monate<br>
<input name="oid" type="hidden" value="<?=$oid;?>" />
<input name="mode" id="mode" type="hidden" value="" />
<input name="duration" id="duration" type="hidden" value="" />
<!--<input type="submit" name="makepayment" value="Pay" > -->
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
          data-key="<?php echo $stripe['publishable_key']; ?>"
          data-name="GOALSTART"
          data-description="1 Monate"
          data-panel-label="Abonnieren"
          data-label="PAY NOW"
          data-locale="auto">></script>
</form>
<script type="text/javascript">
  function validate(){
    console.log('hello');
    if (document.getElementById('package').checked) {
        //alert("checked submit form");
        return true;
    } else {
        alert("Unchecked form will not be submitted");
        return false;
    }
  }
</script>

这里我需要如果单选按钮没有选中那么表单将不会提交。但根据我的代码，它无法检查验证。

【问题讨论】：

您有多个元素都具有相同的 ID。 ID 应该是唯一的，所以当您getElementById 时，您只会获得找到该 ID 的第一个元素，而不是所有元素。
@PaulAsjes：应该先调用验证函数。
这无关紧要，正如所指出的，您有无效的重复 ID。大多数聪明的编辑会将此标记为问题。除了data-locale 之后的额外/不正确的结束标记“>”。
这可以关闭为这个问题是由一个无法再复制的问题或一个简单的印刷错误引起的。虽然类似的问题可能是这里的主题，但这个问题的解决方式不太可能帮助未来的读者。

标签： php stripe-payments

【解决方案1】：

在 checkout.stripe.com 脚本周围添加一个 div。由于“立即付款”是动态生成的，因此您无法对其进行太多控制。所以你可以通过以下方法限制点击它。

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form method="post" action="charge.php" name="renew" onsubmit="validate();">
<input type="radio" name="package" id="package-1" mode="normal" duration="30" text="1 Monat" value="29.90" required="true"> 29.90 € Pro Werbeanzeige-Laufzeit: 1 Monat<br>
<input type="radio" name="package" id="package-2" mode="normal" duration="60" text="2 Monate" value="49.90"> 49.90 € Pro Werbeanzeige-Laufzeit: 2 Monate<br>
<input type="radio" name="package" id="package-3" mode="normal" duration="90" text="3 Monate" value="59.90"> 59.90 € Pro Werbeanzeige-Laufzeit: 3 Monate<br>
<input type="radio" name="package" id="package-4" mode="recurring" duration="30" text="Monate" value="19.90"> 19,90 € Monate<br>
<input name="oid" type="hidden" value="<?=$oid;?>" />
<input name="mode" id="mode" type="hidden" value="" />
<input name="duration" id="duration" type="hidden" value="" />
<!--<input type="submit" name="makepayment" value="Pay" > -->
<div class="checkout-part-wrapper">
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
          data-key="<?php echo $stripe['publishable_key']; ?>"
          data-name="GOALSTART"
          data-description="1 Monate"
          data-panel-label="Abonnieren"
          data-label="PAY NOW"
          data-locale="auto">>
</script>
</div>
</form>
<script type="text/javascript">
  jQuery('.checkout-part-wrapper').css('pointer-events', 'none');
  jQuery('input[type=radio][name=package]').change(function() {
    jQuery('.checkout-part-wrapper').css('pointer-events', 'auto');
  });
</script>
</body>
</html>

【讨论】：

+1 虽然我认为最好遵守 Stripes 规则/使用官方支持的方式来生成带有自定义输入等的结帐。

【解决方案2】：

改变这一行

if (document.getElementById('package').checked) {

到

if (document.querySelectorAll('input[name=package]:checked').length) {

【讨论】：

不，该函数根本没有调用。
@satya 1. 提交按钮在问题中被注释掉。 2. onsubmit="return validate();"将在表单提交时调用验证函数。 3.如果看不到任何输出，请尝试开发者工具并在启用保留日志选项后检查控制台选项卡（或者简单地将alert（）函数而不是console.log）
"问题中的提交按钮被注释掉" 一个/alternative/提交按钮被注释掉，实际使用的提交按钮是JS引入的'stripe-button'（顺便说一下部分是什么导致了这里的头痛）。
mikeyjk 啊！谢谢！我没注意到。 @satya你检查了吗？ stripe.com/docs/stripe-js/elements/…
@mikeyjk 你是对的。最好查看 Stripe 文档。我只是在他的 javascript 代码中指出了问题。