fix: remove shadow DOM workaround

Fixes google-pay#19
socsieng · Oct 31, 2020 · 24adf2a · 24adf2a
1 parent b8fcb60
commit 24adf2a
Show file tree

Hide file tree

Showing 14 changed files with 107 additions and 44 deletions.
diff --git a/examples/angular/package-lock.json b/examples/angular/package-lock.json
diff --git a/examples/html/app.css b/examples/html/app.css
@@ -77,3 +77,8 @@
 .example > .demo > * {
   margin: 1px;
 }
+
+#button4 {
+  width: 400px;
+  height: 60px;
+}
diff --git a/examples/html/basic-example.js b/examples/html/basic-example.js
@@ -16,6 +16,10 @@
 
 import './node_modules/@google-pay/button-element/dist/index.js';
 
+function onLoadPaymentData(paymentData) {
+  console.log('load payment data', paymentData);
+}
+
 const staticButton = document.getElementById('static');
 
 staticButton.paymentRequest = {

diff --git a/examples/html/index.html b/examples/html/index.html
@@ -22,6 +22,7 @@
     <title>Google Pay Example</title>
     <link rel="stylesheet" type="text/css" href="app.css" />
   </head>
+
   <body>
     <div class="params">
       <label>
@@ -63,8 +64,16 @@
           </google-pay-button>
         </div>
       </div>
+      <div class="example">
+        <div class="title">WebComponent Example</div>
+        <div class="demo">
+          <my-web-component></my-web-component>
+          <my-web-component></my-web-component>
+        </div>
+      </div>
     </div>
   </body>
   <script type="module" src="basic-example.js"></script>
+  <script type="module" src="web-component-example.js"></script>
   <script type="module" src="dynamic-examples.js"></script>
 </html>
diff --git a/examples/html/package-lock.json b/examples/html/package-lock.json
diff --git a/examples/html/web-component-example.js b/examples/html/web-component-example.js
@@ -0,0 +1,69 @@
+/**
+ * Copyright 2020 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.
+ */
+
+import GooglePayButton from './node_modules/@google-pay/button-element/dist/index.js';
+
+class MyWebComponent extends HTMLElement {
+  constructor() {
+    super();
+
+    const shadow = this.attachShadow({ mode: 'open' });
+    const button = new GooglePayButton();
+    button.environment = 'TEST';
+    button.paymentRequest = {
+      apiVersion: 2,
+      apiVersionMinor: 0,
+      allowedPaymentMethods: [
+        {
+          type: 'CARD',
+          parameters: {
+            allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
+            allowedCardNetworks: ['MASTERCARD', 'VISA'],
+            billingAddressParameters: {
+              format: 'MIN',
+            },
+          },
+          tokenizationSpecification: {
+            type: 'PAYMENT_GATEWAY',
+            parameters: {
+              gateway: 'example',
+              gatewayMerchantId: 'exampleGatewayMerchantId',
+            },
+          },
+        },
+      ],
+      merchantInfo: {
+        merchantId: '12345678901234567890',
+        merchantName: 'Demo Merchant',
+      },
+      transactionInfo: {
+        totalPriceStatus: 'FINAL',
+        totalPriceLabel: 'Total',
+        totalPrice: '100.00',
+        currencyCode: 'USD',
+        countryCode: 'US',
+      },
+    };
+    button.onLoadPaymentData = this.onLoadPaymentData;
+    shadow.appendChild(button);
+  }
+
+  onLoadPaymentData(paymentData) {
+    console.log('load payment data', paymentData);
+  }
+}
+
+customElements.define('my-web-component', MyWebComponent);
diff --git a/examples/react/package-lock.json b/examples/react/package-lock.json
diff --git a/examples/svelte/package-lock.json b/examples/svelte/package-lock.json
diff --git a/examples/vue/package-lock.json b/examples/vue/package-lock.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
   "author": "socsieng@google.com",
   "license": "Apache-2.0",
   "dependencies": {
-    "@types/googlepay": "^0.5.0"
+    "@types/googlepay": "^0.5.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.0.0",

diff --git a/src/button-element/package-template.json b/src/button-element/package-template.json
@@ -16,7 +16,7 @@
   "author": "socsieng@google.com",
   "license": "Apache-2.0",
   "dependencies": {
-    "@types/googlepay": "^0.5.0"
+    "@types/googlepay": "^0.5.1"
   },
   "files": ["dist/*", "package.json", "README.md", "LICENSE"],
   "keywords": ["googlepay", "google-pay", "button", "custom-element", "web-component"]

diff --git a/src/button-react/package-template.json b/src/button-react/package-template.json
@@ -16,7 +16,7 @@
   "author": "socsieng@google.com",
   "license": "Apache-2.0",
   "dependencies": {
-    "@types/googlepay": "^0.5.0"
+    "@types/googlepay": "^0.5.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.0.0",

diff --git a/src/lib/button-manager.ts b/src/lib/button-manager.ts
@@ -217,15 +217,20 @@ export class ButtonManager {
 
     this.client = new google.payments.api.PaymentsClient(this.createClientOptions(this.config));
 
-    // pre-create button
-    const button = this.client.createButton({
+    const buttonOptions: google.payments.api.ButtonOptions = {
       buttonType: this.config.buttonType,
       buttonColor: this.config.buttonColor,
       buttonSizeMode: this.config.buttonSizeMode,
       onClick: this.handleClick,
-    });
+    };
 
-    this.copyGPayStyles();
+    const rootNode = this.element?.getRootNode();
+    if (rootNode instanceof ShadowRoot) {
+      buttonOptions.buttonRootNode = rootNode;
+    }
+
+    // pre-create button
+    const button = this.client.createButton(buttonOptions);
 
     this.setClassName(element, [element.className, 'not-ready']);
     element.appendChild(button);
@@ -346,35 +351,6 @@ export class ButtonManager {
     }
   }
 
-  // TODO(socsieng): #19 remove shadow DOM workaround when fixed in pay.js
-  /**
-   * workaround to get css styles into component
-   */
-  private copyGPayStyles(): void {
-    const node = this.element?.getRootNode();
-
-    if (node && node instanceof ShadowRoot) {
-      const styles = document.querySelectorAll('head > style');
-      const gPayStyles = Array.from(styles).filter(s => s.innerHTML.indexOf('.gpay-') !== -1);
-      const existingStyles = new Set(
-        Array.from(node.childNodes)
-          .filter(n => n instanceof HTMLElement && n.nodeName === 'STYLE' && n.id)
-          .map(n => (n as HTMLElement).id),
-      );
-
-      let index = 0;
-      for (const style of gPayStyles) {
-        index++;
-        const id = `google-pay-button-style-${index}`;
-        if (!existingStyles.has(id)) {
-          const styleElement = document.createElement('style');
-          styleElement.innerHTML = style.innerHTML;
-          node.appendChild(styleElement);
-        }
-      }
-    }
-  }
-
   private isClientInvalidated(newConfig: Config): boolean {
     if (!this.oldInvalidationValues) return true;