PayPal 智能按钮将项目描述添加到按钮

Posted

技术标签:

【中文标题】PayPal 智能按钮将项目描述添加到按钮【英文标题】:PayPal Smart buttons adding items description to button 【发布时间】:2021-03-23 21:44:09 【问题描述】:

您好,我想为我的智能按钮添加说明,但我的 items 数组代码不起作用。 请参考这个问题:Why will PayPal Smart buttons not recognise my items array?

我遇到了基本相同的问题,这个人的问题从未得到解决。 每当我将我的函数用于 Items 值时,它都会返回一个非常长的错误。我只是不确定我做错了什么。

function arrayOfItems()
   var arrayItems = []
   var items = document.querySelectorAll(".cp-info");
   items.forEach(function(item)
    // console.log(item);
    // console.log(item.children[1].children[1].children[1].textContent)
     let currency = item.children[1].children[1].children[1].textContent;
     let quantity = "1";
     //console.log(currency);
     //console.log(item.children[0].textContent);
     let name = item.children[0].textContent;

     let size = item.children[1].children[0].textContent;
     //console.log(size);

     name = name;

    //console.log(name);
    var itemInfo = "unit_amount": "currency_code": "USD", "value": currency,"quantity": "1", "name": name,;
    //console.log(arrayItems);

    arrayItems.push(itemInfo);
    //console.log(arrayItems);


  )

  return arrayItems;
 ;

从控制台中的函数返回的数组如下所示。 (第一个 0 只是分解

(4) […, …, …, …]
0:
name: "GB Stacked"
quantity: "1"
unit_amount: currency_code: "USD", value: "49.99"
__proto__: Object
1: unit_amount: …, quantity: "1", name: "Stacked Jeans"
2: unit_amount: …, quantity: "1", name: "GB Stacked"
3: unit_amount: …, quantity: "1", name: "Blue Stacked Leggings"
length: 4
__proto__: Array(0)

问题更新

这是我在 PayPal 方面传递的内容

  createOrder: function(data, actions) 
                return actions.order.create(
                  "purchase_units": [
                          "amount": 
                              "value": showTotals(),
                              "currency_code": "USD",
                          "breakdown": 
                              "item_total": 
                                  "currency_code": "USD",
                                  "value": showTotals(),
                              ,
                          ,
                          "items": arrayOfItems()
                        
                    ],
                  );
              ,

            // Finalize the transaction
            onApprove: function(data, actions) 
                return actions.order.capture().then(function(details) 
                    // Show a success message to the buyer
                    alert('Transaction completed by ' + details.payer.name.given_name + '!');
                );
            


        ).render('#paypal-button-container');

我不确定我做了什么更改,但它不再给出控制台错误并允许购买但订单详细信息仍然为空。

我传入的 JSON 字符串

  var x = arrayItems;
    console.log(JSON.stringify(x,4));
  return arrayItems;
---------------------------
this returns to the console =
["unit_amount":"currency_code":"USD","value":"49.99","quantity":"1","name":"GB Stacked","unit_amount":"currency_code":"USD","value":"79.99","quantity":"1","name":"Stacked Jeans","unit_amount":"currency_code":"USD","value":"49.99","quantity":"1","name":"GB Stacked","unit_amount":"currency_code":"USD","value":"79.99","quantity":"1","name":"Stacked Jeans"]

this is a picture of the PayPal transaction screen, as you can see the order details is blank

【问题讨论】:

用你传递给 actions.order.create( 的实际 JSON 更新你的问题。用你传递的内容设置一个变量,然后 console.log(JSON.stringify(myVariable,null,4) ) 【参考方案1】:

当您在代码中准确显示您在做什么或传递时,我们将能够给出更准确的答案,但您的 purchase_units 数组似乎无效。

它应该是一个包含单个(0 索引)项目的数组,并且该项目应该是一个 purchase_unit 对象,具有至少两个键,amountitems

amount 应该是包含所需 breakdown 键和细分对象的对象,items 应该是项目对象数组


调试代码:

            createOrder: function(data, actions) 
                var req = 
                    purchase_units: [
                        amount: 
                            value: showTotals(),
                            currency_code: "USD",
                            breakdown: 
                                item_total: 
                                    currency_code: "USD",
                                    value: showTotals()
                                
                            
                        ,
                        items: arrayOfItems()
                    ]
                

                console.log(JSON.stringify(req,null,4));
                return actions.order.create(req);
            ,

            // Finalize the transaction
            onApprove: function(data, actions) 
                return actions.order.capture().then(function(details) 
                    // Show a success message to the buyer
                    alert('Transaction completed by ' + details.payer.name.given_name + '!');
                );
            


        ).render('#paypal-button-container');

Woking JSON 示例 (tested here):

                    purchase_units: [
                        amount: 
                            value: 259.96,
                            currency_code: "USD",
                            breakdown: 
                                item_total: 
                                    currency_code: "USD",
                                    value: 259.96
                                
                            
                        ,
                        items: ["unit_amount":"currency_code":"USD","value":"49.99","quantity":"1","name":"GB Stacked",
                        "unit_amount":"currency_code":"USD","value":"79.99","quantity":"1","name":"Stacked Jeans",
                        "unit_amount":"currency_code":"USD","value":"49.99","quantity":"1","name":"GB Stacked",
                        "unit_amount":"currency_code":"USD","value":"79.99","quantity":"1","name":"Stacked Jeans"]
                    ]

【讨论】:

我用我传递给“actions.order.create(”的内容更新了这个问题。还有“用你传递的内容设置一个变量,然后是console.log(JSON.stringify(myVariable ,4))" 你会想要调试整个传递给创建的东西。在上面添加了代码,以便您可以看到 -- 也忘记将 null 作为第二个参数传递给 stringify 就像我知道文字字符串可以工作,但我需要该函数才能工作,因为细节并不总是相同。对于函数而不是返回变量,我实际上应该返回 JSON.stringfy 吗? 没有。它用于调试,查看对象的可测试字符串表示并能够判断它有什么问题以及生成它的代码有什么问题。我发布了可能有效的代码供您使用您的功能进行测试。 我想我找到了我用它更新问题的问题,请帮忙。我认为这与名称项目末尾没有逗号有关

以上是关于PayPal 智能按钮将项目描述添加到按钮的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Vue.js 类组件设置 PayPal 智能按钮

使用旧状态的 PayPal 智能支付按钮

如何将 PayPal 智能按钮添加到 Chrome 扩展程序?

如何将 Paypal 智能按钮集成到 vue 浏览器扩展 pwa [关闭]

PayPal 智能按钮不会确认项目列表。想法?

由于需要 Javascript,Paypal 智能按钮在电子邮件中不起作用。有啥建议?