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

Posted 2023-05-09

【中文标题】从自定义按钮调用 Stripe 结帐表单

【英文标题】：Calling a Stripe checkout form from a custom button

【发布时间】：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 联系后，他建议：“您需要使用元素的类，或者以某种方式确定如何检测每个特定按钮元素上的点击。”

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

谢谢！

【参考方案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);
);