使条带“数据量”使用带有变量的动态答案

【问题标题】：Make stripe "data-amount" use a dynamic with a variable使条带“数据量”使用带有变量的动态
【发布时间】：2016-02-04 22:06:08
【问题描述】：

我需要让我的脚本结帐以使用我的var $priceCheckout = $('#priceCheckout'); 作为结帐价格值。

我尝试将 data-amount="2000" 替换为 data-amount= $priceCheckout;，但没有任何运气。所以要清楚！

它需要获取我的 $priceCheckout 并将其放置在 data-amount 中，以便 $priceCheckout 的值将是结帐价格！

<form action="" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="Personal key"
    data-amount= ???
    data-name="Elo Calculator"
    data-description="Checkout price"
    data-image="/128x128.png"
    data-locale="auto">
  </script>
</form>

这是我的脚本。

$(function () {
            // Store references to frequently used elements - for speed.
            var $divFrom = $('#division-from');
            var $divTo = $('#division-to');
            var $tierFrom = $('#tier-from');
            var $tierTo = $('#tier-to');

            var $price = $('#price');
            var $priceCheckout = $('#priceCheckout');

            // Select price calculation callback
            $(document).on('change', '.price-modifier', function () {
                var divFrom = $divFrom.val();
                var divTo = $divTo.val();
                var tierFrom = $tierFrom.val();
                var tierTo = $tierTo.val();

                // Error handling
                var errors = validatePriceModifiers(divFrom, tierFrom, divTo, tierTo);
                if (errors.length === 0) {
                    // No errors
                    var price = getPrice(divFrom, tierFrom, divTo, tierTo);
                    $price.html(price + ' €' + '<br /> <br />' + '<button type="submit" data-toggle="modal" data-target="#myModal" class="btn btn-info">Buy</button>');
                    $priceCheckout.html(price);
                } else {
                    // Display errors
                    $price.empty();
                    for (var i = 0; i < errors.length; i++) {
                        $price.append($('<p>').html(errors[i].message));
                    }
                }
            });
        });

【问题讨论】：

我不确定你到底在问什么，你能试着澄清你的问题并修正任何拼写/语言错误吗？
我不擅长英语嗯。这是因为我有一个价格计算器，如果您选择 1 个东西，它会给出 1 个价格，如果您选择另一个，它会给出另一个价格。我需要它，以便它的价格是我结帐的数据量。我有一个名为 $priceCheckout 的变量，它包含我所有的价格。这就是我需要将其添加到 data-amount = "" 的价格
$('.stripe-button').attr('data-amount', $priceCheckout); 现在在您的代码中，$priceCheckout 不是一个值，而是一个 jq 对象。无论如何，我看不出它的目的。您至少应该尝试提供 MCVE

标签： jquery stripe-payments

【解决方案1】：

您需要为此使用 Checkout custom integration。

这是一个简单的小提琴，展示了如何使用用户指定金额的 Checkout：https://jsfiddle.net/ywain/g2ufa8xr/

您可以使用相同的逻辑在对handler.open() 的调用中插入您自己的值作为amount 参数。

【讨论】：

您可以尝试使用我的#priceCheckout 进行设置吗？我不能让它工作:(真的很好。这是我用来计算价格的：var $priceCheckout = $('#priceCheckout'); .

【解决方案2】：

这里的关键是data-amount 是HTML 脚本标签的一个属性。它不是一个JavaScript变量，你可以不是在HTML标记中直接给它赋值（比如<element attribute=variable-name>）。

但是，您可以使用 JavaScript 为它分配一个值，如下所示：

$('.stripe-button').attr('data-amount', $priceCheckout);

该代码会将任何具有stripe-button 类的HTMl 元素的属性data-amount 更改为代码运行时变量$priceCheckout 的值。

那么你想什么时候运行它？您需要在将$priceCheckout 设置为变量后运行它（如果价格发生变化，您需要再次运行它以更新）。但是您需要在使用该值的任何代码运行之前运行它。

【讨论】：

那你可能设置的时间不对。

【解决方案3】：

您可以使用 Stripe 的自定义结帐。虽然，我通过 jQuery 找到了一种更简单的方法，只需在每次增加数量时使用更改的变量重新安装脚本即可：

var $priceCheckout = $('#priceCheckout');

$("#stripe-form").html(
  '<script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_123123123123" data-amount="' +
    $priceCheckout.replace(".", "") +
    '" data-zip-code="true" data-currency="usd" data-billing-address="true" data-shipping-address="true" data-name="Company Name" data-description="Product Name" data-image="https://image" data-locale="auto"></script>'
);

【讨论】：