Added web IDX templates

google-pay · Nov 12, 2024 · d556ced · d556ced
1 parent 5ad056d
commit d556ced
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 77 deletions.
diff --git a/README.md b/README.md
@@ -11,38 +11,30 @@ This repository contains Google Pay button implementations for compatible with p
 
 ## 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>
+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/)<br>
+  <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/)<br>
+  <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
 

diff --git a/examples/html/gpay-web-101/README.md b/examples/html/gpay-web-101/README.md
@@ -18,22 +18,19 @@
 
 ## 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.
+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.
+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.
+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
@@ -44,10 +41,8 @@ It's quick and easy! Get yours now.
 
 ## 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].
+- 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

diff --git a/examples/html/gpay-web-101/dev/index.html b/examples/html/gpay-web-101/dev/index.html
@@ -15,7 +15,6 @@
  limitations under the License.
 -->
 <html lang="en">
-
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -28,5 +27,4 @@
     <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>
diff --git a/examples/html/gpay-web-101/idx-template.json b/examples/html/gpay-web-101/idx-template.json
@@ -1,8 +1,8 @@
 {
-    "name": "Google Pay API for Web",
-    "description": "Minimum viable web integration of the Google Pay API on Web.",
-    "categories": ["Web app", "Misc"],
-    "icon": "https://www.gstatic.com/images/branding/productlogos/google_pay_round/v6/192px.svg",
-    "publisher": "Google Pay DevRel",
-    "website": "https://codelabs.developers.google.com/codelabs/gpay-web-101"
-}
+  "name": "Google Pay API for Web",
+  "description": "Minimum viable web integration of the Google Pay API on Web.",
+  "categories": ["Web app", "Misc"],
+  "icon": "https://www.gstatic.com/images/branding/productlogos/google_pay_round/v6/192px.svg",
+  "publisher": "Google Pay DevRel",
+  "website": "https://codelabs.developers.google.com/codelabs/gpay-web-101"
+}
diff --git a/examples/html/gpay-web-201/README.md b/examples/html/gpay-web-201/README.md
@@ -18,22 +18,19 @@
 
 ## About
 
-This project is a more complete integration of Google Pay API for Web using
-HTML and JavaScript. For a more bare bones integration, refer to
-[`gpay-web-101/`][17] project template.
+This project is a more complete integration of Google Pay API for Web using HTML and JavaScript. For a more bare bones
+integration, refer to [`gpay-web-101/`][17] project template.
 
 ## Learning
 
-To learn about the code in this project template, follow to the
-[Google Pay API for Web 201: Advance][10] codelab. Learning paths help you
-get the most of your integration by taking you through a guided developer
-journey from start to finish.
+To learn about the code in this project template, follow to the [Google Pay API for Web 201: Advance][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.
+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
@@ -44,10 +41,8 @@ It's quick and easy! Get yours now.
 
 ## 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].
+- 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-201
 [12]: https://goo.gle/payments-dev-community

diff --git a/examples/html/gpay-web-201/dev/index.html b/examples/html/gpay-web-201/dev/index.html
@@ -16,7 +16,6 @@
 -->
 
 <html lang="en">
-
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -29,5 +28,4 @@
     <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>
diff --git a/examples/html/gpay-web-201/idx-template.json b/examples/html/gpay-web-201/idx-template.json
@@ -1,8 +1,8 @@
 {
-    "name": "Google Pay API for Web complete",
-    "description": "A more complete integration of the Google Pay API on Web.",
-    "categories": ["Web app", "Misc"],
-    "icon": "https://www.gstatic.com/images/branding/productlogos/google_pay_round/v6/192px.svg",
-    "publisher": "Google Pay DevRel",
-    "website": "https://codelabs.developers.google.com/codelabs/gpay-web-201"
+  "name": "Google Pay API for Web complete",
+  "description": "A more complete integration of the Google Pay API on Web.",
+  "categories": ["Web app", "Misc"],
+  "icon": "https://www.gstatic.com/images/branding/productlogos/google_pay_round/v6/192px.svg",
+  "publisher": "Google Pay DevRel",
+  "website": "https://codelabs.developers.google.com/codelabs/gpay-web-201"
 }