條紋簽出 - 如何綁定提交事件？

我在我的網頁中使用了Stripe checkout JS庫。我需要儘快展現阻塞「我處理您的請求」消息令牌被提交到我的服務器條紋簽出 - 如何綁定提交事件？

我需要它，因爲我的服務器端處理可能需要超過5秒我不希望用戶離開頁面（或其他任何可能導致結帳過程無效的內容）。

我試圖綁定條形式的提交事件，以顯示模式（例如！），但事實證明，Checkout.js是解除綁定任何提交事件，似乎沒有辦法檢測實際的表單提交。

這裏是我的代碼：

<form class="stripe-form" action="..." method="POST"> 
    <script 
    src="https://checkout.stripe.com/checkout.js" class="stripe-button" 
    data-key="..." 
    data-email="..." 
    data-label="Pay with Stripe" 
    data-panel-label="Pay {{amount}}" 
    data-amount="... " 
    data-currency="USD" 
    data-name="..." 
    data-description="..." 
    data-image="..."> 
    </script> 
</form> 

<script type="text/javascript"> 
$(function(){ 

    stripeForm = $('.stripe-form'); 

    stripeForm.submit(function(e){ 
     console.log('going to submit'); //this is never called! 
    }); 

}); 
</script>

正如評論說，提交事件永遠不會觸發，我還沒有找到任何解決方法，以檢測它。有任何想法嗎？

注：我不包括更一般的Stripe library，只有StripeCheckout可用。

謝謝大家

來源

2014-04-01 alexcasalboni

-1

如果我是對的，您需要一個針對您的進程欄的AJAX請求。這可以在一個或兩個方法中返回'進度'（從未在我自己之前嘗試過）。

$('form.stripe-form').submit(function(){ 
    $.ajax({ 
     type:'POST', 
     data:{'data-key':'…','data-label':'Pay with Stripe','data-currency':'USD'/* etc */}, 
     beforeSend:function(xhr,XMLHttpRequest){ 
      //xhr.abort() to abort the ajax, say for validation: $('input').length<1 
      XMLHttpRequest.upload.addEventListener("progress",function(evt){ 
       if(evt.lengthComputable){ 
        var progress=evt.loaded/evt.total; 
        console.log(progress); 
       } 
      },false); 
     }, 
     success:function(result){ 
      console.log(result); 
     } 
}

我從來沒有使用條紋，所以我可能是完全錯誤的。根據條紋的要求（json，發佈數據等），您可能需要修改上述內容。說到進度報告和ajax可能仍然有效。但是，就像我之前提到的那樣，沒有嘗試過，所以你可能不得不改變我的答案，除非有人能爲你改變它。祝一切順利！

來源

2014-04-01 11:28:35 sourRaspberri

條紋工作方式不同：當它們的令牌創建回調（ajax）完成後，它們觸發表單提交（到我的服務器）。問題在於，我無法聽取任何特定事件，以便在表單提交之前執行某些操作（因爲它們解除了我的事件！）。 – alexcasalboni

@alexcasalboni啊好的。那麼插入一個動畫GIF呢？條紋是否提供有關事件處理的任何文檔？ – sourRaspberri

的確，這就是我指出的問題。我沒有設法用StripeCheckout庫監聽任何事件，我不能簡單地綁定一個自定義提交事件（我甚至試圖用任意超時重新綁定它）。 – alexcasalboni

我遇到同樣的問題。它在我看來像checkout.js插入一個iframe，所以沒有辦法綁定到我知道的提交事件。

我想要做的唯一事情就是當你點擊Pay with Stripe按鈕時顯示一個加載消息。

$(".stripe-button-el").click(function() { 
    $("#loadingMessage").show(); 
});

但是，如果用戶關閉了Stripe支付模式，則需要隱藏#loadingMessage。

來源

2016-05-01 00:17:22 NikB

如果您使用https://stripe.com/docs/checkout#integration-custom，則可以在提交表單之前使用類似下面的內容來創建疊加層。

var form = document.querySelector('form');  
var handler = StripeCheckout.configure({ 
    key: 'STRIPE_PUBLIC_KEY', 
    image: 'https://stripe.com/img/documentation/checkout/marketplace.png', 
    locale: 'auto', 
    token: function(response) 
    { 

     var overlay = document.createElement('div'); 
     overlay.className = 'my-overlay my-overlay--visible'; 

     document.body.appendChild(overlay); 

     form.submit(); 
    } 
});

來源

2017-03-13 16:37:03

條紋簽出 - 如何綁定提交事件？

回答

相關問題