Basic and advanced Google Pay button web examples for use in Project …

…IDX.

.vscode/settings.json

@@ -9,5 +9,6 @@
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
-  }
+  },
+  "angular.enable-strict-mode-prompt": false
 }

README.md

@@ -9,6 +9,41 @@ See Google Pay in action:
 
 This repository contains Google Pay button implementations for compatible with popular website frameworks even easier.
 
+## Web
+
+This is a bare bones, plain vanilla JavaScript implementation of the Google Pay button. These examples are designed
+to launch into a Project IDX Workspace, ready to run.
+
+- [Example code basic](./examples/html/gpay-web-101/) <a href="https://idx.google.com/new?template=https%3A%2F%2Fgithub.com%2Fgoogle-pay%2Fgoogle-pay-button%2Ftree%2Fmain%2Fexamples%2Fhtml%2Fgpay-web-101">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://cdn.idx.dev/btn/open_dark_32.svg">
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://cdn.idx.dev/btn/open_light_32.svg">
+    <img
+      height="24"
+      alt="Open in IDX"
+      src="https://cdn.idx.dev/btn/open_purple_32.svg">
+  </picture>
+</a>
+
+- [Example code advanced](./examples/html/gpay-web-201/) <a href="https://idx.google.com/new?template=https%3A%2F%2Fgithub.com%2Fgoogle-pay%2Fgoogle-pay-button%2Ftree%2Fmain%2Fexamples%2Fhtml%2Fgpay-web-201">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://cdn.idx.dev/btn/open_dark_32.svg">
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://cdn.idx.dev/btn/open_light_32.svg">
+    <img
+      height="24"
+      alt="Open in IDX"
+      src="https://cdn.idx.dev/btn/open_purple_32.svg">
+  </picture>
+</a>
+
 ## Web component
 
 [![npm version](https://badge.fury.io/js/%40google-pay%2Fbutton-element.svg)][npm-element]

examples/html/gpay-web-101/README.md

@@ -0,0 +1,58 @@
+# Google Pay for Web
+
+<!--- Open in IDX button -->
+<a href="https://idx.google.com/new?template=https%3A%2F%2Fgithub.com%2Fgoogle-pay%2Fgoogle-pay-button%2Ftree%2Fmain%2Fexamples%2Fhtml%2Fgpay-web-101">
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://cdn.idx.dev/btn/open_dark_32.svg">
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://cdn.idx.dev/btn/open_light_32.svg">
+    <img
+      height="32"
+      alt="Open in IDX"
+      src="https://cdn.idx.dev/btn/open_purple_32.svg">
+  </picture>
+</a>
+
+## About
+
+This project is a minimum viable integration of Google Pay for Web using HTML
+and JavaScript. For a more complete integration, refer to [`gpay-web-201/`][17]
+project template.
+
+## Learning
+
+To learn about the code in this project template, follow to the
+[Google Pay API for Web 101: Basic][10] codelab. Learning paths help you
+get the most of your integration by taking you through a guided developer
+journey from start to finish.
+
+## Create a merchant account
+
+While a merchant ID isn't required for testing your integration in a `TEST`
+enviornment, you will need one when you deploy to a `PRODUCTION` environment.
+Register with the [Google Pay & Wallet Console][15] to receive your merchant ID.
+It's quick and easy! Get yours now.
+
+## Community
+
+- Join the conversation in the [#payments channel on Discord][12]
+- Follow [@GooglePayDevs on X][13] for announcements about more content like this
+- Subscribe to the [Google for Developers][14] YouTube channel
+
+## Support
+
+- Question about this template? Ask in the [discussions][16] section of the
+  Google Pay button repo.
+- For assistance with your implementation, create a support ticket from the
+  [Google Pay & Wallet Console][15].
+
+[10]: https://codelabs.developers.google.com/codelabs/gpay-web-101
+[12]: https://goo.gle/payments-dev-community
+[13]: https://x.com/GooglePayDevs
+[14]: https://goo.gle/developers
+[15]: https://goo.gle/3Cg8KxJ
+[16]: https://github.com/google-pay/google-pay-button/discussions
+[17]: https://github.com/google-pay/google-pay-button/tree/main/examples/html/gpay-web-201/

examples/html/gpay-web-101/dev.nix

@@ -0,0 +1,50 @@
+/*
+ Copyright 2024 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+# To learn more about how to use Nix to configure your environment
+# see: https://developers.google.com/idx/guides/customize-idx-env
+{ pkgs, ... }: {
+  # Which nixpkgs channel to use.
+  channel = "stable-24.05"; # or "unstable"
+
+  # Use https://search.nixos.org/packages to find packages
+  packages = [
+    pkgs.python311
+  ];
+
+  # Sets environment variables in the workspace
+  env = {};
+  idx = {
+    workspace = {
+      onCreate = {
+        default.openFiles = [
+          "README.md"
+          "index.html"
+        ];
+      };
+    };
+
+    previews = {
+      enable = true;
+      previews = {
+        web = {
+          command = ["python3" "-m" "http.server" "$PORT" "--bind" "0.0.0.0"];
+          manager = "web";
+        };
+      };
+    };
+  };
+}

examples/html/gpay-web-101/dev/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!--
+ Copyright 2024 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Google Pay API for Web</title>
+  </head>
+
+  <body>
+    <div id="gpay-container"></div>
+    <p>Transaction info and errors will be logged to the console.</p>
+    <script type="text/javascript" src="main.js"></script>
+    <script async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script>
+  </body>
+
+</html>