标签: payment-request-api

我看到 Google 发布了一个新的 Google Pay API for web。但是，还有一个用于 Web的Payment Request API。Google Pay 只是 Payment Request API 的更名吗？在什么情况下你会使用一种 API 而不是另一种？

我正在使用Stripe的PaymentRequest按钮来收集付款和运送信息，以便稍后在服务器端使用Stripe处理付款。我的目标是ApplePay，但目前正在PaymentRequest API（Chrome）下进行测试。

在提交付款表格之前，我需要知道客户的收货地址以计算和显示税额（并更新总计）。我可以通过“ shippingaddresschange”事件轻松获得它，但前提是客户更改了地址。

如果客户以后不更改付款地址，我该如何获取自动加载付款请求表的默认收货地址？初始（默认）地址似乎没有触发“ shippingaddresschange”事件。

我正在尝试在网站上实施 google pay。google pay 的外部库是从 pay.google.com 加载的。在这个 google 脚本中，他们调用浏览器 api PaymentRequest()。这个 api 内置于流行的浏览器中，如 Safari、Chrome 等。

我有 google pay 工作，但它在 Firefox 上不起作用。加载外部脚本时，它调用 PaymentRequest 并在控制台中显示以下错误：ReferenceError: PaymentRequest is not defined

链接到谷歌支付脚本 https://pay.google.com/gp/p/js/pay.js

Mozilla Firefox 官方网页声明在安全上下文中支持 PaymentRequest。 https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API

我只复制和粘贴官方来源提供的相同代码

在我看来，PaymentRequest 在 Firefox 中不受支持并且不起作用。我错过了什么？

查看 chrome 和 safari 的控制台。

我想将 ApplePay 和 GooglePay 集成到我们的 Angular 应用程序中。

对于GooglePay，google 提供了一个有用的npm 包。https://www.npmjs.com/package/@google-pay/button-angular

我试图为 ApplePay 寻找类似的优质套餐，但没有找到。

我想在 Angular 上实现 ApplePay。有两种方法可以实现它（JS API 和 Payment Request API），我想使用 API 方法，因为我想在服务器端进行尽可能多的处理。通过查看以下页面，很难理解 JS API 和 Payment Request API 之间的区别。 https://applepaydemo.apple.com/

令人惊讶的是，我找不到任何 Angular 使用 ApplePay 的示例代码。我不敢相信以前没有人在 Angular 上使用过 ApplePay。可能还有另一种/更好的方法吗？

在 Angular 中，获取窗口实例甚至很棘手。我已经尝试了这个问题中的解决方案，并设法使用服务提供商注入窗口实例。我可以在适当的设备上显示 ApplePay 按钮，但在调用 ApplePaySession 对象时出现以下错误。显然注入的窗口不是顶级窗口。

错误：尝试从安全源与其顶级框架不同的文档启动 Apple Pay 会话。

根据WebKit 代码，这是它返回错误但不确定如何解决它的时候。

 if (!ancestorDocument->securityOrigin().isSameSchemeHostPort(topOrigin))
      return Exception { InvalidAccessError, "Trying to start an Apple Pay session from a document with an different security origin than its top-level …

我有使用测试数据的按钮，但是有一种表格可以收集数量并使用下拉菜单设置标签。我需要在提交之前使用表单数据更新付款请求按钮。

我已将按钮初始化，它出现在我的Android设备上。文档准备好后，我将调用initPaymentRequest。

function initPaymentRequest(){
    paymentRequest = stripe.paymentRequest({
        country: 'US',
        currency: 'usd',
        total: {
            label: 'Demo total',
            amount: 1000,
        },
    });
    prButton = elements.create('paymentRequestButton', {
        paymentRequest: paymentRequest,
    });

    // Check the availability of the Payment Request API first.
    paymentRequest.canMakePayment().then(function(result) {
        if (result) {
            log("Payment Request Available");
            $(".ux-submit, #payment-request-button").addClass("col-xs-6");
            prButton.mount('#payment-request-button');
        } else {
            log("Payment Request NOT Available");
            $(".ux-submit, #payment-request-button").addClass("col-xs-6");
        }
    });

    paymentRequest.on('click', updatePaymentRequest);
    paymentRequest.on('token', function(ev) {
        // Send the token to your server to charge it!
        fetch('/charges', {
            method: 'POST',
            body: JSON.stringify({token: …

当我尝试在真实设备上使用 Google Pay 付款（在 TEST 环境中）时，我收到标题中的错误消息。

我曾尝试将“网关”更改为像 google docs 显示的字符串，但到目前为止什么都没有。

const DETAILS = {
id: 'COMPANY',
displayItems: [
  {
    label: 'Phone Bill',
    amount: { currency: 'USD', value: compTotal }
  }
],
total: {
  label: 'COMPANY',
  amount: { currency: 'USD', value: compTotal }
}
};

// GOOGLE PAY
const METHOD_DATA = [{
  supportedMethods: ['android-pay'],
  data: {
    supportedNetworks: ['visa', 'mastercard', 'amex'],
    currencyCode: 'USD',
    environment: 'TEST', // defaults to production
    paymentMethodTokenizationParameters: {
      tokenizationType: 'GATEWAY_TOKEN',
      parameters: {
        gateway: 'braintree',
        'braintree:tokenizationKey': 'sandbox_XXXXXXXXXXX'
      }
    }
  } …