JavaScript 和 PayPal 结帐按钮问题

Posted 2023-02-22

【中文标题】JavaScript 和 PayPal 结帐按钮问题

【英文标题】：JavaScript & PayPal Checkout Button Question

【发布时间】：2021-12-14 04:15:00

【问题描述】：

我目前正在使用 javascript 测试 PayPal 结帐集成的沙盒。

我了解在 Javascript 中测试我们的按钮时如何使用“沙盒”模式与使用“实时”模式。

我要问的是如何设置产品的标题，以便买家在点击“立即付款”按钮完成交易之前能够准确地看到他们将要购买的东西？

这是我目前正在使用的代码，如下所示：

//html GOES HERE TO CONTAIN THE PAYPAL BUTTON
<div id="paypal-button-container"></div>
<script src="https://www.paypal.com/sdk/js?&client-id=[MY-CLIENT-ID-GOES-HERE]&merchant-id=[MY-MERCHANT-EMAIL-ADDRESS-GOES-HERE]&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 + '\n\nSee 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 在该对象内，您可以看到您可以传递一个 items 数组。这是一个对象数组，您可以在此处查看 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'
    
  ]
]

这是一个工作小提琴，只需弹出您的客户端 ID 即可进行测试。 Fiddle Demo

注意：查看文档并查看哪些是必填字段。我还认为您需要对金额进行细分才能使其发挥作用。

【讨论】：

是的，我之前尝试过，但是当我尝试在沙盒中测试“items:”选项时（还没有尝试过“live”），新的 PayPal 窗口会尝试打开并加载，但很快它就会崩溃并立即关闭。这是我几分钟前刚刚尝试过的，然后它一直在崩溃：

// 点击支付按钮时设置交易 createOrder: function(data, actions) return actions.order.create( purchase_units: [ amount: value: paypal_price, //可以引用变量或函数。例如：value: document.getElementById('...').valuecurrency: 'USD' , items: [ name: 'Product Name' , ] ] ); ,

是的，我之前尝试过，但是当我尝试在沙盒中测试“items:”选项时（还没有尝试过“live”），新的 PayPal 窗口会尝试打开并加载，但很快它就会崩溃并立即关闭。 @Steve K 这是我几分钟前刚刚尝试过的，然后它一直崩溃：

// 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" , ] ] ); ,

您需要在我认为的金额中添加一个细分才能使此功能起作用。就像我在注释中所说的那样，您需要查看并查看需要哪些字段。不幸的是，Paypals 文档是一团糟，就像跟踪面包屑一样，很容易错过一些东西。我用工作代码和小提琴演示更新了答案。如果您现在在结帐时单击价格旁边的向下箭头，您可以查看产品和总明细。