Динамическая кнопка PayPal Express Checkout - PullRequest
Новая
       51

Динамическая кнопка PayPal Express Checkout

0 голосов
/ 11 октября 2018

Вот сделка.Я пытаюсь создать какой-то интернет-магазин для проекта, этот фрагмент кода взят из моего приложения. 

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

Я пытаюсь создать кнопку PayPal под каждым объектом.Однако, когда я запускаю код, все кнопки располагаются в левой части экрана.

Here's what the app looks like

Могу ли я использовать какой-то "product_ID" и передать его кнопке PayPal, чтобы убедиться, что кнопка и объект заблокированы вместе втот же самый div?

Кроме того, каков наилучший способ передачи переменной "price_products" в поле "amount"?

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

Я хочу, чтобы на каждой кнопке была указана соответствующая цена объекта

1 Ответ

0 голосов
/ 17 октября 2018

Вы можете попытаться изменить идентификатор кнопки PayPal: 

       <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 

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

и т. Д.

Это должно решить проблему для графической части.

...