feat!: make environment a required property

Closes #45
google-pay · Sep 10, 2020 · 94e51c0 · 94e51c0
1 parent 0e85f04
commit 94e51c0
Show file tree

Hide file tree

Showing 25 changed files with 57 additions and 8 deletions.
diff --git a/examples/angular/src/app/app.component.html b/examples/angular/src/app/app.component.html
@@ -54,6 +54,7 @@
       <div class="title">Basic Example</div>
       <div class="demo">
         <google-pay-button
+          environment="TEST"
           [buttonType]="buttonType"
           [buttonColor]="buttonColor"
           [existingPaymentMethodRequired]="existingPaymentMethodRequired"
@@ -79,6 +80,7 @@
       <div class="title">Payment Authorization</div>
       <div class="demo">
         <google-pay-button
+          environment="TEST"
           [buttonType]="buttonType"
           [buttonColor]="buttonColor"
           [existingPaymentMethodRequired]="existingPaymentMethodRequired"
@@ -106,6 +108,7 @@
       <div class="title">Cryptogram 3ds</div>
       <div class="demo">
         <google-pay-button
+          environment="TEST"
           [buttonType]="buttonType"
           [buttonColor]="buttonColor"
           [existingPaymentMethodRequired]="existingPaymentMethodRequired"
@@ -148,6 +151,7 @@
       <div class="title">Require Shipping</div>
       <div class="demo">
         <google-pay-button
+          environment="TEST"
           [buttonType]="buttonType"
           [buttonColor]="buttonColor"
           [existingPaymentMethodRequired]="existingPaymentMethodRequired"

diff --git a/examples/html/dynamic-examples.js b/examples/html/dynamic-examples.js
@@ -219,6 +219,7 @@ function updateGooglePayButtons() {
     if (!button) {
       button = new GooglePayButton();
       button.id = id;
+      button.environment = 'TEST';
 
       const container = document.getElementById('examples');
       container.appendChild(createExample(gpay.title, button));

diff --git a/examples/react/src/examples/AmexExample.tsx b/examples/react/src/examples/AmexExample.tsx
@@ -22,6 +22,7 @@ export default (props: any) => {
   return (
     <Example title="American Express">
       <GooglePayButton
+        environment="TEST"
         paymentRequest={{
           apiVersion: 2,
           apiVersionMinor: 0,

diff --git a/examples/react/src/examples/BasicExample.tsx b/examples/react/src/examples/BasicExample.tsx
@@ -22,6 +22,7 @@ export default (props: any) => {
   return (
     <Example title="Mastercard and VISA">
       <GooglePayButton
+        environment="TEST"
         paymentRequest={{
           apiVersion: 2,
           apiVersionMinor: 0,

diff --git a/examples/react/src/examples/ButtonSizeExample.tsx b/examples/react/src/examples/ButtonSizeExample.tsx
@@ -22,6 +22,7 @@ export default (props: any) => {
   return (
     <Example title="Button Size">
       <GooglePayButton
+        environment="TEST"
         paymentRequest={{
           apiVersion: 2,
           apiVersionMinor: 0,

diff --git a/examples/react/src/examples/CryptogramExample.tsx b/examples/react/src/examples/CryptogramExample.tsx
@@ -24,6 +24,7 @@ export default (props: any) => {
   return (
     <Example title="Cryptogram 3ds">
       <GooglePayButton
+        environment="TEST"
         paymentRequest={{
           apiVersion: 2,
           apiVersionMinor: 0,

diff --git a/examples/react/src/examples/DirectIntegrationExample.tsx b/examples/react/src/examples/DirectIntegrationExample.tsx
@@ -22,6 +22,7 @@ export default (props: any) => {
   return (
     <Example title="Direct Integration">
       <GooglePayButton
+        environment="TEST"
         paymentRequest={{
           apiVersion: 2,
           apiVersionMinor: 0,

diff --git a/examples/react/src/examples/DisplayItemsExample.tsx b/examples/react/src/examples/DisplayItemsExample.tsx
@@ -22,6 +22,7 @@ export default (props: any) => {
   return (
     <Example title="Display Items">
       <GooglePayButton
+        environment="TEST"
         paymentRequest={{
           apiVersion: 2,
           apiVersionMinor: 0,

diff --git a/examples/react/src/examples/DynamicPriceUpdateExample.tsx b/examples/react/src/examples/DynamicPriceUpdateExample.tsx
@@ -98,6 +98,7 @@ export default (props: any) => {
   return (
     <Example title="Dynamic Price Updates">
       <GooglePayButton
+        environment="TEST"
         paymentRequest={paymentRequest}
         onLoadPaymentData={paymentRequest => {
           console.log('Success', paymentRequest);

diff --git a/examples/react/src/examples/EmailRequiredExample.tsx b/examples/react/src/examples/EmailRequiredExample.tsx
@@ -22,6 +22,7 @@ export default (props: any) => {
   return (
     <Example title="Email Required">
       <GooglePayButton
+        environment="TEST"
         paymentRequest={{
           apiVersion: 2,
           apiVersionMinor: 0,

diff --git a/examples/react/src/examples/OnCancelExample.tsx b/examples/react/src/examples/OnCancelExample.tsx
@@ -22,6 +22,7 @@ export default (props: any) => {
   return (
     <Example title="On Cancel">
       <GooglePayButton
+        environment="TEST"
         paymentRequest={{
           apiVersion: 2,
           apiVersionMinor: 0,

diff --git a/examples/react/src/examples/PaymentAuthorizationErrorExample.tsx b/examples/react/src/examples/PaymentAuthorizationErrorExample.tsx
@@ -22,6 +22,7 @@ export default (props: any) => {
   return (
     <Example title="Payment Authorization (insufficient funds)">
       <GooglePayButton
+        environment="TEST"
         paymentRequest={{
           apiVersion: 2,
           apiVersionMinor: 0,

diff --git a/examples/react/src/examples/PaymentAuthorizationExample.tsx b/examples/react/src/examples/PaymentAuthorizationExample.tsx
@@ -22,6 +22,7 @@ export default (props: any) => {
   return (
     <Example title="Payment Authorization">
       <GooglePayButton
+        environment="TEST"
         paymentRequest={{
           apiVersion: 2,
           apiVersionMinor: 0,

diff --git a/examples/react/src/examples/PaymentDataChangedErrorExample.tsx b/examples/react/src/examples/PaymentDataChangedErrorExample.tsx
@@ -22,6 +22,7 @@ export default (props: any) => {
   return (
     <Example title="Payment Data Changed Error (no US address)">
       <GooglePayButton
+        environment="TEST"
         paymentRequest={{
           apiVersion: 2,
           apiVersionMinor: 0,

diff --git a/examples/react/src/examples/PaymentDataChangedExample.tsx b/examples/react/src/examples/PaymentDataChangedExample.tsx
@@ -22,6 +22,7 @@ export default (props: any) => {
   return (
     <Example title="Payment Data Changed">
       <GooglePayButton
+        environment="TEST"
         paymentRequest={{
           apiVersion: 2,
           apiVersionMinor: 0,

diff --git a/examples/react/src/examples/RequireShippingExample.tsx b/examples/react/src/examples/RequireShippingExample.tsx
@@ -22,6 +22,7 @@ export default (props: any) => {
   return (
     <Example title="Require Shipping">
       <GooglePayButton
+        environment="TEST"
         paymentRequest={{
           apiVersion: 2,
           apiVersionMinor: 0,

diff --git a/examples/react/src/examples/ShippingOptionsExample.tsx b/examples/react/src/examples/ShippingOptionsExample.tsx
@@ -37,6 +37,7 @@ export default (props: any) => {
   return (
     <Example title="Shipping Options">
       <GooglePayButton
+        environment="TEST"
         paymentRequest={{
           apiVersion: 2,
           apiVersionMinor: 0,

diff --git a/examples/svelte/src/App.svelte b/examples/svelte/src/App.svelte
@@ -207,6 +207,7 @@
       <div class="title">Basic Example</div>
       <div class="demo">
         <google-pay-button
+          environment="TEST"
           button-type={buttonType}
           button-color={buttonColor}
           {existingPaymentMethodRequired}
@@ -219,6 +220,7 @@
       <div class="title">Payment Authorization</div>
       <div class="demo">
         <google-pay-button
+          environment="TEST"
           button-type={buttonType}
           button-color={buttonColor}
           {existingPaymentMethodRequired}
@@ -232,6 +234,7 @@
       <div class="title">Cryptogram 3ds</div>
       <div class="demo">
         <google-pay-button
+          environment="TEST"
           button-type={buttonType}
           button-color={buttonColor}
           {existingPaymentMethodRequired}
@@ -245,6 +248,7 @@
       <div class="title">Require Shipping</div>
       <div class="demo">
         <google-pay-button
+          environment="TEST"
           button-type={buttonType}
           button-color={buttonColor}
           {existingPaymentMethodRequired}

diff --git a/examples/vue/src/components/Examples.vue b/examples/vue/src/components/Examples.vue
@@ -53,6 +53,7 @@
         <div class="title">Basic Example</div>
         <div class="demo">
           <google-pay-button
+            environment="TEST"
             v-bind:button-type="buttonType"
             v-bind:button-color="buttonColor"
             v-bind:existing-payment-method-required="existingPaymentMethodRequired"
@@ -78,6 +79,7 @@
         <div class="title">Payment Authorization</div>
         <div class="demo">
           <google-pay-button
+            environment="TEST"
             v-bind:button-type="buttonType"
             v-bind:button-color="buttonColor"
             v-bind:existing-payment-method-required="existingPaymentMethodRequired"
@@ -104,6 +106,7 @@
         <div class="title">Cryptogram 3ds</div>
         <div class="demo">
           <google-pay-button
+            environment="TEST"
             v-bind:button-type="buttonType"
             v-bind:button-color="buttonColor"
             v-bind:existing-payment-method-required="existingPaymentMethodRequired"
@@ -146,6 +149,7 @@
         <div class="title">Require Shipping</div>
         <div class="demo">
           <google-pay-button
+            environment="TEST"
             v-bind:button-type="buttonType"
             v-bind:button-color="buttonColor"
             v-bind:existing-payment-method-required="existingPaymentMethodRequired"

diff --git a/examples/vue/src/components/StaticExample.vue b/examples/vue/src/components/StaticExample.vue
@@ -21,6 +21,7 @@
         <div class="title">Static Example</div>
         <div class="demo">
           <google-pay-button
+            environment="TEST"
             button-type="plain"
             button-color="black"
             v-bind:paymentRequest.prop="{

diff --git a/src/button-element/GooglePayButton.ts b/src/button-element/GooglePayButton.ts
@@ -33,10 +33,10 @@ class GooglePayButton extends HTMLElement {
 
   @Notify()
   @Alias('paymentrequest')
-  paymentRequest?: google.payments.api.PaymentDataRequest;
+  paymentRequest!: google.payments.api.PaymentDataRequest;
 
   @NotifyAttribute()
-  environment?: google.payments.api.Environment;
+  environment!: google.payments.api.Environment;
 
   @NotifyBooleanAttribute()
   @Alias('existingpaymentmethodrequired')
@@ -138,8 +138,12 @@ class GooglePayButton extends HTMLElement {
       return;
     }
 
+    if (!this.assertRequiredProperty('environment')) {
+      return;
+    }
+
     const config: Config = {
-      paymentRequest: this.paymentRequest!,
+      paymentRequest: this.paymentRequest,
       environment: this.environment,
       existingPaymentMethodRequired: this.existingPaymentMethodRequired,
       onPaymentDataChanged: this.onPaymentDataChanged,

diff --git a/src/button-element/README.md b/src/button-element/README.md
@@ -66,6 +66,7 @@ Try it out on [JSFiddle](https://jsfiddle.net/wupkceL4/).
 
 ```html
 <google-pay-button
+  environment="TEST"
   button-type="buy"
   button-color="black"
   [paymentRequest]="{
@@ -110,6 +111,7 @@ repository.
 
 ```html
 <google-pay-button
+  environment="TEST"
   button-type="buy"
   button-color="black"
   v-bind:paymentRequest.prop="{
@@ -201,10 +203,9 @@ integrating Google Pay into your website.
     <td><p>environment</p></td>
     <td><p><code>"TEST" | "PRODUCTION"</code></p></td>
     <td>
-      <p>Optional.</p>
+      <p>Required.</p>
       <p>The Google Pay environment to target.</p>
       <p>Note: in the <code>"TEST"</code> environment, fake payment credentials are returned. In order to use the <code>"PRODUCTION"</code> environment, your website must be registered with Google Pay. This can be done through the <a href="https://pay.google.com/business/console/">Google Pay Business Console</a>.</p>
-      <p>Default value <code>"TEST"</code>.</p>
     </td>
   </tr>
   <tr>

diff --git a/src/button-react/README.md b/src/button-react/README.md
@@ -111,10 +111,9 @@ integrating Google Pay into your website.
     <td><p>environment</p></td>
     <td><p><code>"TEST" | "PRODUCTION"</code></p></td>
     <td>
-      <p>Optional.</p>
+      <p>Required.</p>
       <p>The Google Pay environment to target.</p>
       <p>Note: in the <code>"TEST"</code> environment, fake payment credentials are returned. In order to use the <code>"PRODUCTION"</code> environment, your website must be registered with Google Pay. This can be done through the <a href="https://pay.google.com/business/console/">Google Pay Business Console</a>.</p>
-      <p>Default value <code>"TEST"</code>.</p>
     </td>
   </tr>
   <tr>

diff --git a/src/lib/button-manager.test.ts b/src/lib/button-manager.test.ts
@@ -491,6 +491,22 @@ describe('Google Pay client invalidation', () => {
     expect(updateElementSpy).toBeCalledTimes(2);
   });
 
+  it('invalidates client when buttonSizeMode changes', () => {
+    const manager = new ButtonManager(managerOptions);
+    const config1: Config = {
+      ...defaults,
+    };
+    const config2: Config = {
+      ...defaults,
+      buttonSizeMode: 'static',
+    };
+
+    manager.configure(config1);
+    manager.configure(config2);
+
+    expect(updateElementSpy).toBeCalledTimes(2);
+  });
+
   it('invalidates client when buttonColor changes', () => {
     const manager = new ButtonManager(managerOptions);
     const config1: Config = {

diff --git a/src/lib/button-manager.ts b/src/lib/button-manager.ts
@@ -25,7 +25,7 @@ export interface ReadyToPayChangeResponse {
 }
 
 export interface Config {
-  environment?: google.payments.api.Environment;
+  environment: google.payments.api.Environment;
   existingPaymentMethodRequired?: boolean;
   paymentRequest: google.payments.api.PaymentDataRequest;
   onPaymentDataChanged?: google.payments.api.PaymentDataChangedHandler;