javascript - Nexus 上的 Android Pay Mobile Web 意外错误

Question

我已经开始尝试在我们的其中一个网站上使用 android pay。我已经设置了一个基本的设置脚本来在测试站点上创建普通支付。

在用户点击触发 Android Pay 的元素之前，一切似乎都很顺利。当用户单击时，操作系统会“向上滑动”，但它在显示任何内容之前就死了，我收到一条错误消息:

“请求失败

发生意外错误。请稍后再试。”

控制台或调试器中没有任何内容可以指示错误的性质。

这是JS:

<script>

    if (window.PaymentRequest) {

        var request = createPaymentRequest();

      request.canMakePayment()
          .then(function (result) {
            if (result) {
              addPayWithGoogleButton();
            }
          })
          .catch(function (err) {
            showErrorForDebugging(
                'canMakePayment() error! ' + err.name + ' error: ' + err.message);
          });
    } else {
      showErrorForDebugging('PaymentRequest API not available.');
    }

    /**
     * Add a purchase button alongside the existing checkout option
     */
    function addPayWithGoogleButton() {
      var payWithGoogleButton = document.createElement('button');
      payWithGoogleButton.appendChild(document.createTextNode('Purchase'));
      payWithGoogleButton.addEventListener('click', onPayWithGoogleClicked);
      document.getElementById('checkout').appendChild(payWithGoogleButton);
    }

    /**
     * Show purchase chooser when buy button clicked
     */
    function onPayWithGoogleClicked() {
      createPaymentRequest()
          .show()
          .then(function(response) {
            // Dismiss payment dialog
            response.complete('success');
            handlePaymentResponse(response);
          })
          .catch(function(err) {
            showErrorForDebugging('show() error! ' + err.name + ' error: ' + err.message);
          });
    }

    /**
     * Configure support for the Google Payments API
     *
     * @returns {object} data attribute suitable for PaymentMethodData
     */
    function getGooglePaymentsConfiguration() {
      return {
        // Merchant ID available after approval by Google.
        // 'merchantId':'01234567890123456789',
        'environment': 'TEST',
        'apiVersion': 1,
        'allowedPaymentMethods': ['CARD', 'TOKENIZED_CARD'],
        'paymentMethodTokenizationParameters': {
          'tokenizationType': 'PAYMENT_GATEWAY',
          // Check with your payment gateway on the parameters to pass.
          'parameters': {}
        },
        'cardRequirements': {
          'allowedCardNetworks': ['AMEX', 'DISCOVER', 'MASTERCARD', 'VISA'],
          'billingAddressRequired': true,
          'billingAddressFormat': 'MIN'
        },
        'phoneNumberRequired': true,
        'emailRequired': true,
        'shippingAddressRequired': true
      };
    }

    /**
     * Create a PaymentRequest
     *
     * @returns {PaymentRequest}
     */
    function createPaymentRequest() {
      // Support Google Payment API.
      var methodData = [{
        'supportedMethods': ['https://google.com/pay'],
        'data': getGooglePaymentsConfiguration()
      }];

      var details = {
        total: {label: 'Test Purchase', amount: {currency: 'USD', value: '1.00'}}
      };

      return new PaymentRequest(methodData, details);
    }

    /**
     * Process a PaymentResponse
     *
     * @param {PaymentResponse} response returned when user approves the purchase request
     */
    function handlePaymentResponse(response) {
      var formattedResponse = document.createElement('pre');
      formattedResponse.appendChild(
          document.createTextNode(JSON.stringify(response.toJSON(), null, 2)));
      document.getElementById('checkout')
          .insertAdjacentElement('afterend', formattedResponse);
    }

    /**
     * Display an error message
     *
     * @param {string} text message to display
     */
    function showErrorForDebugging(text) {
      var errorDisplay = document.createElement('code');
      errorDisplay.style.color = 'red';
      errorDisplay.appendChild(document.createTextNode(text));
      var p = document.createElement('p');
      p.appendChild(errorDisplay);
      document.getElementById('checkout').insertAdjacentElement('afterend', p);
    }
</script>

Answer 1

对于遇到此问题的任何其他人 - 教程代码似乎有问题。我们通过更改以下代码来修复它:

function createPaymentRequest() {
  // Support Google Payment API.
  var methodData = [{
    'supportedMethods': ['https://google.com/pay'],
    'data': getGooglePaymentsConfiguration()
  }];

  var details = {
    total: {label: 'Test Purchase', amount: {currency: 'USD', value: '1.00'}}
  };

  return new PaymentRequest(methodData, details);
}

为此:

function createPaymentRequest() {
      // Support Google Payment API.
      var methodData = [{
        'supportedMethods': 'basic-card',
        'data': getGooglePaymentsConfiguration()
      }];

      var details = {
        total: {label: 'Test Purchase', amount: {currency: 'USD', value: '1.00'}}
      };

      return new PaymentRequest(methodData, details);
    }