PayPal快速结账与一个页面上的多个按钮集成 [英] PayPal express checkout integration with multiple buttons on one page

问题描述

我目前有一个项目列表，其中包含与每个项目关联的Paypal按钮。每个项目将通过单击其相关按钮单独购买。

I currently have a list of items with a Paypal button associated with each of them. Each item will be purchased separately by clicking on its associated button.

<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（）只会渲染它找到的第一个元素。

Unfortunately, it seems that paypal.Button.render() will only render the first element that it finds.

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

Is it possible to do this call on multiple elements?

推荐答案

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

You need to give each element a unique id, then call render multiple times:

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

这篇关于PayPal快速结账与一个页面上的多个按钮集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！