动态贝宝快递结帐按钮

Question

Here's the deal. I'm trying to make some kind of online store for a project, this snippet of code comes from my app.

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

I'm trying to create a paypal button under each object. However when I run the code all the buttons are stacked on the left side of the screen.

Could I use some kind of "product_ID" and pass it to the paypal button to make sure that the button and the object are locked together in the same div?

Also, what is the best way to pass the "price_products" variable to the "amount" field?

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

I want every button to have the corresponding price of the object linked to it

Answer 1

You might try to change the id of the paypal button:

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

Like

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

And so on. Make sure to change it also at the end of the paypal script

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

and so on.

This should solve the problem for the graphical part.