PayPal 快速结帐与一页上的多个按钮集成答案

【问题标题】：PayPal express checkout integration with multiple buttons on one pagePayPal 快速结帐与一页上的多个按钮集成
【发布时间】：2017-08-14 20:29:54
【问题描述】：

我目前有一个项目列表，其中每个项目都有一个 Paypal 按钮。每件商品都将通过点击其相关按钮单独购买。

<ul>
    <li data-id="1">Item 1 <div class="paypal-button"></div></li>
    <li data-id="2">Item 2 <div class="paypal-button"></div></li>
    <li data-id="3">Item 3 <div class="paypal-button"></div></li>
</ul>

<script src="https://www.paypalobjects.com/api/checkout.js"></script>

<script>
    paypal.Button.render({
        // options
    }, '.paypal-button');
</script>

不幸的是，paypal.Button.render() 似乎只会渲染它找到的第一个元素。

是否可以对多个元素执行此调用？

【问题讨论】：

标签： javascript paypal express-checkout

【解决方案1】：

如果您像我一样不喜欢跟踪 ID，可以使用类来代替。并使用数据属性进行区分。

<div class="paypal-button" data-my-attribute="tree"></div>
<div class="paypal-button" data-my-attribute="dog"></div>
<div class="paypal-button" data-my-attribute="car"></div>

<script src="https://www.paypalobjects.com/api/checkout.js"></script>

<script>
    document.querySelectorAll('.paypal-button').forEach(function(selector) {
        paypal.Button.render({
            // options
            console.log( selector.dataset.myAttribute );
        }, selector);
    });
</script>

【讨论】：

是selector 是paypal.Button.render 末尾的变量吗？
确实，它是一个变量，用于保存从包装 forEach 循环传递的元素。 Check the docs about forEach.
我在尝试这个之后遇到了一个错误。它说，Uncaught Error: Document is ready and element [object Object] does not exist.. 有什么想法吗？
你能在codepen.io 上分享一个简化的测试用例吗？那我很乐意去看看。
你是救世主。

【解决方案2】：

你需要给每个元素一个唯一的id，然后多次调用render：

<ul>
    <li data-id="1">Item 1 <div id="button-1"></div></li>
    <li data-id="2">Item 2 <div id="button-2"></div></li>
    <li data-id="3">Item 3 <div id="button-3"></div></li>
</ul>

<script src="https://www.paypalobjects.com/api/checkout.js"></script>

<script>
    [ '#button-1', '#button-2', '#button-3' ].forEach(function(selector) {
        paypal.Button.render({
            // options
        }, selector);
    });
</script>

【讨论】：

我最终采用了类似的方法。有点丑，哦，好吧。