Блог

Главная - Вопросы по программированию - Вопрос о кнопке оформления заказа JavaScript и PayPal

Вопрос о кнопке оформления заказа JavaScript и PayPal

#javascript #paypal #paypal-sandbox #checkout #paypal-rest-sdk

Вопрос:

В настоящее время я тестирую изолированную среду для интеграции PayPal checkout с использованием Javascript.

Я вижу, как использовать режим «песочницы» по сравнению с использованием режима «Live» при тестировании наших кнопок на Javascript.

Я спрашиваю, как мне установить название продукта, чтобы покупатель мог точно видеть, что он собирается купить, прежде чем нажать кнопку «Оплатить сейчас», чтобы завершить транзакцию?

Вот код, с которым я сейчас работаю, как показано ниже:

 //HTML GOES HERE TO CONTAIN THE PAYPAL BUTTON
<div id="paypal-button-container"></div>
<script src="https://www.paypal.com/sdk/js?amp;client-id=[MY-CLIENT-ID-GOES-HERE]amp;merchant-id=[MY-MERCHANT-EMAIL-ADDRESS-GOES-HERE]amp;currency=USD"></script>


paypal.Buttons({
    style: {
        layout:  'vertical',
        color:   'gold',
        shape:   'pill',
        label:   'buynow'
    },

    // Sets up the transaction when a payment button is clicked
    createOrder: function(data, actions) {
      return actions.order.create({

        purchase_units: [{
          amount: {
            value: 50, // Can reference variables or functions. Example: `value: document.getElementById('...').value`
            currency: 'USD'
          },

        }]
        
      });
      
    },
    
    // Finalize the transaction after payer approval
    onApprove: function(data, actions) {
      return actions.order.capture().then(function(orderData) {
        // Successful capture! For dev/demo purposes:
            console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
            var transaction = orderData.purchase_units[0].payments.captures[0];
            alert('Transaction '  transaction.status   ': '   transaction.id   'nnSee console for all available details');

        // When ready to go live, remove the alert and show a success message within this page. For example:
        // var element = document.getElementById('paypal-button-container');
        // element.innerHTML = '';
        // element.innerHTML = '<h3>Thank you for your payment!</h3>';
        
        actions.redirect('https://SomeWebsiteURLiWillForwardThemTo.com');
      });
    }
  }).render('#paypal-button-container');

Ответ №1:

В документах paypals вы можете увидеть объект единицы покупки. https://developer.paypal.com/docs/api/orders/v2/#definition-purchase_unit внутри этого объекта вы можете видеть, что вы можете передать массив элементов. Это массив объектов, которые вы можете просмотреть здесь https://developer.paypal.com/docs/api/orders/v2/#definition-item . Вы можете определить параметры каждого продукта, включая название. Итак, в вашем случае, я думаю, вы можете попробовать что-то вроде следующего:

 purchase_units: [{
  amount: {
    value: 50,
    currency: 'USD',
    breakdown: {
      item_total: {
        currency_code: 'USD',
        value: 50
      },
    }
  },
  items: [
   {
     name: 'Product Name',
     unit_amount: {
       currency_code: 'USD',
       value: 50
      },
      quantity: '1'
    }
  ]
}]

Вот рабочая скрипка, просто введите свой идентификатор клиента для тестирования. Демонстрация скрипки

ПРИМЕЧАНИЕ: посмотрите документы и посмотрите, какие обязательные поля. Я также думаю, что вам нужно применить разбивку к сумме, чтобы это сработало.

Комментарии:

1. Да, я пробовал это раньше, но когда я пытаюсь протестировать опцию «элементы:» в песочнице (еще не пробовал «жить»), новое окно PayPal пытается открыться и загрузиться, но затем оно быстро просто вылетает и сразу же закрывается. Вот что я только что попробовал пару минут назад, затем он продолжает сбой:

2. // Настраивает транзакцию при нажатии кнопки оплаты CreateOrder: функция(данные, действия) { возврат actions.order.create({ purchase_units: [{ сумма: { значение: paypal_price, // Может ссылаться на переменные или функции. Пример: value: document.getElementById('...').value валюта: ‘USD’ }, элементы: [ { имя: ‘Название продукта’ }, ] }] }); },

3. Да, я пробовал это раньше, но когда я пытаюсь протестировать опцию «элементы:» в песочнице (еще не пробовал «жить»), новое окно PayPal пытается открыться и загрузиться, но затем оно быстро просто вылетает и сразу же закрывается. @Steve K Вот что я только что попробовал пару минут назад, затем он продолжает сбой:

4. // Sets up the transaction when a payment button is clicked createOrder: function(data, actions) { return actions.order.create({ purchase_units: [{ amount: { value: paypal_price, // Can reference variables or functions. Example: value: document.getElementById('...').value currency: "USD" }, items: [ { name: "Product Name" }, ] }] }); },

5. Вам нужно добавить разбивку на сумму, я думаю, чтобы это сработало. Как я уже говорил в примечании, прежде чем вам нужно посмотреть и посмотреть, какие поля являются обязательными. К сожалению, документы Paypals представляют собой беспорядок, и это похоже на панировку, и действительно легко что-то пропустить. Я обновил ответ рабочим кодом и демонстрацией скрипки. Вы можете увидеть продукт и общую разбивку, если сейчас нажмете стрелку вниз по цене при оформлении заказа.

Метки: