PayPal Express Checkout 按钮在单击按钮时进行验证

Posted 2023-02-22

【中文标题】PayPal Express Checkout 按钮在单击按钮时进行验证

【英文标题】：PayPal Express Checkout button with validation when button is clicked

【发布时间】：2018-11-30 22:30:13

【问题描述】：

我正在编写新的 PayPal Express Checkout javascript 按钮，因此当单击它时，会运行一些验证，并根据验证，继续或抑制按钮体验。

这个演示展示了一些验证，但并不完全符合我的需要。 https://developer.paypal.com/demo/checkout/#/pattern/validation

我有这个测试用例，你可以试试：https://jsfiddle.net/gardavis/51kvtjax - 此代码使用 PayPal 的脚本：https://www.paypalobjects.com/api/checkout.js。

这是我试图开始工作的 jsfiddle 的一部分......

// Called when page displays
validate: function(actions) 
    console.log("validate called");
    actions.disable(); // Allow for validation in onClick()
    paypalActions = actions; // Save for later enable()/disable() calls
,

// Called for every click on the PayPal button even if actions.disabled
onClick: function() 
    console.log('onClick called');
    // Do validations and if OK, continue on to PayPal popup
    var zip = document.querySelector('#zipcode').value;
    var isValid = zip.length >= 5;
    // Issue: fix to continue if valid, suppress popup if invalid
    if (isValid) 
        document.querySelector('#msg').style.display = 'none';
        paypalActions.enable();
        // TODO: Simulate click of PayPal button to display popup
     else 
        document.querySelector('#msg').style.display = 'block';
        paypalActions.disable(); // Too late
    
,

validate() 被调用一次，基本上是在页面加载的时候。现在验证还为时过早。单击按钮时会调用 onClick() 函数，这是进行验证的好地方，但如果有效则我无法继续，如果无效则显示错误。

该演示在 validate() 函数范围内使用了一个复选框事件，因此它能够启用/禁用 PayPal 弹出窗口（如果禁用，onClick() 仍然有效）。演示的 onClick() 只是显示/隐藏错误消息。

有人知道如何在 onClick() 中进行验证吗？

【问题讨论】：

在 javascript 中创建验证函数，如果验证不成功，请调用 e.preventdefault()

我尝试在验证失败时添加 e.preventDefault() 并且控制台显示：e.preventDefault 不是函数。在验证成功时我希望它运行的情况不会有帮助。

【参考方案1】：

我添加了一个新字段来验证哪个是客户名称我添加了一个验证，如果有效，它会显示贝宝弹出窗口，您可以复制代码并更新小提琴并检查它：

<div style="font-family:arial;font-size:14px;">
<p id="msgZip" style="display:none;color:#c00">Please enter a 5-digit zip code</p>
<p><label><input id="zipcode" style="width:50px"> Zip Code</label></p>

<p id="msgName" style="display:none;color:#c00">Please enter your name</p>
<p><label><input id="customername" style="width:50px"> Customer name</label></p>

<div id="paypal-button-container"></div>

<hr/>
<p>
Enter a 5-character zip code and click the checkout button. Validation takes place and since
it is valid, the PayPal experience should display.</p>
<p>A second click on the button does so since the earlier successful validation enabled the button.
</p>
</div>

Javascript

var paypalActions;
// Render the PayPal button
paypal.Button.render(
  env: 'sandbox', // sandbox | production
  commit: true, // Show Pay Now button

  style: 
    label: 'checkout',
    size: 'medium', // small | medium | large | responsive
    shape: 'rect', // pill | rect
    color: 'gold' // gold | blue | silver | black
  ,

  client: 
    sandbox: 'AZDxjDScFpQtjWTOUtWKbyN_bDt4OgqaF4eYXlewfBP4-8aqX3PiV8e1GWU6liB2CUXlkA59kJXE7M6R',
    production: '--not used--'
  ,

  // Called when page displays
  validate: function(actions) 
    console.log("validate called");
    actions.disable(); // Allow for validation in onClick()
    paypalActions = actions; // Save for later enable()/disable() calls
  ,

  // Called for every click on the PayPal button even if actions.disabled
  onClick: function(e) 
    console.log('onClick called');

    var msgErrors = 0;

    // Do validations and if OK, continue on to PayPal popup
    var zip = document.querySelector('#zipcode').value;
    var isValid = zip.length >= 5;

            // Issue: fix to continue if valid, suppress popup if invalid
    if (isValid) 
      document.querySelector('#msgZip').style.display = 'none';          
      // TODO: Simulate click of PayPal button to display popup
     else 
      document.querySelector('#msgZip').style.display = 'block'; 
      msgErrors +=1;
    

     var name = document.querySelector('#customername').value;
    isValid = name.length > 0;
    formValid = isValid;

    if (isValid) 
      document.querySelector('#msgName').style.display = 'none';          
     else 
      document.querySelector('#msgName').style.display = 'block';
      msgErrors +=1;
       

    if (msgErrors == 0) 
      paypalActions.enable();
      // TODO: Simulate click of PayPal button to display popup
     else 
      paypalActions.disable(); // Too late
            

  ,

  // Buyer clicked the PayPal button.
  payment: function(data, actions) 
    console.log('payment called');
    return actions.payment.create(
      payment: 
        transactions: [
          amount: 
            total: '0.01',
            currency: 'USD'
          
        ]
      
    );
  ,

  // Buyer logged in and authorized the payment
  onAuthorize: function(data, actions) 
    console.log('onAuthorize called');
    return actions.payment.execute().then(function() 
      window.alert('Payment Complete!');
    );
  ,

, '#paypal-button-container');

【讨论】：

我看到了额外的名称字段以及它是必需的验证，但问题仍然存在 - 成功验证后，PayPal 登录/结帐过程未运行。

@GarDavis 是的，当您单击它 2 次时它会运行。这是另一个问题

// TODO：模拟点击 PayPal 按钮以显示弹出窗口，这是一个大任务。你能解决这个问题吗？它在第二次点击后运行

【参考方案2】：

剩下的问题是您必须单击按钮 2 次，因为您第一次执行 actions.enable(); 以启用按钮操作。因此，您在第二次单击后开始结帐过程。

为了解决这个问题，我使用了一个/多个事件侦听器并从那里启用或禁用该操作：

validate: function(actions) 
  actions.disable();
  // i added a 'validate' class value for each element i track
  document.querySelectorAll('.validate').forEach(item => 
    item.addEventListener('change', event => 
      var valid = true; // set it to false if any rule is violated
      /**********************************/
      /* set your validation rules here */
      /**********************************/
      if (valid) 
        actions.enable();
       else 
        actions.disable();
      
    );
  );

您仍然可以在 onClick 函数中进行一些 CSS 样式更改（例如输入字段的红色边框）

【参考方案3】：

禁用/允许按钮为时已晚，因此您必须在每次 INPUT 更改时验证所有内容，并在用户进行实际点击之前启用/禁用 PayPal 按钮。