From 24adf2a484d962d68d28819bc3962ddc928aecb3 Mon Sep 17 00:00:00 2001 From: Soc Sieng Date: Fri, 30 Oct 2020 17:48:29 -0700 Subject: [PATCH] fix: remove shadow DOM workaround Fixes #19 --- examples/angular/package-lock.json | 2 +- examples/html/app.css | 5 ++ examples/html/basic-example.js | 4 ++ examples/html/index.html | 9 ++++ examples/html/package-lock.json | 2 +- examples/html/web-component-example.js | 69 ++++++++++++++++++++++++ examples/react/package-lock.json | 2 +- examples/svelte/package-lock.json | 2 +- examples/vue/package-lock.json | 2 +- package-lock.json | 6 +-- package.json | 2 +- src/button-element/package-template.json | 2 +- src/button-react/package-template.json | 2 +- src/lib/button-manager.ts | 42 ++++----------- 14 files changed, 107 insertions(+), 44 deletions(-) create mode 100644 examples/html/web-component-example.js diff --git a/examples/angular/package-lock.json b/examples/angular/package-lock.json index de2f542..5dd4ac4 100644 --- a/examples/angular/package-lock.json +++ b/examples/angular/package-lock.json @@ -1719,7 +1719,7 @@ "@google-pay/button-element": { "version": "file:../../src/button-element", "requires": { - "@types/googlepay": "^0.5.0" + "@types/googlepay": "^0.5.1" }, "dependencies": { "@types/googlepay": { diff --git a/examples/html/app.css b/examples/html/app.css index 51611cc..ae866a6 100644 --- 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 index 2e1c5f6..847ef64 100644 --- 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 index 1173949..ea06979 100644 --- a/examples/html/index.html +++ b/examples/html/index.html @@ -22,6 +22,7 @@ Google Pay Example +
+
+
WebComponent Example
+
+ + +
+
+ diff --git a/examples/html/package-lock.json b/examples/html/package-lock.json index 6819aae..6cedda9 100644 --- a/examples/html/package-lock.json +++ b/examples/html/package-lock.json @@ -7,7 +7,7 @@ "@google-pay/button-element": { "version": "file:../../src/button-element", "requires": { - "@types/googlepay": "^0.4.0" + "@types/googlepay": "^0.5.1" }, "dependencies": { "@types/googlepay": { diff --git a/examples/html/web-component-example.js b/examples/html/web-component-example.js new file mode 100644 index 0000000..6500110 --- /dev/null +++ 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 index 891c345..b198819 100644 --- a/examples/react/package-lock.json +++ b/examples/react/package-lock.json @@ -1150,7 +1150,7 @@ "@google-pay/button-react": { "version": "file:../../src/button-react", "requires": { - "@types/googlepay": "^0.5.0" + "@types/googlepay": "^0.5.1" }, "dependencies": { "@types/googlepay": { diff --git a/examples/svelte/package-lock.json b/examples/svelte/package-lock.json index 78c0c30..14d904b 100644 --- a/examples/svelte/package-lock.json +++ b/examples/svelte/package-lock.json @@ -39,7 +39,7 @@ "@google-pay/button-element": { "version": "file:../../src/button-element", "requires": { - "@types/googlepay": "^0.5.0" + "@types/googlepay": "^0.5.1" }, "dependencies": { "@types/googlepay": { diff --git a/examples/vue/package-lock.json b/examples/vue/package-lock.json index bf52217..270f3a4 100644 --- a/examples/vue/package-lock.json +++ b/examples/vue/package-lock.json @@ -2158,7 +2158,7 @@ "@google-pay/button-element": { "version": "file:../../src/button-element", "requires": { - "@types/googlepay": "^0.5.0" + "@types/googlepay": "^0.5.1" }, "dependencies": { "@types/googlepay": { diff --git a/package-lock.json b/package-lock.json index f4cbfb7..1ca43cd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1381,9 +1381,9 @@ "dev": true }, "@types/googlepay": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/@types/googlepay/-/googlepay-0.5.0.tgz", - "integrity": "sha512-sEYrCj6bKS2KodqVantaV8a84d4VU6ujFPBsdEoC61SYo7nEyHdU+eTGmv7u/L7hMjdiDQ81PNVloE4iWheCcg==" + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/@types/googlepay/-/googlepay-0.5.1.tgz", + "integrity": "sha512-6ONa1lKylL4WQr1t+rdV+QI825ugj/VPWDswq7HkPGsgaORbib++NKOPPdTZcP3AYrI8L/3XwUUCe89yKZ1Wow==" }, "@types/graceful-fs": { "version": "4.1.4", diff --git a/package.json b/package.json index 209ae4a..e03ed95 100644 --- 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 index e0f4ba0..86c4e8b 100644 --- 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 index 22cdab1..47d41a7 100644 --- 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 index fa83d67..548140b 100644 --- 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;