贝宝智能按钮集成问题

Posted 2023-02-22

【中文标题】贝宝智能按钮集成问题

【英文标题】：Issue with paypal smart buttons integration

【发布时间】：2020-11-07 03:44:29

【问题描述】：

我已经设置了一个贝宝付款流程。如果用户点击“使用 PayPal 支付”，则会弹出一个窗口，要求用户登录他们的贝宝账户，然后从那里付款。此流程按原样工作。 我面临的问题是 PayPal 智能按钮 javascript SDK 提供的“使用信用卡或借记卡付款”按钮。单击此按钮时，它不会像“使用 PayPal 付款”按钮那样打开弹出窗口。相反，它会打开一个内联表单。 我看过一些网站，点击“使用信用卡或借记卡付款”按钮会打开一个呈现表单的弹出窗口。 我错过了什么？我浏览了他们的 Smart Buttons API 文档，他们没有提到如何在内联渲染和弹出窗口之间切换。 这就是我配置 SDK 的方式：

paypal.Buttons(
    enableStandardCardFields: true,
    locale: 'en_US',
    commit: true,
    style: 
      label: 'pay',
      layout: 'vertical',
      fundingicons: 'true'
    ,
    funding: 
      allowed: [ paypal.FUNDING.CARD ]
    ,
    onInit: function(data, actions) 
      actions.enable()
    ,
    createOrder: function() 
      $('div.loading-container').append('<h2>Processing your payment...</h2>')
      return fetch('/create_order', 
        method: 'post',
        headers: 
          'content-type': 'application/json'
        
      ).then(function(res) 
        return res.json();
      ).then(function(data) 
        return data.table.id;
      );
    ,
    onCancel: function(data) 
      $('div.loading-container').empty()
      return;
    ,
    onApprove: function(data) 
      return fetch('/capture_order', 
        method: 'post',
        headers: 
          'content-type': 'application/json'
        ,
        body: JSON.stringify(
          orderID: data.orderID
        )
      ).then(function(res) 
        return res.json();
      ).then(function(details) 
        if (details.status == 400) 
          window.location.reload();
          return;
        
        window.history.pushState( urlPath:'/orders/thanks' , "" , '/orders/thanks' );
        window.location.reload();
      )
    
  ).render('div.paypal_container');

注意：您可以在 link 中找到预期的行为

【参考方案1】：

您可以使用此解决方法来强制弹出：

//Changes credit/debit button behavior to "old" version
onShippingChange: function(data,actions)
    //if not needed do nothing..
    return actions.resolve();
,

另见Paypal Smart Payment buttons bug

【讨论】：

Stefan 非常感谢您！一个快速的问题，当我应用此解决方法时它会产生负面影响吗？我已阅读有关 onShippingChange 的文档，并没有说明这将触发旧版本的 CC 表单，但实际上解决了我的用例。你怎么看。

【参考方案2】：

黑色的借记卡或信用卡按钮始终呈内联显示（例外：一些国家/地区未启用它）。大多数人都想要这个，并认为它很好。

没有办法让那个黑色按钮打开一个窗口。您可以禁用黑色按钮，只保留正常的 PayPal 按钮，该按钮具有其他行为。

【讨论】：

但是现在，在沙盒环境中，看起来即使是黑色的借记卡/信用卡按钮也偶尔会打开弹出窗口，但并不一致。但我更喜欢内联。即使在沙盒上，我也可以使内联渲染保持一致吗？

通常与浏览器语言/区域设置有关，有时与特定的接收者帐户有关