 Hi, I'm Joyce and I'm a Developer Relations Engineer on the Chrome OS team. And I'm Jeevan, a Software Engineer on the Chrome OS team in Sydney. We're here to talk to you about implementing Google Play billing in your Progressive Web App. If you have a PWA in the Play Store and want to sell digital content and goods, then you will need to implement Play Billing. It handles financial transactions for you and your customers will experience a consistent and familiar purchase flow. Now, before we go any further, if you haven't done so yet, we highly recommend you first check out Andre and Alex's video. They'll go over key details about using bubble wrap to get your web app published to the Play Store. After doing that, you can come back and watch the session. The things we will discuss here will make a lot more sense this way. Before we get into the implementation details, let's first discuss some of the benefits of Play Billing. It's likely that Play Store users are already familiar with the Play Billing UI and purchase flow. For your users, this creates a unified billing experience they are already comfortable navigating. Continuing to keep your users in mind, Play Billing supports over 135 countries and multiple local currencies. This simplifies transactions for you and global users. Play Billing also accepts different payment methods. These include credit and debit cards and Google Play Balance and Google Pay where available. Many Play Store users will already have their preferred payment methods set up, so they won't need to do additional work here. They can start making purchases right away. Play Billing also provides an easy way for developers and merchants to manage promotional codes and offers. Additionally, it supports in-app products like one-time and repeatable purchases as well as subscriptions. We'll go into more detail about this later on. Lastly, the Play Store is also available on Chromebooks, so if you choose to support and optimize your web app for Chrome OS, you can bring it to a whole new audience of users. You will also be able to provide a more seamless experience for Chromebook users who are already using your PWA on their Android devices. Users can purchase a subscription on their Android phone, then jump onto their Chromebook to enjoy all their new benefits there, and vice versa. If you're excited and ready to start integrating Play Billing into your progressive web app, there are three important components to implement and set up. The Google Play Console, the web billing APIs in your PWA, and the back-end server. First, let's look at the Play Console, which serves as an interface to Google Play. Most importantly, it's also how you will add your in-app products and subscriptions for your app. First, make sure you've created a developer account and app in the Play Console. If you haven't uploaded your app to a production or testing track yet, you'll need to do that first. Make sure you've also added the billing permission to your Play App package. The Bubble Wrap tool makes it easy to do this. Just simply enable the Support for Play Billing when prompted during the init setup. Now that you have your app set up in the Play Console, you'll want to add some awesome products for your users to purchase. Go to In-App Products, click the Create Product button and fill in the required information. Note that the product ID cannot be reused or changed once created, so choose wisely. Fill in the product details, then set the price for your product. Click Save, though when you're ready to make it available to users, activate to enable it. Similarly, for subscriptions, go to the Subscriptions section and Create Subscription. The product ID must again be unique. When setting up the price, you'll also need to set the billing period. This is how often you want your subscription to be renewed and how often the user will be billed. There are additional options that can be set, like free trial and introductory price. As you're creating your In-App products and subscriptions in the Play Console, make sure to keep track of the product IDs as that's how they'll be identified by the Digital Goods API later on. Next, you might want to create some promotional offers to get users excited about your app and products. You can easily manage these from the Play Console. Go to Promo Codes and click Create Promo Code. You can set the start and end date for your promotion. You'll also need to set what the promo is for. Paid app, In-App product, or subscription. Having these cool products and subscriptions are great, but you'll need some way to access your revenue, too. In your Play Console, under Settings and Developer Account, select Payment Settings. There, you can set up your payments profile by filling in your business information. After creating your profile, it will automatically link to your Play Console where you can manage your app sales and view earnings reports. That's it for the Play Console setup. You can always come back to edit your product and add more. Now, I'm going to hit it off to Jeevan to talk about the two APIs you'll need to implement in your web app. Now that you've loaded up the Play Console with your excellent products, the next step is to use the Digital Goods API and the Payment Request API to enable your web app to start accepting purchases. Let's take a closer look at these APIs. The Digital Goods API manages digital products and facilitates in-app purchases for web applications. Note that the Digital Goods API is currently under an origin trial, so make sure to sign up at this link before trying out the API. As with all origin trials, the API can change, so make sure to read the documentation if you come across something unexpected. The Payment Request API makes use of the information the Digital Goods API manages and handles the payment transactions to make a purchase. At the moment, the Digital Goods API is only supported by Chrome if your PWA is running as a trusted web activity from the Play Store. You can detect if the API is available by checking the existence of the Get Digital Goods service method in the window object. If it exists, we're good to go ahead and get the service. We use the URL play.google.com slash billing to let the Digital Goods API know that we wanted to use the Google Play Store. You can call the Get Digital Goods service method with this URL to get an instance of the service that's connected to Google Play. If the service is available, you're now able to call the API's methods. If the service is unavailable, knowledge returns instead. Next, let's take a look at the Get Details method to see how it can be used to get item details for the items you set up in the Play Console. Once you have the service for the Play Store, you can call Get Details to retrieve the item's details from Play's backend. You can then use this information to display your products to the user. Now, let's take a look at how you might implement this in code. You will need to provide the Get Details method with a list of product IDs you created in the Play Console earlier. You will need to keep track of the product IDs separately, either hard-coded or in a database, as the Digital Goods API does not provide a way to get a list of these IDs. If you change or update your product IDs, just remember to keep it consistent across your application and the Play Console. The product ID is similar to an item bar code. It's a unique identifier that doesn't really make sense to a shopper, but it can be scanned to get useful information. For your app, you will need to keep track of the product's ID, but you would not want to display it to the user. Going back to the code, Get Details returns an object filled with item details like title, description, and price that you can use to show the user what's available. Now that the user can see product details, they will probably want to buy something. You can use the Payment Request API to handle the purchase flow with the help of the Google Play Store. The Google Play Store is already aware of products because you have added them to the Play Console. Therefore, you don't need to pass the cost information to the Payment Request API. To let the Payment Request API know that you want to use Play Billing, we set the supported methods field to the URL play.google.com. You can tell the Play Store which item the user is trying to purchase by setting the SKU member in the data object to be the product ID of the item being purchased. Note that Play Billing only allows one item to be purchased at a time. We can then create a new Payment Request. To kick off the payment flow, call Show on the Payment Request object. This will display the Play Purchase UI to the user. The user will be able to review details like the product they're buying, price, and the currency of the purchase. If the user successfully completes a purchase, the payment results with a payment response. Keep in mind that the user can cancel a payment, and this will cause a promise to reject with an error. When a successful purchase is made, a purchase token will be returned in the details property of the payment response. You can think of the purchase token as a receipt. It proves that the user has properly paid for and now owns this item. Finally, to finish the payment flow, call the complete method on the payment response object. This closes the payment UI. Yay, you have just completed your first purchase. Next, you should grant the proper entitlements to the user for the item they just purchased. Then use the Acknowledge method to inform Play that you have received and acted upon the purchase appropriately. Acknowledging a purchase is an important step. If a purchase is not acknowledged within 72 hours, the transaction is refunded to the user. This is to ensure that in an event of a network error and you are unable to grant the proper entitlements, the user is in charge. The Acknowledge method requires a purchase token, previously got from the payment response, and a purchase type enum, which can either be repeatable or one-time. Let's dig in a little deeper into the purchase type enum. A one-time purchase type is used when a user can only buy a product once. For example, a lifetime upgrade. Think of this as a non-consumable item. The one-time purchase type is also used when a user has to consume a product before buying it again. The repeatable purchase type is used when a user can buy multiples of an item. For example, potions in a game. Think of this as a consumable item. Subscription should only be acknowledged as one time because a user should only have one instance of each subscription. Now that we've looked at some code snippets, let's have a look at the whole flow again to understand how the two APIs interact with Google Play and your back-end server. First, create a new payment request object and call the show method. This launches the Play Billing UI. Once the user completes the payment, a purchase token is returned from Play. We highly recommend that you validate the purchase token with your back-end to help prevent fraud. Then call complete on the return payment response to close the Play Billing UI. Finally, acknowledge the purchase and update the UI to let the user know they've been successful in making a purchase. And don't forget to grant the proper entitlements and benefits of their new purchase to the user. Now that your user has made a purchase, you're probably itching to display it to your user. Use the list purchases method to get a list of the user's currently owned items or subscriptions. Let's step through this flow together. Once again, make sure you have the digital goods service for the Play Store. Then call list purchases. Play will return the user's current purchases that have not been consumed or subscriptions that are ongoing. These purchases may have come from the same user using your app on another device, a previous install, or redeemed from a promo code. List purchases will return a promise which resolves to a sequence of purchase details, which have item IDs. These IDs correspond to the product IDs in the Play Console. The purchase details also has useful information about the purchase like the purchase token, purchase state, and whether the purchase has been acknowledged. As you're going through a user's existing purchases, it's a good time to check for any purchases that are not acknowledged. Unacknowledged purchases may exist due to network interruptions during a purchase causing a purchase to not be acknowledged. Simply check the acknowledge field in the purchase details object and call the acknowledged method if required. At long-lost, you're now able to display the items your user has purchased and currently owns. Congratulations! You've just completed the whole purchase flow, from getting product details to acknowledging a purchase. Joyce will now go over a few things you need to keep an eye on while building out your back-end. The code Givens just walked you through all exists in the app client. However, it's just as important to implement some key Play Billing components in your back-end. To prevent bad players from accessing items they didn't actually purchase, it's a good idea to keep track of your users and their entitlements in your back-end. As you saw earlier, after a successful purchase, the Play Store returns a unique purchase token associated with it. You should also keep track of these tokens to ensure someone isn't reusing an existing token to get more entitlement. In your back-end, you can also verify purchases and tokens with the Google Play Developer API, which lets you manage your in-app products and subscriptions. Use the appropriate API endpoints to retrieve a purchase and verify that it is legitimate. To keep your back-end state updated, you should also use Google Cloud PubSub to enable real-time developer notifications, or RTDN for short. RTDN lets you subscribe for notifications instead of polling for them. These notifications let you know when a user's subscription state changes, like a cancellation or renewal. Implementing these into your back-end server is crucial for preventing fraud and ensuring you're granting the most up-to-date entitlements to your users, across their devices and across platforms that you support. If you want to list your PWA and the Play Store and have in-app products and subscriptions, Play Policy will require you to implement Play Billing. This brings benefits for you and your users because it creates a unified billing experience. We covered a lot in this session, but there's still a couple more pieces to the puzzle. The DevRel team has created an end-to-end sample covering everything we discussed today, as well as bubble wrap and more on the Play Developer API. There, you'll be able to see more in-depth how all the different parts fit together. If you'd like to see the Digital Goods API in action, you can also check out Clipchamp's PWA. Or if you just want general information about developing for and on Chrome OS, check out Chrome OS.dev. It's our dedicated developer resource for all things Chrome OS. More resources and links we've mentioned will also be in the description. We hope this session helped you make sense of how to implement Play Billing in a PWA with the Digital Goods and Payment Request APIs. Thanks for watching!