Javascript Stripe.js和hcaptcha，其中hcaptcha绑定到按钮_Javascript_Button_Stripe Payments_Captcha_Hcaptcha

Javascript Stripe.js和hcaptcha，其中hcaptcha绑定到按钮

javascript button stripe-payments

Javascript Stripe.js和hcaptcha，其中hcaptcha绑定到按钮,javascript,button,stripe-payments,captcha,hcaptcha,Javascript,Button,Stripe Payments,Captcha,Hcaptcha,代码： JS-Bin 电邮：国际电话：全名：地址行1：地址行2：城市：州或省： 2个字母的国家代码（）：提交函数（令牌）{ 如果（window.history.replaceState）{ window.history.replaceState（null，null，window.location.href）； } var form=document.getElementById（“付款单”）； document.getElementById（“卡按钮”）.disabled=tru

代码：


JS-Bin
电邮：
国际电话：
全名：
地址行1：
地址行2：
城市：
州或省：
2个字母的国家代码（）：
提交函数（令牌）{
如果（window.history.replaceState）{
window.history.replaceState（null，null，window.location.href）；
}
var form=document.getElementById（“付款单”）；
document.getElementById（“卡按钮”）.disabled=true；
表单提交（）；
if（event.error）{
document.getElementById（“卡按钮”）.disabled=false；
}
}
信用卡或借记卡：
付款
//创建条带客户端。
var条带=条带（“pk_测试_tcuxCLB8Y8NN8H3OPcR6ALKh00UjP2WfYt”）；
//创建元素的实例。
var elements=stripe.elements（）；
var cardButton=document.getElementById（“卡片按钮”）；
var CANDERNAME=document.getElementById（“持卡人名称”）；
//var cardElement=elements.create（“卡片”）；
//var cardElement=elements.create（“卡片”）；
//卡元件。安装（“卡元件”）；
var line1=document.getElementById（“line1”）；
var line2=document.getElementById（“line2”）；
var city=document.getElementById（“城市”）；
var country=document.getElementById（“国家”）；
var email=document.getElementById（“电子邮件”）；
var phone=document.getElementById（“电话”）；
var state=document.getElementById（“state”）；
变量样式={
基数：{
颜色：'黑色'，
iconColor:'黑色'，
fontSize:'15px'，
fontFamily:'机器人'，无衬线'，
fontSmoothing:'抗锯齿'，
“：：占位符”：{
颜色：'黑色'，
},
},
无效：{
颜色：''，
“：焦点”：{
颜色：''，
},
},
};
var cardeelement=elements.create（'card'，{style:style}）；
挂载（“#卡元素”）；
//将card元素的实例添加到“card元素”中。
//处理来自卡元素的实时验证错误。
cardElement.addEventListener（“更改”，函数（事件）{
var displayError=document.getElementById（“卡错误”）；
if（event.error）{
displayError.textContent=event.error.message；
}否则{
displayError.textContent=“”；
}
});
//处理表格提交。
//.value.trim（）| | null用于将表单输入更改为数据收集所需/可选。最初是。仅值。
var form=document.getElementById（“付款单”）；
表单。addEventListener（“提交”，函数（事件）{
event.preventDefault（）；
document.getElementById（“卡按钮”）.disabled=true；
var billingInfo={
账单详情：{
名称：CANDERNAME.value.trim（）| | null，
地址:{
line1:line1.value.trim（）| | null，
line2:line2.value.trim（）| | null，
city:city.value.trim（）| | null，
state:state.value.trim（）| | null，
country:country.value.trim（）| | null，
},
email:email.value，
phone:phone.value.trim（）| | null，
}
};
stripe.createPaymentMethod（'card'，cardElement，billingInfo.），然后（函数（结果）{
if（result.error）{
//如果出现错误，请通知用户。
var errorElement=document.getElementById（“卡错误”）；
errorElement.textContent=result.error.message；
document.getElementById（“卡按钮”）.disabled=false；
}否则{
//将令牌发送到服务器。
//setTimeout（stripeSourceHandler（result.paymentMethod.id），3000）；
stripeSourceHandler（result.paymentMethod.id）；
}
});
});
//提交带有源ID的表单。
功能条带ResourceHandler（付款方法id）{
var form=document.getElementById（“付款单”）；
var hiddenInput=document.createElement（“输入”）；
setAttribute（“类型”、“隐藏”）；
setAttribute（“名称”、“付款方式”）；
hiddenInput.setAttribute（“值”，付款方法id）；
表格.appendChild（hiddenInput）；
//将源ID插入表单，以便将其提交到服务器
//提交表格
表单提交（）；
}

我正试图用hcaptcha实现这一点：

我正在尝试将它与stripe.js结合起来

我认为问题与按钮的数据回调有关。因为有两个单独的表单。submit（）；在我的代码中，它不知道运行哪一行

我的问题是，如何将我的stripe javascript与我的hcaptcha javascript结合起来，使它们协同工作

错误：

“没有这样的PaymentMethod”->如果我使用data callback=“stripeSourceHandler”

“无法识别的请求URL（POST:/v1/payment\u methods//attach）->如果使用数据回调=“onSubmit”

我认为这与我的服务器代码无关。如果我删除客户端的所有hcaptcha代码，服务器端的一切都会正常工作。如果我使用常规的hcaptcha checkbox小部件而不是绑定到按钮，那么一切都会正常工作，因为没有数据回调。但是我想把hcaptcha绑定到一个按钮上，因为它比checkbox小部件更好

我在其他表单网页中使用onSubmit函数，hcaptcha工作正常，因为其他表单网页中不涉及stripe

其他想法：

onSubmit不调用创建Stripe PaymentMethod的代码部分。让创建在自己的函数中进行，如callStripe（），然后在验证码部分之后调用PaymentMethod创建函数

调用hcaptcha.render（）以显示验证码，然后创建PaymentMethod并提交表单

是什么实际触发了验证码流？提交时的

onSubmit

不会显示为h

<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  

<form id="payment-form" action="." method="post">
    <input type="hidden" name="csrfmiddlewaretoken" value="06dAlJhwvSjVK7u4CZcyAbsa9Ikn9EYsiFGxFpA8z3W2wsr0UMKb8KIxNmYbyFYg">
    <p><label for="email">Email:</label> <input type="email" name="payment_email" value="paus@prositeportal.ru" class="form-control" autocomplete="off" id="email" readonly="readonly" required></p>
<p><label for="phone">International Phone:</label> <input type="tel" name="payment_phone" class="form-control" autocomplete="off" id="phone" placeholder="International Phone" required></p>
<p><label for="cardholder-name">Full Name:</label> <input type="text" name="payment_name" class="form-control" autocomplete="off" id="cardholder-name" placeholder="Full Name" required></p>
<p><label for="line1">Address Line 1:</label> <input type="text" name="payment_address1" class="form-control" autocomplete="off" id="line1" placeholder="Address 1" required></p>
<p><label for="line2">Address Line 2:</label> <input type="text" name="payment_address2" class="form-control" autocomplete="off" id="line2" placeholder="Address 2"></p>
<p><label for="city">City:</label> <input type="text" name="payment_city" class="form-control" autocomplete="off" id="city" placeholder="City" required></p>
<p><label for="state">State or Province:</label> <input type="text" name="payment_state" class="form-control" autocomplete="off" id="state" placeholder="State or Province" required></p>
<p><label for="country">2 Letter Country Code (<a href="https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements" target="_blank" rel="noopener noreferrer nofollow">Find Your Country Code</a>):</label> <input type="text" name="payment_country" class="form-control" autocomplete="off" id="country" maxlength="2" placeholder="Country Code" required></p>


      <script nonce="tKD42vLlpXoOTvs+kP4PUQ==" src="https://hcaptcha.com/1/api.js" async defer></script>

<script nonce="tKD42vLlpXoOTvs+kP4PUQ==">
  function onSubmit(token) {
      if ( window.history.replaceState ) {
        window.history.replaceState( null, null, window.location.href );
      }
        var form = document.getElementById("payment-form");
        document.getElementById("card-button").disabled = true;
        form.submit();
        if (event.error) {
            document.getElementById("card-button").disabled = false;
        }
  }
</script>



            <label>
              Credit or Debit Card:
            </label>
            <div id="card-element" class="form-control stripe_card_padding">
            <!-- A Stripe Element will be inserted here. -->


        </div>
        <!-- Used to display form errors. -->
        <div id="card-errors" class="stripe_card_errors" role="alert" ></div>



        <!-- <div id="stripe-result-handler" class="is-hidden">
          Success! Got token: <span class="result"></span>
        </div> -->


        <button
          id="card-button"
          type="submit"
          class=" form-control payment_button h-captcha"
          data-sitekey="8b425911-fa93-429c-a98c-4c56b93b6662"
          data-callback="onSubmit"
        >
          Submit Payment
        </button>

      </form>



  <script nonce="tKD42vLlpXoOTvs+kP4PUQ==" src="https://js.stripe.com/v3/"></script>
  <script nonce="tKD42vLlpXoOTvs+kP4PUQ==">
  // Create a Stripe client.
    var stripe = Stripe("pk_test_tcuxCLB8Y8NN8H3OPcR6ALKh00UjP2WfYt");

    // Create an instance of Elements.
    var elements = stripe.elements();
    var cardButton = document.getElementById("card-button");
    var cardholderName = document.getElementById("cardholder-name");
//var cardElement = elements.create("card");
    //var cardElement = elements.create("card");
    //cardElement.mount("#card-element");
    var line1 = document.getElementById("line1");
    var line2 = document.getElementById("line2");
    var city = document.getElementById("city");
    var country = document.getElementById("country");

    var email = document.getElementById("email");
    var phone = document.getElementById("phone");
    var state = document.getElementById("state");


var style = {
  base: {
    color: 'black',
    iconColor: 'black',
    fontSize: '15px',
    fontFamily: '"Roboto", sans-serif',
    fontSmoothing: 'antialiased',
    '::placeholder': {
      color: 'black',
    },
  },
  invalid: {
    color: '',
    ':focus': {
      color: '',
    },
  },
};




var cardElement = elements.create('card', {style: style});
cardElement.mount('#card-element');



    // Add an instance of the card Element into the `card-element` <div>.
    // Handle real-time validation errors from the card Element.
    cardElement.addEventListener("change", function (event) {
      var displayError = document.getElementById("card-errors");
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = "";
      }
    });
    // Handle form submission.
    //.value.trim() || null is needed to change the form input to required/optional for data collection. Was originally .value only.
    var form = document.getElementById("payment-form");
    form.addEventListener("submit", function (event) {
      event.preventDefault();
      document.getElementById("card-button").disabled = true;
      var billingInfo = {
      billing_details: {
        name: cardholderName.value.trim() || null,
        address: {
          line1: line1.value.trim() || null,
          line2: line2.value.trim() || null,
          city: city.value.trim() || null,
          state: state.value.trim() || null,
          country: country.value.trim() || null,
        },
        email: email.value,
        phone: phone.value.trim() || null,
      }
    };
      stripe.createPaymentMethod('card', cardElement, billingInfo).then(function (result) {
        if (result.error) {
          // Inform the user if there was an error.
          var errorElement = document.getElementById("card-errors");
          errorElement.textContent = result.error.message;
          document.getElementById("card-button").disabled = false;
        } else {
          // Send the token to your server.
          //setTimeout(stripeSourceHandler(result.paymentMethod.id), 3000);
          stripeSourceHandler(result.paymentMethod.id);
        }
      });
    });


    // Submit the form with the source ID.
    function stripeSourceHandler(payment_method_id) {
      var form = document.getElementById("payment-form");
      var hiddenInput = document.createElement("input");
      hiddenInput.setAttribute("type", "hidden");
      hiddenInput.setAttribute("name", "PaymentMethod");
      hiddenInput.setAttribute("value", payment_method_id);
      form.appendChild(hiddenInput);
      // Insert the source ID into the form so it gets submitted to the server
      // Submit the form
      form.submit();
    }


  </script>