2014-10-03 86 views
1

我有以下price table.請注意,這是不實際的表我想修改,但所有的HTML和CSS的是相同的條紋結賬的形式。從調用自定義按鈕

當客戶點擊提交按鈕時,我想使用Simple Strike Checkout plugin來呼叫Stripe結賬表單。

根據文檔here,我需要使用自定義JQuery並按照問題的說明操作:「如何從自定義按鈕或鏈接調用結帳窗體?」

具體來說,我需要遵循本節

每個條帶的形式分配它自己的獨特的「id」屬性,如「sc_checkout_form_1」>「sc_checkout_form_2」等你只需要觸發目標表單的提交事件。

例如,以觸發與包含ID的按鈕>「my_custom_button」頁面上的第一條帶的形式,使用該腳本:

jQuery('#my_custom_button').click(function(e) { e.preventDefault(); jQuery('#sc_checkout_form_1').submit(); });

我具有的問題是,我的按鈕沒有唯一的ID屬性可以讓我識別它們。在與Stripe支持部門的Phil Derksen聯繫後,他建議:「您需要使用該元素的類或以某種方式確定如何檢測每個特定按鈕元素上的點擊。」

會有人能夠擴大這一點,並提供更具體的解決方案?

謝謝!

回答

1

你需要遍歷jQuery中的DOM - http://jqfundamentals.com/chapter/traversing-manipulating

或許更快/你可以只將(從源代碼複製)的HTML,在你的WordPress主題簡碼創建更簡單的方法,然後修改在WordPress中的文本視圖,所以你可以一個ID元素分配給您的按鈕!

我希望能提供一些幫助,讓我知道你是怎麼做到的。

0

嘗試以下鏈接:Checkout - v2

請參閱自定義按鈕部分。你只需要通過jQuery來識別你的自定義按鈕。如果沒有ID,則通過類或遍歷頁面上的每個控件並根據某些屬性識別按鈕。然後附上活動。在美分

0

HTML

  • 數據量被表示
  • 值是顯示文本
  • 數據的計費地址增加的帳單地址字段
  • 數據送貨地址添加航運地址字段

HTML代碼

<input 
    type="button" 
    class="stripeBtn" 
    value="Proceed to Checkout" 
    data-key="***" 
    data-description="***" 
    data-amount= *** 
    data-currency="usd" 
    data-name="***" 
    data-billing-address="true" 
    data-shipping-address="true" 
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"/> 

事件處理程序

  • 確保處理程序之前加載stripejs和JQuery
  • POST用了jQuery方法
  • 預計從服務器前NODE res.send(回調」/charge')

JS代碼

$('.stripeBtn').on('click', function(event) { 
event.preventDefault(); 
var $button = $(this); 
var opts = $.extend({}, $button.data(), { 
    token: function(result, args) { 
     //result contains token and card info 
     //args contains for shipping and billing info 

     //disable stripe button 
     $('.stripeBtn').prop('disabled', true); 

     //POST to route 
     $.post("/charge",{ 
     token: result.id, 
     card: result.card, 
     email: result.email, 
     args: args}).success(function(data) { 
     //data is the callback 
     window.location = data; 
     });; 
    } 
}); 
StripeCheckout.open(opts); 
});