Javascript PayPal Express结帐JS-窗口持续加载

我正在实施贝宝快捷结帐与一个自定义的在线商店。这些尝试发生在实时服务器上

开发人员控制台中没有显示错误，打开的PayPal窗口只会继续加载带有锁符号的内容

在我所有的研究中，我发现这个答案正是定义这个问题的答案：

在我与PayPal集成的另一个应用程序中，我尝试删除“Return”，出现了与此应用程序相同的症状。但在这个应用程序中，我清楚地添加了“返回”

感谢您的帮助

以下是代码示例：

paypal.Button.render({
      env: 'sandbox', // 'production' Or 'sandbox',

      commit: true, // Show a 'Pay Now' button

      client: {
      sandbox:    'SANDBOX-ID',
      production: 'PRODUCTION-ID'
    },

      style: {
        color: 'gold',
        size: 'medium'
      },

      payment: function(data, actions) {
        /* 
         * Set up the payment here 
         */
                //Cart Calculation Total...
        var pptotal = document.getElementById('final_price').innerHTML.replace('$','');

        if (window.XMLHttpRequest) {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
        } else {  // code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function() {
          if (this.readyState==4 && this.status==200) {
            //console.log(this.responseText);
            var r = JSON.parse(this.responseText);
            //Setup variables for payment...
            if(r.response === 'GOOD'){
              pp_payment.payment = {};
              pp_payment.payment.transactions = [];
              var trans_obj = {};
              trans_obj.amount = {};
              trans_obj.amount.total = parseFloat(pptotal).toFixed(2);
              trans_obj.amount.currency = "USD";
              trans_obj.description = "Purchase Details";
              trans_obj.item_list = {};
              var items_array = [];
              var items_obj = {};

              var icount = r.item.length;
              for(var i = 0; i < icount; i++){
                var x = r.item[i];
                items_obj.name = x.pname;
                items_obj.quantity = x.pqty;
                items_obj.price = parseFloat(x.pprice).toFixed(2);
                items_obj.tax = "0.00";
                items_obj.sku = x.pid;
                items_obj.currency = "USD";
                items_array.push(items_obj);
                var items_obj = {};
              }
              trans_obj.item_list.items = items_array;
              pp_payment.payment.transactions.push(trans_obj);



              return actions.payment.create(pp_payment);

            }else{
              console.warn('An Error occurred while calculating the cart');
              alert('An Error occurred while calculating the cart');
            }

          }
        }
        xmlhttp.open("GET","my-cart/php/get-cart-items.php",true);
        xmlhttp.send();

        //End Cart Calculation.

      },

---

经过反复试验，我终于找到了问题的原因

似乎在

createOrder

函数中有一个XHR请求导致了PayPal返回数据的去同步。（不太清楚确切原因，但这是问题所在）

XHR请求是构建支付JSON对象所必需的，该对象需要传递给

actions.order.create（）

函数。我刚刚构建了一个包含XHR请求的简单函数，并在UI中添加了一个附加步骤（“继续签出”）按钮，该按钮调用该函数来构建支付对象并打开呈现的PayPal签出按钮

一旦我将XHR请求放到

createOrder

函数之外，所有函数都将正常运行

以下是更新的代码：

var pp_payment = {};
var ppitems;

//Random Number Generator...
function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

function prepare_order(){
  //Cart Calculation...
    var rpptotal = document.getElementById('final_price').innerHTML.replace('$', '');
    var pptotal = parseFloat(rpptotal).toFixed(2);

    pp_payment = {};//Clear the pp_payment variable...

    if (window.XMLHttpRequest) {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        console.log(this.responseText);
        var r = JSON.parse(this.responseText);
        //Setup variables for payment...
        if (r.response === 'GOOD') {
          pp_payment.purchase_units = [];
          var trans_obj = {};
          trans_obj.amount = {};
          trans_obj.amount.value = pptotal;
          trans_obj.amount.breakdown = {};
          trans_obj.amount.breakdown.item_total = {};
          trans_obj.amount.breakdown.item_total.value = pptotal;
          trans_obj.amount.breakdown.item_total.currency_code = "USD";
          trans_obj.items = [];
          var items_array = [];
          var items_obj = {};

          var icount = r.item.length;
          for (var i = 0; i < icount; i++) {
            var x = r.item[i];
            items_obj.name = x.pname;
            items_obj.unit_amount = {};
            items_obj.quantity = x.pqty;
            items_obj.unit_amount.value = x.pprice;
            items_obj.sku = x.pid;
            items_obj.unit_amount.currency_code = "USD";
            trans_obj.items.push(items_obj);
            var items_obj = {};
          }
          pp_payment.purchase_units.push(trans_obj);
          console.log('Order Created...');
          console.log(pp_payment);
          //End Payment Variable Setup.

          document.getElementById('pre-pp-btn').style.display = 'none';
          document.getElementById('paypal-button').style.display = 'inline';

        } else {
          console.warn('An Error occurred while calculating the cart');
          alert('An Error occurred while calculating the cart');
        }
      }
    }
    xmlhttp.open("GET", "my-cart/php/get-cart-items.php", true);
    xmlhttp.send();
}

// Render the PayPal button into #paypal-button-container
paypal.Buttons({

  // Set up the transaction
  createOrder: function(data, actions) {
    return actions.order.create(pp_payment);
  },

  // Finalize the transaction
  onApprove: function(data, actions) {
    alert('APPROVED');
    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');

var pp_payment={}；
风险价值项目；
//随机数发生器。。。
函数getRandomNumber（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min）+min）；
}
函数prepare_order（）{
//购物车计算。。。
var rpptotal=document.getElementById（'final_price'）.innerHTML.replace（'$，''）；
var pptotal=parseFloat（rpptotal）.toFixed（2）；
pp_payment={}；//清除pp_payment变量。。。
if（window.XMLHttpRequest）{
//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}else{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
console.log（this.responseText）；
var r=JSON.parse（this.responseText）；
//付款的设置变量。。。
如果（r.response==‘GOOD’）{
pp_payment.purchase_units=[]；
var trans_obj={}；
trans_obj.amount={}；
trans_obj.amount.value=pptotal；
trans_obj.amount.breakdown={}；
trans_obj.amount.breakdown.item_total={}；
trans_obj.amount.breakdown.item_total.value=pptotal；
trans_obj.amount.breakdown.item_total.currency_code=“USD”；
trans_obj.items=[]；
变量项_数组=[]；
变量项_obj={}；
var icount=r.item.length；
对于（变量i=0；i

您似乎正在使用PayPal的checkout.js的旧/归档版本，因此我的第一个建议是切换到最新的智能支付按钮javascript客户端，看看是否有更好的结果。这里是一个骨架演示：@PrestonPHX我做了切换，现在有一个不同的问题[在我的编辑中概述]。有什么建议吗？您使用的是什么服务器端API？SetExpressCheckout或类似产品？尝试将

trans_obj.orderID

设置为服务器返回进行签出的任何对象的唯一ID哦，在这种情况下，您需要客户端集成模式：然后发布一个简单、可测试的集成示例，重现您的问题。。包括标签。忽略任何会分散问题注意力的xmlhttp内容。使您的示例尽可能接近代码，只更改重现错误所需的内容。

var pp_payment = {};
var ppitems;

//Random Number Generator...
function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

function prepare_order(){
  //Cart Calculation...
    var rpptotal = document.getElementById('final_price').innerHTML.replace('$', '');
    var pptotal = parseFloat(rpptotal).toFixed(2);

    pp_payment = {};//Clear the pp_payment variable...

    if (window.XMLHttpRequest) {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        console.log(this.responseText);
        var r = JSON.parse(this.responseText);
        //Setup variables for payment...
        if (r.response === 'GOOD') {
          pp_payment.purchase_units = [];
          var trans_obj = {};
          trans_obj.amount = {};
          trans_obj.amount.value = pptotal;
          trans_obj.amount.breakdown = {};
          trans_obj.amount.breakdown.item_total = {};
          trans_obj.amount.breakdown.item_total.value = pptotal;
          trans_obj.amount.breakdown.item_total.currency_code = "USD";
          trans_obj.items = [];
          var items_array = [];
          var items_obj = {};

          var icount = r.item.length;
          for (var i = 0; i < icount; i++) {
            var x = r.item[i];
            items_obj.name = x.pname;
            items_obj.unit_amount = {};
            items_obj.quantity = x.pqty;
            items_obj.unit_amount.value = x.pprice;
            items_obj.sku = x.pid;
            items_obj.unit_amount.currency_code = "USD";
            trans_obj.items.push(items_obj);
            var items_obj = {};
          }
          pp_payment.purchase_units.push(trans_obj);
          console.log('Order Created...');
          console.log(pp_payment);
          //End Payment Variable Setup.

          document.getElementById('pre-pp-btn').style.display = 'none';
          document.getElementById('paypal-button').style.display = 'inline';

        } else {
          console.warn('An Error occurred while calculating the cart');
          alert('An Error occurred while calculating the cart');
        }
      }
    }
    xmlhttp.open("GET", "my-cart/php/get-cart-items.php", true);
    xmlhttp.send();
}

// Render the PayPal button into #paypal-button-container
paypal.Buttons({

  // Set up the transaction
  createOrder: function(data, actions) {
    return actions.order.create(pp_payment);
  },

  // Finalize the transaction
  onApprove: function(data, actions) {
    alert('APPROVED');
    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');