从自定义按钮调用 Stripe 结帐表单答案

【问题标题】：Calling a Stripe checkout form from a custom button从自定义按钮调用 Stripe 结帐表单
【发布时间】：2014-11-28 13:00:44
【问题描述】：

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

我想在客户单击提交按钮时使用Simple Strike Checkout plugin 调用Stripe 结帐表单。

根据文档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 属性可以让我识别它们。在与 Stripe 支持部门的 Phil Derksen 联系后，他建议：“您需要使用元素的类，或者以某种方式确定如何检测每个特定按钮元素上的点击。”

有人可以对此进行扩展并提供更具体的解决方案吗？

谢谢！

【问题讨论】：

标签： jquery forms wordpress stripe-payments

【解决方案1】：

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

或者更快/更简单的方法，您可以将短代码在您的 wordpress 主题中创建的 html（从源代码复制）放置，然后在 wordpress 的文本视图中编辑它，这样您就可以为您的按钮！

我希望能给你一些帮助，让我知道你的进展如何。

【讨论】：

【解决方案2】：

尝试以下链接：Checkout - v2

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

【讨论】：

【解决方案3】：

HTML

数据量以美分表示
value 是显示文本
data-billing-address 添加帐单地址字段
data-shipping-address 添加送货地址字段

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 方法
预计来自服务器前节点的回调 res.send('/charged')

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);
});

【讨论】：