1

我正在尝试让一个基本的 Web 支付请求 API 演示工作。据我了解，当我运行此代码时，应显示一个弹出窗口，询问我想使用哪张信用卡：

<html>
    <head>
    </head>
    <body>
        <h1>Pay here</h1>
        <script>
            if(window.PaymentRequest){
                alert("Payment request exists!");

                const supportedPaymentMethods = [ {
                        supportedMethods: ["basic-card"]
                    }
                ];

                const paymentDetails = {
                    total: {
                        label: "Total Cost",
                        amount: {
                            currency: "GBP",
                            value: 1
                        }
                    }
                };

                const options = {};

                const paymentRequest =  new PaymentRequest(
                    supportedMethods, paymentDetails, options
                );

                paymentRequest.show();
            }
        </script>
    </body>
</html>

但不会发生太多事情。确实会出现警报消息。我只是想让基础工作。我不相信这段代码会向任何人汇款，因为没有提到任何帐户。我希望能迈出下一步。请帮忙！谢谢。

4

1 回答 1

1

我终于找到了一个工作演示。它将您的信用卡详细信息保存在浏览器中，并以易于使用的格式显示（没有表单字段）。它不会将信用卡详细信息发送到支付系统，它只是准备它：

<button id="buyButton">Buy</button>

<script>
/**
 * Builds PaymentRequest for credit cards, but does not show any UI yet.
 *
 * @return {PaymentRequest} The PaymentRequest oject.
 */
function initPaymentRequest() {
  let networks = ['amex', 'diners', 'discover', 'jcb', 'mastercard', 'unionpay', 'visa', 'mir'];
  let types = ['debit', 'credit', 'prepaid'];
  let supportedInstruments = [{
      supportedMethods: networks,
  }, {
      supportedMethods: ['basic-card'],
      data: {supportedNetworks: networks, supportedTypes: types},
  }];

  let details = {
    total: {label: 'Donation', amount: {currency: 'USD', value: '55.00'}},
    displayItems: [{
      label: 'Original donation amount',
        amount: {currency: 'USD', value: '65.00'},
      },{
        label: 'Friends and family discount',
        amount: {currency: 'USD', value: '-10.00'},
      }
    ]
  };

  return new PaymentRequest(supportedInstruments, details);
}

/**
 * Invokes PaymentRequest for credit cards.
 *
 * @param {PaymentRequest} request The PaymentRequest object.
 */
function onBuyClicked(request) {
  request.show().then(function(instrumentResponse) {
    sendPaymentToServer(instrumentResponse);
  })
  .catch(function(err) {
    ChromeSamples.setStatus(err);
  });
}

/**
 * Simulates processing the payment data on the server.
 *
 * @param {PaymentResponse} instrumentResponse The payment information to
 * process.
 */
function sendPaymentToServer(instrumentResponse) {
  // There's no server-side component of these samples. No transactions are
  // processed and no money exchanged hands. Instantaneous transactions are not
  // realistic. Add a 2 second delay to make it seem more real.
  window.setTimeout(function() {
    instrumentResponse.complete('success')
      .then(function() {
        document.getElementById('result').innerHTML = instrumentToJsonString(instrumentResponse);
      })
      .catch(function(err) {
        ChromeSamples.setStatus(err);
      });
    }, 2000);
  }

  /**
  * Converts the payment instrument into a JSON string.
  *
  * @private
  * @param {PaymentResponse} instrument The instrument to convert.
  * @return {string} The JSON string representation of the instrument.
  */

  function instrumentToJsonString(instrument) {
    let details = instrument.details;
    details.cardNumber = 'XXXX-XXXX-XXXX-' + details.cardNumber.substr(12);
    details.cardSecurityCode = '***';

    return JSON.stringify({
      methodName: instrument.methodName,
      details: details,
    }, undefined, 2);
  }

  const payButton = document.getElementById('buyButton');
  payButton.setAttribute('style', 'display: none;');
  if (window.PaymentRequest) {
    let request = initPaymentRequest();
    payButton.setAttribute('style', 'display: inline;');
    payButton.addEventListener('click', function() {
      onBuyClicked(request);
      request = initPaymentRequest();
    });
  } else {
    ChromeSamples.setStatus('This browser does not support web payments');
  }
</script>

您可以复制/粘贴上面的代码并保存为 HTML 并从本地驱动器加载它（不需要任何花哨的东西，比如像我想的那样从安全的 https URL 加载它）。

于 2017-12-26T10:46:26.503 回答