For developers building web applications on Firefox OS or Firefox Desktop, supporting payments is easy with Mozilla’s fxpay library. In addition to accepting credit cards, Mozilla’s payment system lets users charge purchases directly to their phone bill in many countries—making it ideal for mobile commerce.

Since our first introduction to fxpay the library has received a lot of bug fixes and new features. Based on developer feedback, we also decided to offer a new interface supporting native promises (shimmed on older browsers) for flexibility and better error handling. This article explains how to retrieve products, process payments, and restore products from receipts.

If you’ve already set up in-app payments using the mozPay API directly, consider porting to fxpay for the convenience of Mozilla-hosted products and additional features such as desktop payments. At the very least, please make sure your JWT libraries are patched for the latest security vulnerabilities.

Let’s get started! After installing the fxpay library, you can begin testing it out with some fake products.

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

This retrieves some pre-configured fake products that you can play around with. Once you’ve configured real products on the Firefox Marketplace Developer Hub, you can remove this configuration value to work with real products.

In the example function called above, you could display a buy button per product like this:

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);
}

The fxpay library does all the payment processing behind the scenes using Mozilla’s web services so when the promise resolves, it’s safe to deliver the product. At this time, fxpay also installs a receipt on the user’s device. When the user returns to your app later on, you’ll want to check for any receipts so you can restore their purchases.

Here’s a rewrite of the product fetching code to restore purchased products:

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);
      }
    
    });
  });

We’re hoping this new interface makes experimenting with in-app payments even easier than before. You never know what kind of business model will work in your app so why not try out some ideas?

The complete usage guide to fxpay is here on MDN.