从自定义按钮调用条带结帐表单

时间:2014-10-03 13:02:59

标签: jquery wordpress forms wordpress-plugin stripe-payments

我有以下price table.请注意,这不是我想要修改的实际表格,但所有HTML和CSS都是相同的。

当客户点击提交按钮时,我想使用Stripe致电Simple Strike Checkout plugin结帐表单。

根据文档here,我需要使用自定义JQuery并按照问题的说明进行操作"如何从自定义按钮或链接调用结帐表单?"

具体来说,我需要遵循这一部分

  

每个Stripe表单都分配了自己唯一的“id”属性,例如" sc_checkout_form_1",>" sc_checkout_form_2"等等。您只需要触发提交事件您的目标表格。

     

例如,要在页面上使用包含ID>“my_custom_button”的按钮触发第一个Stripe表单,请使用以下脚本:

     

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

我遇到的问题是我的按钮没有唯一的ID属性,可以让我识别它们。在与Phil Derksen联系Stripe支持后,他建议,&#34;您需要使用元素的类或以某种方式确定如何检测每个特定按钮元素上的点击。&#34; < / p>

是否有人能够扩展这一点并提供更具体的解决方案?

谢谢!

3 个答案:

答案 0 :(得分:1)

您需要在jQuery中遍历DOM - http://jqfundamentals.com/chapter/traversing-manipulating

或者更快/更简单的方法你可以放置html(从源代码复制)创建wordpress主题中的短代码,然后在wordpress的文本视图中编辑它,这样你就可以为你的ID元素分配一个ID元素按钮!

我希望能提供一些帮助,让我知道你是怎么做到的。

答案 1 :(得分:0)

请尝试以下链接:Checkout - v2

请参阅自定义按钮部分。您只需要通过jQuery识别自定义按钮。如果不是ID,则按类或遍历页面上的每个控件,并根据某些属性识别按钮。然后附上活动。

答案 2 :(得分:0)

<强> HTML

  • 数据金额以美分表示
  • value是显示文字
  • data-billing-address添加了帐单邮寄地址字段
  • data-shipping-address添加送货地址字段

HTML CODE

$('.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);
});

事件处理程序

  • 确保在处理程序
  • 之前加载stripejs和JQuery
  • POST使用JQuery方法
  • 期望来自服务器ex NODE的回调 res.send(&#39; / charge&#39;)

JS CODE

RewriteRule ^/?products|Main/abcd_?blue_?small.*$ /scrpts/abcd_blues_small.php      [NC,R,L]
RewriteRule ^/?products|Main/abcd_?red_?big.*$ /scrpts/abcd_red.big.php      [NC,R,L]
RewriteRule ^/?products|Main/abcd_?green.*$ /scrpts/abcd_green.php      [NC,R,L]
RewriteRule ^/?products|Main/abcd_?yellow_?large.*$ /scrpts/abcd_yellow.php      [NC,R,L]