PayPal Express Оформить заказ JS - окно загружается - PullRequest
2 голосов
/ 12 февраля 2020

Я внедряю PayPal Express Оформить заказ через пользовательский интернет-магазин. Эти попытки происходят на работающем сервере.

В консоли разработчика не отображается ошибка, открывающееся окно PayPal просто загружается с символом блокировки.

Во всех моих исследованиях Я нашел этот ответ, который определяет проблему: { ссылка }

В другом приложении, которое я интегрировал с PayPal, я попытался удалить «Возврат», и у меня было то же самое симптомы, как у меня с этим приложением. Но в этом приложении я четко добавил «Возврат».

Любая помощь приветствуется!

Вот пример кода:

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.

      },

РЕДАКТИРОВАТЬ:

Я переключился на новый PayPal Smart API кнопок, как было предложено, и теперь выдает ошибку: Uncaught Error: Expected an order id to be passed

Когда я использую этот же фрагмент кода (ниже) в тестере API PayPal здесь: https://developer.paypal.com/demo/checkout/# / pattern / client У меня вообще нет ошибок.

Хотите знать, что я делаю не так?

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

  // Set up the transaction
  createOrder: function(data, actions) {

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

    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.orderID = getRandomNumber(100000,999999);
          trans_obj.amount = {};
          trans_obj.amount.value = pptotal;
          //trans_obj.amount.currency_code = "USD";
          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.description = "Purchase Details";
          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.tax = "0";
            items_obj.sku = x.pid;
            items_obj.unit_amount.currency_code = "USD";
            trans_obj.items.push(items_obj);
            var items_obj = {};
          }
          //trans_obj.items = items_array;
          //pp_payment['purchase_units'].push(trans_obj);
          pp_payment.purchase_units.push(trans_obj);
          console.log(pp_payment);
          console.log(JSON.stringify(pp_payment));
          //pp_payment = JSON.stringify(pp_payment);
          //End Payment Variable Setup.

          return actions.order.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();
  },

  // 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');

1 Ответ

0 голосов
/ 13 февраля 2020

После долгих проб и ошибок я смог найти причину своей проблемы.

Похоже, что запрос XHR в функции createOrder вызвал рассинхронизацию возвращаемых данных из PayPal. (Не слишком уверен в точной причине этого, но это была проблема)

Запрос XHR необходим для создания объекта оплаты JSON, который необходим для передачи в функцию actions.order.create(). Я только что построил простую функцию, в которой размещен запрос XHR, и добавил дополнительный шаг в пользовательском интерфейсе (кнопка «Продолжить оформление заказа»), который вызывал эту функцию для создания объекта платежа и открытия визуализированной кнопки PayPal Checkout.

Как только я поместил 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');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...