PayPal REST API 页面上的多个按钮在单独的表格中

Question

我有 3 个单独的表，我希望其中的每个表都有一个特定价格的特定 paypal btn。

我在创建第二个 paypal btn 时遇到问题。它取消渲染第一个 btn，然后只存在第二个。我很确定我的 render() 函数设置不正确。我已阅读 PayPals SDK 文档，但确实没有任何相关信息。

下面是我的代码：

html:

   <div class="container-fluid table-responsive services-container">
        <div>
            
            <table class="table table-striped table-dark">
                <thead>
                    <tr>
                        <th scope="col">
                            <p style="font-weight: bold; font-size: 26px;">Introduction to Programming (July)</p> 
                        </th>
                    </tr>
                </thead>
             
                <tr>
                    <td>
                        <p class="details">Product 1</p>
                    </td>

                <tr>
                    <td>
                        <h6 class="price">$500</h6>                         
                        <div id="paypal-button-container1"></div>                           
                    </td>           
                </tr>
            </table>
        </div>
                                
    </div>  
    <div class="container-fluid table-responsive services-container">
        <div>
            
            <table class="table table-striped table-dark">
                <thead>
                    <tr>
                        <th scope="col">
                            <p style="font-weight: bold; font-size: 26px;">Product 2</p>
                        </th>
                    </tr>
                </thead>
                <tr>
                    <td>
                        <h6 price class="price">$75</h6> 
                        <div id="paypal-button-container2"></div> 
                    </td>
                     
                </tr>
            </table>
        </div>
       
        <div class="container-fluid table-responsive services-container">
            <div>
                
                <table class="table table-striped table-dark">
                    <thead>
                        <tr>
                            <th scope="col">
                                <p style="font-weight: bold; font-size: 26px;">Product 3</p>
                            </th>
                        </tr>
                    </thead>
                    <tr>
                        <td>
                            <h6 class="price">$200</h6>
                            <div id="paypal-button-container3"></div> 
                        </td>
                         
                    </tr>
                </table>
            </div>
                            
        </div>  
                 

js:

 paypal.Buttons({
style: {
    shape: 'rect',
    color: 'gold',
    layout: 'vertical',
    label: 'paypal',
                                
    },
     createOrder: function(data, actions) {
        return actions.order.create({
            purchase_units: [{
                amount: {
                    value: '500'
                }
            }]
        });
    },

    onApprove: function(data, actions) {
        return actions.order.capture().then(function(details) {
            alert('Transaction completed by ' + details.payer.name.given_name + '!');
        });
    }
}).render('#paypal-button-container1');

如您所见，render(divID) 仅渲染到一个 div，我想对所有 3 个相应的 div 进行 3 次不同的渲染。

我已经尝试了多个这些 paypal:Buttons 功能，每个产品都有一个具有不同 createOrder 功能的功能，但这也不起作用。

那我该怎么办？

我可以在其中放置 3 个单独的 createOrder 函数，其中包含所有 3 个价格，但底部只有一个渲染，它如何知道以哪个价格渲染哪个？

感谢任何帮助。谢谢！

Answer 1

如果你使用不同的选择器（container1、container2、container3）和不同的 purchase_unit 对象以及它们自己的价格等重复该 JS 三次，它会起作用。