javascript - Jquery append Stripe 支付按钮返回 [object HTMLScriptElement]

Question

我正在尝试通过 jquery 附加 Stripe pay with card 按钮。我附加它是因为我希望它在用户满足特定要求后显示，而且价格是可变的。

到目前为止我有这段代码

var script=document.createElement('script');
                            script.src="https://checkout.stripe.com/checkout.js";
                            script.class="stripe-button";
                            $(script).prop({"data-key" : "pk_test_gJIeYpuvZc56uI22j5yr7h3s", "data-amount" : '"' + amount_paid + '"', "data-name" : "website.com", "data-description" : '"' + purch_item + ' ($'+ final_value +')"', "data-image" : "image.png"});
$('.payment_stripe_span').append('<form action="make_payment.php" method="POST">' + script + '</form>');

但是，这会打印 [object HTMLScriptElement]。

如何让按钮出现？

Answer 1

您正在将对象用作字符串。这是您的解决方案。

这里是修改后的代码。我使用了 javascript 的 setAttribute 方法。

var script=document.createElement('script');
var amount_paid = 10;
var purch_item = 'Test';
var final_value = 15;

script.src="https://checkout.stripe.com/checkout.js";

script.setAttribute("class", "stripe-button");
script.setAttribute("data-key", "pk_test_gJIeYpuvZc56uI22j5yr7h3s");
script.setAttribute("data-amount", amount_paid);
script.setAttribute("data-name", "website.com");
script.setAttribute("data-description", '"' + purch_item + ' ($'+ final_value +')"');
script.setAttribute("data-image", "image.png");

$('.payment_stripe_span').append('<form action="make_payment.php" method="POST" id="my_frm">Form ( Inspect here to check if the DOM is added or not? )</form>');

$(script).appendTo("#my_frm");

jsfiddle 链接 http://jsfiddle.net/kzfkuv3m/3/