feat: add support for setting buttonLocale

google-pay · Feb 22, 2021 · 00af174 · 00af174
1 parent b62e5a9
commit 00af174
Show file tree

Hide file tree

Showing 27 changed files with 269 additions and 26 deletions.
diff --git a/examples/angular/src/app/app.component.html b/examples/angular/src/app/app.component.html
@@ -47,6 +47,43 @@
         <option value="short">short</option>
       </select>
     </label>
+    <label>
+      <span>Button locale:</span>
+      <select [(ngModel)]="buttonLocale">
+        <option value="" selected>-</option>
+        <option value="ar">Arabic</option>
+        <option value="bg">Bulgarian</option>
+        <option value="ca">Catalan</option>
+        <option value="zh">Chinese</option>
+        <option value="hr">Croatian</option>
+        <option value="cs">Czech</option>
+        <option value="da">Danish</option>
+        <option value="nl">Dutch</option>
+        <option value="en">English</option>
+        <option value="et">Estonian</option>
+        <option value="fi">Finnish</option>
+        <option value="fr">French</option>
+        <option value="de">German</option>
+        <option value="el">Greek</option>
+        <option value="id">Indonesian</option>
+        <option value="it">Italian</option>
+        <option value="ja">Japanese</option>
+        <option value="ko">Korean</option>
+        <option value="ms">Malay</option>
+        <option value="no">Norwegian</option>
+        <option value="pl">Polish</option>
+        <option value="pt">Portuguese</option>
+        <option value="ru">Russian</option>
+        <option value="sr">Serbian</option>
+        <option value="sk">Slovak</option>
+        <option value="sl">Slovenian</option>
+        <option value="es">Spanish</option>
+        <option value="sv">Swedish</option>
+        <option value="th">Thai</option>
+        <option value="tr">Turkish</option>
+        <option value="uk">Ukrainian</option>
+      </select>
+    </label>
   </div>
 
   <div class="examples">
@@ -57,6 +94,7 @@
           environment="TEST"
           [buttonType]="buttonType"
           [buttonColor]="buttonColor"
+          [buttonLocale]="buttonLocale"
           [existingPaymentMethodRequired]="existingPaymentMethodRequired"
           [paymentRequest]="{
             apiVersion: paymentRequest.apiVersion,
@@ -83,6 +121,7 @@
           environment="TEST"
           [buttonType]="buttonType"
           [buttonColor]="buttonColor"
+          [buttonLocale]="buttonLocale"
           [existingPaymentMethodRequired]="existingPaymentMethodRequired"
           [paymentRequest]="{
             apiVersion: paymentRequest.apiVersion,
@@ -111,6 +150,7 @@
           environment="TEST"
           [buttonType]="buttonType"
           [buttonColor]="buttonColor"
+          [buttonLocale]="buttonLocale"
           [existingPaymentMethodRequired]="existingPaymentMethodRequired"
           [paymentRequest]="{
             apiVersion: paymentRequest.apiVersion,
@@ -154,6 +194,7 @@
           environment="TEST"
           [buttonType]="buttonType"
           [buttonColor]="buttonColor"
+          [buttonLocale]="buttonLocale"
           [existingPaymentMethodRequired]="existingPaymentMethodRequired"
           [paymentRequest]="{
             apiVersion: paymentRequest.apiVersion,

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';
+  buttonLocale = '';
   existingPaymentMethodRequired = false;
 
   paymentRequest = {

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'),
+  buttonLocale: new ControlAccessor('button-locale'),
 };
 
 const defaultPaymentRequest = {
@@ -90,6 +91,7 @@ const googlePayButtons = [
       return {
         buttonColor: controls.buttonColor.value,
         buttonType: controls.buttonType.value,
+        buttonLocale: controls.buttonLocale.value,
         paymentRequest: {
           ...defaultPaymentRequest,
           transactionInfo: {
@@ -108,6 +110,7 @@ const googlePayButtons = [
       return {
         buttonColor: controls.buttonColor.value,
         buttonType: controls.buttonType.value,
+        buttonLocale: controls.buttonLocale.value,
         paymentRequest: {
           ...defaultPaymentRequest,
           allowedPaymentMethods: [
@@ -144,6 +147,7 @@ const googlePayButtons = [
       return {
         buttonColor: controls.buttonColor.value,
         buttonType: controls.buttonType.value,
+        buttonLocale: controls.buttonLocale.value,
         paymentRequest: {
           ...defaultPaymentRequest,
           transactionInfo: {
@@ -164,6 +168,7 @@ const googlePayButtons = [
       return {
         buttonColor: controls.buttonColor.value,
         buttonType: controls.buttonType.value,
+        buttonLocale: controls.buttonLocale.value,
         paymentRequest: {
           ...defaultPaymentRequest,
           transactionInfo: {
@@ -185,6 +190,7 @@ const googlePayButtons = [
       return {
         buttonColor: controls.buttonColor.value,
         buttonType: controls.buttonType.value,
+        buttonLocale: controls.buttonLocale.value,
         buttonSizeMode: 'fill',
         paymentRequest: {
           ...defaultPaymentRequest,

diff --git a/examples/html/index.html b/examples/html/index.html
@@ -54,13 +54,50 @@
           <option value="short">short</option>
         </select>
       </label>
+      <label>
+        <span>Button locale:</span>
+        <select id="button-locale">
+          <option value="" selected>-</option>
+          <option value="ar">Arabic</option>
+          <option value="bg">Bulgarian</option>
+          <option value="ca">Catalan</option>
+          <option value="zh">Chinese</option>
+          <option value="hr">Croatian</option>
+          <option value="cs">Czech</option>
+          <option value="da">Danish</option>
+          <option value="nl">Dutch</option>
+          <option value="en">English</option>
+          <option value="et">Estonian</option>
+          <option value="fi">Finnish</option>
+          <option value="fr">French</option>
+          <option value="de">German</option>
+          <option value="el">Greek</option>
+          <option value="id">Indonesian</option>
+          <option value="it">Italian</option>
+          <option value="ja">Japanese</option>
+          <option value="ko">Korean</option>
+          <option value="ms">Malay</option>
+          <option value="no">Norwegian</option>
+          <option value="pl">Polish</option>
+          <option value="pt">Portuguese</option>
+          <option value="ru">Russian</option>
+          <option value="sr">Serbian</option>
+          <option value="sk">Slovak</option>
+          <option value="sl">Slovenian</option>
+          <option value="es">Spanish</option>
+          <option value="sv">Swedish</option>
+          <option value="th">Thai</option>
+          <option value="tr">Turkish</option>
+          <option value="uk">Ukrainian</option>
+        </select>
+      </label>
     </div>
 
     <div id="examples" class="examples">
       <div class="example">
         <div class="title">Static Example</div>
         <div class="demo">
-          <google-pay-button id="static" environment="TEST" button-type="plain" button-color="black">
+          <google-pay-button id="static" environment="TEST" button-type="plain" button-color="black" button-locale="fr">
           </google-pay-button>
         </div>
       </div>

diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
@@ -37,62 +37,88 @@ const App: React.FC = () => {
   const [existingPaymentMethodRequired, setExistingPaymentMethodRequired] = useState(false);
   const [buttonColor, setButtonColor] = useState('default');
   const [buttonType, setButtonType] = useState('buy');
-
-  function handleAmountChange(event: any) {
-    setAmount(event.target.value);
-  }
-
-  function handleExistingPaymentMethodRequired(event: any) {
-    setExistingPaymentMethodRequired(event.target.value === 'yes');
-  }
-
-  function handleColorChange(event: any) {
-    setButtonColor(event.target.value);
-  }
-
-  function handleTypeChange(event: any) {
-    setButtonType(event.target.value);
-  }
+  const [buttonLocale, setButtonLocale] = useState('');
 
   const props = {
     amount,
     existingPaymentMethodRequired,
-    buttonColor: buttonColor,
-    buttonType: buttonType,
+    buttonColor,
+    buttonType,
+    buttonLocale,
   };
 
   return (
     <div className="App">
       <div className="params">
         <label>
           <span>Default amount:</span>
-          <input type="text" defaultValue={amount} onBlur={handleAmountChange} />
+          <input type="text" defaultValue={amount} onBlur={event => setAmount(event.target.value)} />
         </label>
         <label>
           <span>Payment method required:</span>
-          <select onChange={handleExistingPaymentMethodRequired} value={existingPaymentMethodRequired ? 'yes' : 'no'}>
+          <select
+            onChange={event => setExistingPaymentMethodRequired(event.target.value === 'yes')}
+            value={existingPaymentMethodRequired ? 'yes' : 'no'}
+          >
             <option value="no">No</option>
             <option value="yes">Yes</option>
           </select>
         </label>
         <label>
           <span>Button color:</span>
-          <select onChange={handleColorChange} value={buttonColor}>
+          <select onChange={event => setButtonColor(event.target.value)} value={buttonColor}>
             <option value="default">default</option>
             <option value="black">black</option>
             <option value="white">white</option>
           </select>
         </label>
         <label>
           <span>Button type:</span>
-          <select onChange={handleTypeChange} value={buttonType}>
+          <select onChange={event => setButtonType(event.target.value)} value={buttonType}>
             <option value="buy">buy</option>
             <option value="plain">plain</option>
             <option value="donate">donate</option>
             <option value="long">long</option>
             <option value="short">short</option>
           </select>
         </label>
+        <label>
+          <span>Button locale:</span>
+          <select onChange={event => setButtonLocale(event.target.value)} value={buttonLocale}>
+            <option value="">-</option>
+            <option value="ar">Arabic</option>
+            <option value="bg">Bulgarian</option>
+            <option value="ca">Catalan</option>
+            <option value="zh">Chinese</option>
+            <option value="hr">Croatian</option>
+            <option value="cs">Czech</option>
+            <option value="da">Danish</option>
+            <option value="nl">Dutch</option>
+            <option value="en">English</option>
+            <option value="et">Estonian</option>
+            <option value="fi">Finnish</option>
+            <option value="fr">French</option>
+            <option value="de">German</option>
+            <option value="el">Greek</option>
+            <option value="id">Indonesian</option>
+            <option value="it">Italian</option>
+            <option value="ja">Japanese</option>
+            <option value="ko">Korean</option>
+            <option value="ms">Malay</option>
+            <option value="no">Norwegian</option>
+            <option value="pl">Polish</option>
+            <option value="pt">Portuguese</option>
+            <option value="ru">Russian</option>
+            <option value="sr">Serbian</option>
+            <option value="sk">Slovak</option>
+            <option value="sl">Slovenian</option>
+            <option value="es">Spanish</option>
+            <option value="sv">Swedish</option>
+            <option value="th">Thai</option>
+            <option value="tr">Turkish</option>
+            <option value="uk">Ukrainian</option>
+          </select>
+        </label>
       </div>
       <BasicExample {...props} />
       <DirectIntegrationExample {...props} />

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}
+        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}
+        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}
+        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}
+        buttonLocale={props.buttonLocale}
       />
       <div
         style={{

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}
+        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}
+        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}
+        buttonLocale={props.buttonLocale}
       />
     </Example>
   );

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

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

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

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

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

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