How To Integrate A Payment System For Chrome Apps [Tutorial]

Credit card being swiped through device plugged into a smartphone

payment

So you finished your app or browser extension and now would like to implement a payment system for in-app purchases. You want to sell extra features or virtual goods, but you don’t know where to start. There are many choices and a lot of the implementation seems daunting.

No worries. Google Payments to the rescue! With it, you can immediately start accepting in-app purchases. Furthermore, Google Payments and the Chrome Web Store will keep track of the user for you, so no matter which computer your user uses, your extension will always be able to recognize what he has already bought!

Below we will walk through the basic steps.

image


First, the prerequisites: 

  • Your extension has been uploaded to the Chrome Web Store Developer Dashboard.
  • You have a Google Wallet Merchant account connected (it is automatically connected when you create a merchant account using the same login as the one you use for the Developer Dashboard).


Now let’s get to the steps:

Step 1) In the EDIT page of the app/extension in your dashboard, add the items to the “In-app products” tab (and make sure they are activated).

You can set the items as one-time purchase or subscription items.

Step 2) Include the buy.js JS file in your app/extension package and remember to include it in the manifest.
To get a list of the items within your app/extension, call the get SkuDetails method and to initiate a buy, call the buy method.

Step 3) To check if your user has already purchased the item, call the getPurchases and see if the item is still listed and is “ACTIVE”. If it is a virtual good like a game item and your user uses the purchase up, you can call

the consumePurchase method to remove the item from the user.

For more detailed explanation of the steps and parameters, see this page (I’m including the URL as this page is hard to find): https://developer.chrome.com/webstore/payments-iap

Here is a complete working sample code provided by Google Chrome:

https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/managed-in-app-payments

 

See the payment flow in action now!

Our recent Chrome browser extension Twinword Finder implements this payment method. Users can easily pay through Google Payments to upgrade our extension to a PRO Paid version. We don’t handle any payments, Google does it all.

To see the payment flow in action, after installing the extension, open it, click on the settings icon, and click PRO Paid in the Upgrade options to see the Google Wallet window invoked.

You can download it here

Screen Shot 2016-02-02 at 11.40.34 AM

Leave a Reply

Your email address will not be published. Required fields are marked *