Jquery append Stripe支付按钮返回[objecthtmlscriptelement]


Jquery append Stripe pay button returns [object HTMLScriptElement]

我试图通过jquery附加Stripe支付与卡按钮。我附加它是因为我想在用户满足某个要求时显示它,而且因为价格是可变的。

到目前为止我有这段代码

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]。

如何使按钮出现?

您正在使用一个对象作为字符串。这是你的解决方案。

下面是修改后的代码。我使用了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/