动态贝宝快速结帐按钮

Posted 2023-02-22

【中文标题】动态贝宝快速结帐按钮

【英文标题】：Dynamic paypal express checkout button

【发布时间】：2019-03-16 17:09:52

【问题描述】：

这是交易。我正在尝试为一个项目创建某种在线商店，这个 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" >
                <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'
        

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

【参考方案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');

等等。

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

【讨论】：

你认为有办法让 div 生成动态吗？我正在努力做到这一点，如果我有 100 个项目，则会自动生成 100 个 div。如果我让每个 div 成为一个单独的东西，这意味着我必须手动创建它们中的每一个，并且这个过程最终不会是动态的。有没有办法使用某种索引来生成每个 div 名称？或者适用于这种情况的某种“for each”命令？

是的，我想是的。你的数据在哪里？在数据库/数组中还是什么？然后你可以循环元素并生成 div