Updated examples to make use of the buttonRadius property

google-pay · Mar 28, 2024 · 145682b · 145682b
1 parent 66b0dee
commit 145682b
Show file tree

Hide file tree

Showing 29 changed files with 113 additions and 35 deletions.
diff --git a/examples/angular/package-lock.json b/examples/angular/package-lock.json
diff --git a/examples/angular/package.json b/examples/angular/package.json
@@ -19,7 +19,7 @@
     "@angular/platform-browser": "^15.0.2",
     "@angular/platform-browser-dynamic": "^15.2.9",
     "@angular/router": "^15.2.9",
-    "@google-pay/button-angular": "^3.0.10",
+    "@google-pay/button-angular": "^3.1.0",
     "@types/googlepay": "^0.7.0",
     "rxjs": "~6.6.3",
     "tslib": "^2.6.1",

diff --git a/examples/angular/src/app/app.component.html b/examples/angular/src/app/app.component.html
@@ -50,6 +50,10 @@
         <option value="subscribe">subscribe</option>
       </select>
     </label>
+    <label>
+      <span>Button radius:</span>
+      <input type="text" inputmode="numeric" pattern="[0-9]*" [(ngModel)]="buttonRadius" />
+    </label>
     <label>
       <span>Button locale:</span>
       <select [(ngModel)]="buttonLocale">
@@ -97,6 +101,7 @@
           environment="TEST"
           [buttonType]="buttonType"
           [buttonColor]="buttonColor"
+          [buttonRadius]="buttonRadius"
           [buttonLocale]="buttonLocale"
           [existingPaymentMethodRequired]="existingPaymentMethodRequired"
           [paymentRequest]="{
@@ -124,6 +129,7 @@
           environment="TEST"
           [buttonType]="buttonType"
           [buttonColor]="buttonColor"
+          [buttonRadius]="buttonRadius"
           [buttonLocale]="buttonLocale"
           [existingPaymentMethodRequired]="existingPaymentMethodRequired"
           [paymentRequest]="{
@@ -153,6 +159,7 @@
           environment="TEST"
           [buttonType]="buttonType"
           [buttonColor]="buttonColor"
+          [buttonRadius]="buttonRadius"
           [buttonLocale]="buttonLocale"
           [existingPaymentMethodRequired]="existingPaymentMethodRequired"
           [paymentRequest]="{
@@ -197,6 +204,7 @@
           environment="TEST"
           [buttonType]="buttonType"
           [buttonColor]="buttonColor"
+          [buttonRadius]="buttonRadius"
           [buttonLocale]="buttonLocale"
           [existingPaymentMethodRequired]="existingPaymentMethodRequired"
           [paymentRequest]="{
@@ -229,6 +237,7 @@
           environment="TEST"
           [buttonType]="buttonType"
           [buttonColor]="buttonColor"
+          [buttonRadius]="buttonRadius"
           [buttonLocale]="buttonLocale"
           [existingPaymentMethodRequired]="existingPaymentMethodRequired"
           [paymentRequest]="{
@@ -252,6 +261,7 @@
           environment="TEST"
           [buttonType]="buttonType"
           [buttonColor]="buttonColor"
+          [buttonRadius]="buttonRadius"
           [buttonLocale]="buttonLocale"
           [existingPaymentMethodRequired]="existingPaymentMethodRequired"
           [paymentRequest]="{

diff --git a/examples/angular/src/app/app.component.ts b/examples/angular/src/app/app.component.ts
@@ -26,6 +26,7 @@ export class AppComponent {
   amount = '100.00';
   buttonType = 'buy';
   buttonColor = 'default';
+  buttonRadius = 4;
   buttonLocale = '';
   existingPaymentMethodRequired = false;
 

diff --git a/examples/html/dynamic-examples.js b/examples/html/dynamic-examples.js
@@ -35,6 +35,7 @@ const controls = {
   existingPaymentRequired: new ControlAccessor('existing-payment-method-required'),
   buttonColor: new ControlAccessor('button-color'),
   buttonType: new ControlAccessor('button-type'),
+  buttonRadius: new ControlAccessor('button-radius'),
   buttonLocale: new ControlAccessor('button-locale'),
 };
 
@@ -95,6 +96,7 @@ const googlePayButtons = [
       return {
         buttonColor: controls.buttonColor.value,
         buttonType: controls.buttonType.value,
+        buttonRadius: controls.buttonRadius.value,
         buttonLocale: controls.buttonLocale.value,
         paymentRequest: {
           ...defaultPaymentRequest,
@@ -114,6 +116,7 @@ const googlePayButtons = [
       return {
         buttonColor: controls.buttonColor.value,
         buttonType: controls.buttonType.value,
+        buttonRadius: controls.buttonRadius.value,
         buttonLocale: controls.buttonLocale.value,
         paymentRequest: {
           ...defaultPaymentRequest,
@@ -151,6 +154,7 @@ const googlePayButtons = [
       return {
         buttonColor: controls.buttonColor.value,
         buttonType: controls.buttonType.value,
+        buttonRadius: controls.buttonRadius.value,
         buttonLocale: controls.buttonLocale.value,
         paymentRequest: {
           ...defaultPaymentRequest,
@@ -172,6 +176,7 @@ const googlePayButtons = [
       return {
         buttonColor: controls.buttonColor.value,
         buttonType: controls.buttonType.value,
+        buttonRadius: controls.buttonRadius.value,
         buttonLocale: controls.buttonLocale.value,
         paymentRequest: {
           ...defaultPaymentRequest,
@@ -194,6 +199,7 @@ const googlePayButtons = [
       return {
         buttonColor: controls.buttonColor.value,
         buttonType: controls.buttonType.value,
+        buttonRadius: controls.buttonRadius.value,
         buttonLocale: controls.buttonLocale.value,
         paymentRequest: {
           ...defaultPaymentRequest,
@@ -246,6 +252,7 @@ const googlePayButtons = [
       return {
         buttonColor: controls.buttonColor.value,
         buttonType: controls.buttonType.value,
+        buttonRadius: controls.buttonRadius.value,
         buttonLocale: controls.buttonLocale.value,
         buttonSizeMode: 'fill',
         paymentRequest: {
@@ -266,6 +273,7 @@ const googlePayButtons = [
       return {
         buttonColor: controls.buttonColor.value,
         buttonType: controls.buttonType.value,
+        buttonRadius: controls.buttonRadius.value,
         buttonLocale: controls.buttonLocale.value,
         paymentRequest: {
           ...defaultPaymentRequest,
@@ -288,6 +296,7 @@ const googlePayButtons = [
       return {
         buttonColor: controls.buttonColor.value,
         buttonType: controls.buttonType.value,
+        buttonRadius: controls.buttonRadius.value,
         buttonLocale: controls.buttonLocale.value,
         paymentRequest: {
           ...defaultPaymentRequest,

diff --git a/examples/html/index.html b/examples/html/index.html
@@ -57,6 +57,10 @@
           <option value="subscribe">subscribe</option>
         </select>
       </label>
+      <label>
+        <span>Button radius:</span>
+        <input type="text" inputmode="numeric" pattern="[0-9]*" id="button-radius" value="4" />
+      </label>
       <label>
         <span>Button locale:</span>
         <select id="button-locale">
@@ -98,7 +102,7 @@
 
     <div id="examples" class="examples">
       <div class="example">
-        <div class="title">Static Example</div>
+        <div class="title">Plain Example</div>
         <div class="demo">
           <google-pay-button id="static" environment="TEST" button-type="plain" button-color="black" button-locale="fr">
           </google-pay-button>

diff --git a/examples/react/package-lock.json b/examples/react/package-lock.json
diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
@@ -40,13 +40,15 @@ 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 = {
     amount,
     existingPaymentMethodRequired,
     buttonColor,
     buttonType,
+    buttonRadius,
     buttonLocale,
   };
 
@@ -88,6 +90,16 @@ const App: React.FC = () => {
             <option value="subscribe">subscribe</option>
           </select>
         </label>
+        <label>
+          <span>Button radius:</span>
+          <input
+            type="text"
+            inputMode="numeric"
+            pattern="[0-9]*"
+            defaultValue={buttonRadius}
+            onBlur={event => setButtonRadius(event.target.value)}
+          />
+        </label>
         <label>
           <span>Button locale:</span>
           <select onChange={event => setButtonLocale(event.target.value)} value={buttonLocale}>

diff --git a/examples/react/src/examples/AmexExample.tsx b/examples/react/src/examples/AmexExample.tsx
@@ -60,6 +60,7 @@ export default function AmexExample(props: any): React.ReactElement {
         existingPaymentMethodRequired={props.existingPaymentMethodRequired}
         buttonColor={props.buttonColor}
         buttonType={props.buttonType}
+        buttonRadius={props.buttonRadius}
         buttonLocale={props.buttonLocale}
       />
     </Example>

diff --git a/examples/react/src/examples/BasicExample.tsx b/examples/react/src/examples/BasicExample.tsx
@@ -60,6 +60,7 @@ export default function BasicExample(props: any): React.ReactElement {
         existingPaymentMethodRequired={props.existingPaymentMethodRequired}
         buttonColor={props.buttonColor}
         buttonType={props.buttonType}
+        buttonRadius={props.buttonRadius}
         buttonLocale={props.buttonLocale}
       />
       <GooglePayButton
@@ -101,6 +102,7 @@ export default function BasicExample(props: any): React.ReactElement {
         existingPaymentMethodRequired={props.existingPaymentMethodRequired}
         buttonColor={props.buttonColor}
         buttonType={props.buttonType}
+        buttonRadius={props.buttonRadius}
         buttonLocale={props.buttonLocale}
       />
     </Example>

diff --git a/examples/react/src/examples/ButtonSizeExample.tsx b/examples/react/src/examples/ButtonSizeExample.tsx
@@ -60,6 +60,7 @@ export default function ButtonSizeExample(props: any): React.ReactElement {
         existingPaymentMethodRequired={props.existingPaymentMethodRequired}
         buttonColor={props.buttonColor}
         buttonType={props.buttonType}
+        buttonRadius={props.buttonRadius}
         buttonLocale={props.buttonLocale}
         style={{ width: 400, height: 60 }}
         buttonSizeMode="fill"

diff --git a/examples/react/src/examples/CryptogramExample.tsx b/examples/react/src/examples/CryptogramExample.tsx
@@ -69,6 +69,7 @@ export default function CryptogramExample(props: any): React.ReactElement {
         }}
         buttonColor={props.buttonColor}
         buttonType={props.buttonType}
+        buttonRadius={props.buttonRadius}
         buttonLocale={props.buttonLocale}
       />
       <div

diff --git a/examples/react/src/examples/DirectIntegrationExample.tsx b/examples/react/src/examples/DirectIntegrationExample.tsx
@@ -60,6 +60,7 @@ export default function DirectIntegrationExample(props: any): React.ReactElement
         existingPaymentMethodRequired={props.existingPaymentMethodRequired}
         buttonColor={props.buttonColor}
         buttonType={props.buttonType}
+        buttonRadius={props.buttonRadius}
         buttonLocale={props.buttonLocale}
       />
     </Example>

diff --git a/examples/react/src/examples/DisplayItemsExample.tsx b/examples/react/src/examples/DisplayItemsExample.tsx
@@ -82,6 +82,7 @@ export default function DisplayItemsExample(props: any): React.ReactElement {
         existingPaymentMethodRequired={props.existingPaymentMethodRequired}
         buttonColor={props.buttonColor}
         buttonType={props.buttonType}
+        buttonRadius={props.buttonRadius}
         buttonLocale={props.buttonLocale}
       />
     </Example>

diff --git a/examples/react/src/examples/DynamicPriceUpdateExample.tsx b/examples/react/src/examples/DynamicPriceUpdateExample.tsx
@@ -127,6 +127,7 @@ export default function DynamicPriceUpdateExample(props: any): React.ReactElemen
         existingPaymentMethodRequired={props.existingPaymentMethodRequired}
         buttonColor={props.buttonColor}
         buttonType={props.buttonType}
+        buttonRadius={props.buttonRadius}
         buttonLocale={props.buttonLocale}
       />
     </Example>