动态贝宝快速结帐按钮

Question

这是交易。我正在尝试为一个项目创建某种在线商店，这个 sn-p 代码来自我的应用程序。

<div class="row">
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
    {{#each this.products}}
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img style="height: 275px;" class="img-thumbnail" src="/products_images/{{this.image_products}}" alt="...">
                <div class="caption">
                    <h3>{{this.name_products}}</h3>
                    <p>{{this.description_products}}</p>
                    <p>Products quantity: {{this.quantity_products}}</p>
                    <p>Price: €{{this.price_products}}</p>  
                    <div class="center-div" id="paypal-button-container"></div>
            <script>
                    // Render the PayPal button
                    paypal.Button.render({
                    // Set your environment
                    env: 'sandbox', // sandbox | production

                    // Specify the style of the button
                    style: {
                    layout: 'vertical',  // horizontal | vertical
                    size:   'medium',    // medium | large | responsive
                    shape:  'rect',      // pill | rect
                    color:  'gold'       // gold | blue | silver | white | black
                    },

                    // Specify allowed and disallowed funding sources
                    //
                    // Options:
                    // - paypal.FUNDING.CARD
                    // - paypal.FUNDING.CREDIT
                    // - paypal.FUNDING.ELV
                    funding: {
                    allowed: [
                        paypal.FUNDING.CARD,
                        paypal.FUNDING.CREDIT
                    ],
                    disallowed: []
                    },

                    // PayPal Client IDs - replace with your own
                    // Create a PayPal app: https://developer.paypal.com/developer/applications/create
                    client: {
                    sandbox: '-----------------',
                    production: '-----------------'
                    },

                    payment: function (data, actions) {
                    return actions.payment.create({
                        payment: {
                        transactions: [
                            {
                            amount: {
                                total: '5.00',
                                currency: 'EUR'
                            }
                            }
                        ]
                        }
                    });
                    },

                    onAuthorize: function (data, actions) {
                    return actions.payment.execute()
                        .then(function () {
                        window.alert('Payment Complete!');
                        });
                    }
                    }, '#paypal-button-container');

            </script>

                </div>
            </div>
        </div>
     {{/each}}

</div>

我正在尝试在每个对象下创建一个贝宝按钮。但是，当我运行代码时，所有按钮都堆叠在屏幕的左侧。

我可以使用某种“product_ID”并将其传递给 paypal 按钮，以确保按钮和对象一起锁定在同一个 div 中吗？

另外，将“price_products”变量传递给“金额”字段的最佳方法是什么？

amount: {
            total: '5.00',
            currency: 'EUR'
        }

我希望每个按钮都有与之关联的对象的相应价格

Answer 1

您可以尝试更改 paypal 按钮的 id：

       <div class="center-div" id="paypal-button-container"></div>
        <script>

喜欢

       <div class="center-div" id="paypal-button-container1"></div>
        <script>
       <div class="center-div" id="paypal-button-container2"></div>
        <script>

等等。 确保在贝宝脚本的末尾也进行更改

                    }, '#paypal-button-container1');

等等。

这应该可以解决图形部分的问题。