PayPal JS SDK 按钮:仅在选择用户国家/地区时启用

PayPal JS SDK buttons: enable only when a user county is selected

我想根据输入表单中的特定用户输入来启用和禁用 PayPal 按钮。下面是部分脚本,其中按钮仅应在用户选择国家/地区时处于活动状态。选择一个国家时,我正在使用变量将变量更改为1,但是启用的操作不起作用。

let payPalBtn_status = 0; // variable set paypal status

$(document).ready(function () {
    initPayPalButton(); //iniate button place on DOM
    $('#country_shipping').on('change', function(e){
        var country = $('#country_shipping :selected').val();
        if (country != 'none'){
            payPalBtn_status = 1;  // if country select has been selected status = 1
        }
    });
})



function initPayPalButton() {
    paypal.Buttons({
        onInit: function(data, actions){
            actions.disable();
            if (payPalBtn_status == 1){
                actions.enable(); // if paypal status variable is equal to 1 button to be enabled
            }
        },
        style: {
            shape: 'rect',
            color: 'gold',
            layout: 'vertical',
            label: 'paypal',
        },

  createOrder: function(data, actions) {
    return actions.order.create({
      purchase_units: [{
          "reference_id":"123456789",
          "description":"Sticker, ref_id: 1234567",
          "amount":{
              "currency_code":"GBP",
              "value":4,
                    }}]
    });
  },
  onApprove: function(data, actions) {
    return actions.order.capture().then(function(orderData) {
    });
  },

  onError: function(err) {
    console.log(err);
  }
}).render('#paypal-button-container');
}

将同步事件侦听器移至 onInit 内部。有一个例子 in the documentation.

将其从复选框调整为具有值的“#country_shipping”元素...

  paypal.Buttons({

    // onInit is called when the button first renders
    onInit: function(data, actions) {

      // Disable the buttons
      actions.disable();

      // Listen for changes...
      document.querySelector('#country_shipping')
        .addEventListener('change', function(event) {

          // Enable or disable the button when it has a value
          if (event.target.value) {
            actions.enable();
          } else {
            actions.disable();
          }
        });
    },