对于在 Firefox OS 或 Firefox 桌面版 上构建 Web 应用程序的开发者来说，使用 Mozilla 的 fxpay 库可以轻松地支持支付。除了接受信用卡之外，Mozilla 的支付系统还允许用户在许多国家直接从手机账单中扣款，使其成为移动商务的理想选择。

自我们 首次介绍 fxpay 以来，该库已修复了许多错误并添加了新功能。根据开发者的反馈，我们还决定提供一个支持 原生 Promise （在旧版浏览器上 使用垫片）的新接口，以提高灵活性和更好的错误处理。本文将介绍如何检索产品、处理支付以及从收据中恢复产品。

如果您已直接使用 mozPay API 设置应用内支付，请考虑移植到 fxpay，以便享受 Mozilla 托管的产品带来的便利以及桌面支付等其他功能。至少，请确保您的 JWT 库已修补，以解决最新的安全漏洞。

让我们开始吧！在 安装 fxpay 库 后，您可以开始使用一些 假产品 测试它。

fxpay.configure({fakeProducts: true});
fxpay.getProducts()
  .then(function(products) {
    products.forEach(function(product) {
      addBuyButtonForProduct(product);
    });
  })
  .catch(function(error) {
    console.error('error getting products: ' + error);
  });

这将检索一些预先配置的假产品，您可以用它们进行尝试。一旦您在 Firefox Marketplace 开发者中心 配置了真实的产品，您可以删除此配置值以使用真实产品。

在上面调用的示例函数中，您可以像这样为每个产品显示一个购买按钮

function addBuyButtonForProduct(product) {
  var button = document.createElement('button');
  button.textContent = 'Buy ' + product.name;
  button.addEventListener('click', function () {
 
    fxpay.purchase(product.productId)
      .then(function(purchasedProduct) {
        console.log('product purchased! ', 
                    purchasedProduct);
      })
      .catch(function(error) {
        console.error('error purchasing: ' + error);
      });
 
  });
  document.body.appendChild(button);
}

fxpay 库在后台使用 Mozilla 的 Web 服务 完成所有支付处理，因此当 Promise 解决时，就可以安全地提供产品。目前，fxpay 还会在用户的设备上安装收据。当用户稍后返回您的应用程序时，您将需要检查是否有任何收据，以便恢复他们的购买。

以下是对产品获取代码的重写，用于恢复已购买的产品

fxpay.getProducts()
  .then(function(products) {
    products.forEach(function(product) {
    
      if (product.hasReceipt()) {
        product.validateReceipt()
          .then(function(restoredProduct) {
            console.log('restored product from receipt:', 
                        restoredProduct);
          })
          .catch(function(error) {
            console.error('error validating receipt: ' + 
                          error);
          });
      } else {
        addBuyButtonForProduct(product);
      }
    
    });
  });

我们希望这个新接口让应用内支付的实验比以前更加容易。您永远无法确定哪种商业模式适合您的应用程序，所以为什么不尝试一些想法呢？

完整的 fxpay 使用指南在 MDN 上。