-
Static Example
+
Plain Example
diff --git a/examples/react/package-lock.json b/examples/react/package-lock.json
index 1d1ee97..6d2c1e6 100644
--- a/examples/react/package-lock.json
+++ b/examples/react/package-lock.json
@@ -20,7 +20,6 @@
}
},
"../../src/button-react": {
- "name": "@google-pay/button-react",
"version": "3.0.10",
"license": "Apache-2.0",
"dependencies": {
@@ -3170,9 +3169,9 @@
"integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
},
"node_modules/@rushstack/eslint-patch": {
- "version": "1.8.0",
- "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.8.0.tgz",
- "integrity": "sha512-0HejFckBN2W+ucM6cUOlwsByTKt9/+0tWhqUffNIcHqCXkthY/mZ7AuYPK/2IIaGWhdl0h+tICDO0ssLMd6XMQ=="
+ "version": "1.9.0",
+ "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.9.0.tgz",
+ "integrity": "sha512-AAWymnpvHbGty1BmgbdfbqQDboXs6xN6h2yAacO4yKVyyUUBnpYkp+P9jjPrV9zrAGw7JVVriRtGOHPInnfjZQ=="
},
"node_modules/@sinclair/typebox": {
"version": "0.24.51",
@@ -3670,11 +3669,11 @@
}
},
"node_modules/@types/react-dom": {
- "version": "16.9.4",
- "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.4.tgz",
- "integrity": "sha512-fya9xteU/n90tda0s+FtN5Ym4tbgxpq/hb/Af24dvs6uYnYn+fspaxw5USlw0R8apDNwxsqumdRoCoKitckQqw==",
+ "version": "16.9.24",
+ "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.24.tgz",
+ "integrity": "sha512-Gcmq2JTDheyWn/1eteqyzzWKSqDjYU6KYsIvH7thb7CR5OYInAWOX+7WnKf6PaU/cbdOc4szJItcDEJO7UGmfA==",
"dependencies": {
- "@types/react": "*"
+ "@types/react": "^16"
}
},
"node_modules/@types/resolve": {
@@ -6427,9 +6426,9 @@
}
},
"node_modules/electron-to-chromium": {
- "version": "1.4.717",
- "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.717.tgz",
- "integrity": "sha512-6Fmg8QkkumNOwuZ/5mIbMU9WI3H2fmn5ajcVya64I5Yr5CcNmO7vcLt0Y7c96DCiMO5/9G+4sI2r6eEvdg1F7A=="
+ "version": "1.4.719",
+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.719.tgz",
+ "integrity": "sha512-FbWy2Q2YgdFzkFUW/W5jBjE9dj+804+98E4Pup78JBPnbdb3pv6IneY2JCPKdeKLh3AOKHQeYf+KwLr7mxGh6Q=="
},
"node_modules/emittery": {
"version": "0.8.1",
@@ -11128,11 +11127,11 @@
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
},
"node_modules/path-scurry": {
- "version": "1.10.1",
- "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz",
- "integrity": "sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==",
+ "version": "1.10.2",
+ "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.2.tgz",
+ "integrity": "sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==",
"dependencies": {
- "lru-cache": "^9.1.1 || ^10.0.0",
+ "lru-cache": "^10.2.0",
"minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
},
"engines": {
@@ -14490,9 +14489,9 @@
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
},
"node_modules/tailwindcss": {
- "version": "3.4.1",
- "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
- "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==",
+ "version": "3.4.3",
+ "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
+ "integrity": "sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==",
"dependencies": {
"@alloc/quick-lru": "^5.2.0",
"arg": "^5.0.2",
@@ -14502,7 +14501,7 @@
"fast-glob": "^3.3.0",
"glob-parent": "^6.0.2",
"is-glob": "^4.0.3",
- "jiti": "^1.19.1",
+ "jiti": "^1.21.0",
"lilconfig": "^2.1.0",
"micromatch": "^4.0.5",
"normalize-path": "^3.0.0",
diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
index 9c23324..bbbb073 100644
--- a/examples/react/src/App.tsx
+++ b/examples/react/src/App.tsx
@@ -40,6 +40,7 @@ const App: React.FC = () => {
const [existingPaymentMethodRequired, setExistingPaymentMethodRequired] = useState(false);
const [buttonColor, setButtonColor] = useState('default');
const [buttonType, setButtonType] = useState('buy');
+ const [buttonRadius, setButtonRadius] = useState('4');
const [buttonLocale, setButtonLocale] = useState('');
const props = {
@@ -47,6 +48,7 @@ const App: React.FC = () => {
existingPaymentMethodRequired,
buttonColor,
buttonType,
+ buttonRadius,
buttonLocale,
};
@@ -88,6 +90,16 @@ const App: React.FC = () => {
+
+
@@ -260,6 +265,7 @@
environment="TEST"
button-type={buttonType}
button-color={buttonColor}
+ button-radius={buttonRadius}
{existingPaymentMethodRequired}
paymentRequest={paymentRequests.basic}
on:loadpaymentdata={onLoadPaymentData}
@@ -273,6 +279,7 @@
environment="TEST"
button-type={buttonType}
button-color={buttonColor}
+ button-radius={buttonRadius}
{existingPaymentMethodRequired}
paymentRequest={paymentRequests.mastercard}
on:loadpaymentdata={onLoadPaymentData}
@@ -286,6 +293,7 @@
environment="TEST"
button-type={buttonType}
button-color={buttonColor}
+ button-radius={buttonRadius}
{existingPaymentMethodRequired}
paymentRequest={paymentRequests.visa}
on:loadpaymentdata={onLoadPaymentData}
@@ -299,6 +307,7 @@
environment="TEST"
button-type={buttonType}
button-color={buttonColor}
+ button-radius={buttonRadius}
{existingPaymentMethodRequired}
paymentRequest={paymentRequests.authorize}
on:loadpaymentdata={onLoadPaymentData}
@@ -313,6 +322,7 @@
environment="TEST"
button-type={buttonType}
button-color={buttonColor}
+ button-radius={buttonRadius}
{existingPaymentMethodRequired}
paymentRequest={paymentRequests.cryptogram}
on:loadpaymentdata={onLoadPaymentData}
@@ -327,6 +337,7 @@
environment="TEST"
button-type={buttonType}
button-color={buttonColor}
+ button-radius={buttonRadius}
{existingPaymentMethodRequired}
paymentRequest={paymentRequests.shipping}
on:loadpaymentdata={onLoadPaymentData}
@@ -342,6 +353,7 @@
environment="TEST"
button-type={buttonType}
button-color={buttonColor}
+ button-radius={buttonRadius}
{existingPaymentMethodRequired}
paymentRequest={paymentRequests.basic}
clickCallback={onClick}
@@ -351,6 +363,7 @@
environment="TEST"
button-type={buttonType}
button-color={buttonColor}
+ button-radius={buttonRadius}
{existingPaymentMethodRequired}
paymentRequest={paymentRequests.basic}
clickCallback={onClickPreventDefault}
diff --git a/examples/vue/package-lock.json b/examples/vue/package-lock.json
index 16e862d..73b26a9 100644
--- a/examples/vue/package-lock.json
+++ b/examples/vue/package-lock.json
@@ -22,7 +22,6 @@
}
},
"../../src/button-element": {
- "name": "@google-pay/button-element",
"version": "3.0.10",
"license": "Apache-2.0",
"dependencies": {
@@ -5222,9 +5221,9 @@
"dev": true
},
"node_modules/electron-to-chromium": {
- "version": "1.4.717",
- "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.717.tgz",
- "integrity": "sha512-6Fmg8QkkumNOwuZ/5mIbMU9WI3H2fmn5ajcVya64I5Yr5CcNmO7vcLt0Y7c96DCiMO5/9G+4sI2r6eEvdg1F7A==",
+ "version": "1.4.719",
+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.719.tgz",
+ "integrity": "sha512-FbWy2Q2YgdFzkFUW/W5jBjE9dj+804+98E4Pup78JBPnbdb3pv6IneY2JCPKdeKLh3AOKHQeYf+KwLr7mxGh6Q==",
"dev": true
},
"node_modules/emoji-regex": {
diff --git a/examples/vue/src/components/Examples.vue b/examples/vue/src/components/Examples.vue
index 030df32..ced6444 100644
--- a/examples/vue/src/components/Examples.vue
+++ b/examples/vue/src/components/Examples.vue
@@ -49,6 +49,10 @@
+
@@ -59,6 +63,7 @@
environment="TEST"
v-bind:button-type="buttonType"
v-bind:button-color="buttonColor"
+ v-bind:button-radius="buttonRadius"
v-bind:existing-payment-method-required="existingPaymentMethodRequired"
v-bind:paymentRequest.prop="{
apiVersion: paymentRequest.apiVersion,
@@ -85,6 +90,7 @@
environment="TEST"
v-bind:button-type="buttonType"
v-bind:button-color="buttonColor"
+ v-bind:button-radius="buttonRadius"
v-bind:existing-payment-method-required="existingPaymentMethodRequired"
v-bind:paymentRequest.prop="{
apiVersion: paymentRequest.apiVersion,
@@ -112,6 +118,7 @@
environment="TEST"
v-bind:button-type="buttonType"
v-bind:button-color="buttonColor"
+ v-bind:button-radius="buttonRadius"
v-bind:existing-payment-method-required="existingPaymentMethodRequired"
v-bind:paymentRequest.prop="{
apiVersion: paymentRequest.apiVersion,
@@ -155,6 +162,7 @@
environment="TEST"
v-bind:button-type="buttonType"
v-bind:button-color="buttonColor"
+ v-bind:button-radius="buttonRadius"
v-bind:existing-payment-method-required="existingPaymentMethodRequired"
v-bind:paymentRequest.prop="{
apiVersion: paymentRequest.apiVersion,
@@ -185,6 +193,7 @@
environment="TEST"
v-bind:button-type="buttonType"
v-bind:button-color="buttonColor"
+ v-bind:button-radius="buttonRadius"
v-bind:existing-payment-method-required="existingPaymentMethodRequired"
v-bind:paymentRequest.prop="{
apiVersion: paymentRequest.apiVersion,
@@ -207,6 +216,7 @@
environment="TEST"
v-bind:button-type="buttonType"
v-bind:button-color="buttonColor"
+ v-bind:button-radius="buttonRadius"
v-bind:existing-payment-method-required="existingPaymentMethodRequired"
v-bind:paymentRequest.prop="{
apiVersion: paymentRequest.apiVersion,
@@ -242,6 +252,7 @@ export default {
existingPaymentMethodRequired: false,
buttonColor: 'default',
buttonType: 'buy',
+ buttonRadius: '4',
paymentRequest: {
apiVersion: 2,
apiVersionMinor: 0,