选择更改时是否需要重新渲染PayPal的智能按钮？

Question

我的页面上有一个选择元素。此选择元素选择产品的不同变体。所有这些产品的价格都相同，但我想在发票上注明选择了哪种产品。我正在使用PayPal智能按钮将结帐集成到我的页面上。假设我有以下内容：

<select id="product-select">
<option value="product-A" selected> Product A </option>
<option value="product-B"> Product B </option>
<option value="product-C"> Product C </option>
</select>
<div id="paypal-button-container"> </div>
<script>
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '50'
},
items: [{
unit_amount: {
value: '50'
},
quantity: '1',
name: 'Product A',
}],
}],
});
}
}).render('#paypal-button-container');
</script>

当用户将所选选项更改为产品 B 或产品 C 时，是否需要在选择更改时重新呈现PayPal按钮？如果是这样，我该如何处置旧的？

Answer 1

仅当加载 SDK 的currency或intent或类似的查询字符串参数发生更改时，才需要重新渲染。这就是为什么它们是SDK系列的一部分，因为这些东西需要在渲染时知道。

其他内容，例如订单的金额和内容，可以在单击按钮时计算。这就是调用 createOrder 函数的时候。 因此，您可以使用document.getElementById().value或类似工具来填充创建订单时要使用的数据。

......

如果要重新渲染(此处不需要(，请按以下步骤操作：

与其立即调用 .render((，不如先保存对对象的引用...

var myButton = paypal.Buttons({...});
myButton.render('#paypal-button-container');
// things happen, user makes changes that require re-rendering the buttons
myBytton.close();
// render the buttons again here
// if query string parameters to the SDK change, the SDK needs to be reloaded