Spotted a bug? Have a great idea? Help us make google.dev great!

This codelab teaches you how to turn a simple web page into a Spot, then walks you through how to interact with the Spot JavaScript API.

Prerequisites

What you'll do

  • Turn a simple web page into a Spot for Google Pay.
  • Use Google Chrome Developer Tools to interact with the Spot JavaScript API.

What you'll need

  • Chrome Developer Tools
  • An Android device with Google Pay installed and USB debugging enabled
  • Web hosting for static CSS, HTML, and JavaScript, such as Firebase Hosting
  • An IDE or text editor of your choice, such as Atom, Sublime Text, Visual Studio Code, or WebStorm
  1. Open your text editor.
  2. Copy the following script tag:
<script async src="https://microapps.google.com/apis/v1alpha/microapps.js"></script>
  1. Paste the script tag into a blank web page in your text editor, then type some text, such as My Spot.

The script tag adds a JavaScript variable to the web page called microapps, which turns your web page into a Spot.

  1. Upload the web page to your existing web-hosting provider so that you can access it at the URL for your Spot, which you received during onboarding.

Now you can view your Spot on the web, but you can't interact with the Spot JavaScript API yet. To do so, you need to view your Spot in Google Pay.

  1. Open your Spot on your mobile Android device by navigating to the following URL, but remember to replace your.microapp.id with your microapp ID:
https://microapps.google.com/your.microapp.id

That opens your Spot in the Google Pay app.

  1. Connect your device to your computer with a USB cord and ensure that USB debugging is enabled.
  1. Go to chrome://inspect to open Chrome Developer Tools.

  1. Select the Discover USB devices checkbox, if necessary.
  1. Click inspect under the WebView, a mini web browser embedded in an Android app.

That opens a dual screen that shows your Spot as it appears on the web on one side and an area where you can interactively debug your Spot on the other side.

  1. Click the dropdown menu and select the frame of your Spot.

  1. Write typeof microapps.requestPayment, then press the Enter key (the return key on Macintosh).

That should provide "function", which confirms that the Spot JavaScript API exists.

Congratulations! You turned a simple web page into a Spot for Google Pay and interacted with the Spot JavaScript API.