Merge pull request #1154 from elijahsoria/pay_client_cookies

♻  Moves Payments Client Initialization into start() from ctor

src/runtime/experiment-flags.js

@@ -55,4 +55,11 @@ export const ExperimentFlags = {
    *  changed from '<uuid>' to '<uuid>.swg'.
    */
   UPDATE_GOOGLE_TRANSACTION_ID: 'update-google-transaction-id',
+
+  /**
+   * Enables PayClient to be instantiated within start() instead of upon instantiation.
+   * Also moves google preconnects to Runtime from PayClient, and runs Pay
+   * preloads upon start() instead of within the ctor.
+   */
+  PAY_CLIENT_LAZYLOAD: 'pay-client-lazyload',
 };

src/runtime/pay-client-test.js

@@ -15,9 +15,11 @@
  */
 
 import {ConfiguredRuntime} from './runtime';
+import {ExperimentFlags} from './experiment-flags';
 import {PageConfig} from '../model/page-config';
 import {PayClient, RedirectVerifierHelper} from './pay-client';
 import {PaymentsAsyncClient} from '../../third_party/gpay/src/payjs_async';
+import {setExperiment} from './experiments';
 import {setExperimentsStringForTesting} from './experiments';
 
 const INTEGR_DATA_STRING =
@@ -133,6 +135,28 @@ describes.realWin('PayClient', {}, (env) => {
     });
   });
 
+  it('should have valid flow constructed when PayClient lazy loaded', () => {
+    setExperiment(win, ExperimentFlags.PAY_CLIENT_LAZYLOAD, true);
+    payClient.start({
+      'paymentArgs': {'a': 1},
+    });
+    expect(payClientStubs.create).to.be.calledOnce.calledWith({
+      'environment': '$payEnvironment$',
+      'i': {
+        'redirectKey': 'test_restore_key',
+      },
+    });
+    expect(redirectVerifierHelperStubs.restoreKey).to.be.calledOnce;
+    expect(redirectVerifierHelperStubs.useVerifier).to.be.calledOnce;
+    expect(payClientStubs.loadPaymentData).to.be.calledOnce.calledWith({
+      'paymentArgs': {'a': 1},
+      'i': {
+        'redirectVerifier': redirectVerifierHelperResults.verifier,
+        'disableNative': true,
+      },
+    });
+  });
+
   it('should force redirect mode', async function () {
     await payClient.start(
       {
@@ -153,6 +177,16 @@ describes.realWin('PayClient', {}, (env) => {
     });
   });
 
+  it('should prefetch payments on start', () => {
+    setExperiment(win, ExperimentFlags.PAY_CLIENT_LAZYLOAD, true);
+    payClient.start({});
+    const el = win.document.head.querySelector(
+      'link[rel="preconnect prefetch"][href*="/pay?"]'
+    );
+    expect(el).to.exist;
+    expect(el.getAttribute('href')).to.equal('PAY_ORIGIN/gp/p/ui/pay?_=_');
+  });
+
   it('should accept a correct payment response', async () => {
     payClient.start({});
     const data = await withResult(Promise.resolve(INTEGR_DATA_OBJ));

src/runtime/pay-client.js

@@ -14,10 +14,13 @@
  * limitations under the License.
  */
 
+import {ExperimentFlags} from './experiment-flags';
 import {PaymentsAsyncClient} from '../../third_party/gpay/src/payjs_async';
+import {Preconnect} from '../utils/preconnect';
 import {bytesToString, stringToBytes} from '../utils/bytes';
 import {createCancelError} from '../utils/errors';
 import {feCached} from './services';
+import {isExperimentOn} from './experiments';
 
 const REDIRECT_STORAGE_KEY = 'subscribe.google.com:rk';
 
@@ -70,18 +73,26 @@ export class PayClient {
     /** @private @const {!RedirectVerifierHelper} */
     this.redirectVerifierHelper_ = new RedirectVerifierHelper(this.win_);
 
-    /** @private @const {!PaymentsAsyncClient} */
-    this.client_ = this.createClient_(
-      /** @type {!PaymentOptions} */
-      ({
-        environment: '$payEnvironment$',
-        'i': {
-          'redirectKey': this.redirectVerifierHelper_.restoreKey(),
-        },
-      }),
-      this.analytics_.getTransactionId(),
-      this.handleResponse_.bind(this)
-    );
+    if (!isExperimentOn(this.win_, ExperimentFlags.PAY_CLIENT_LAZYLOAD)) {
+      /** @private @const {?PaymentsAsyncClient} */
+      this.client_ = this.createClient_(
+        /** @type {!PaymentOptions} */
+        ({
+          environment: '$payEnvironment$',
+          'i': {
+            'redirectKey': this.redirectVerifierHelper_.restoreKey(),
+          },
+        }),
+        this.analytics_.getTransactionId(),
+        this.handleResponse_.bind(this)
+      );
+    } else {
+      /** @private @const {?PaymentsAsyncClient} */
+      this.client_ = null;
+
+      /** @private @const {!Preconnect} */
+      this.preconnect_ = new Preconnect(this.win_.document);
+    }
 
     // Prepare new verifier pair.
     this.redirectVerifierHelper_.prepare();
@@ -118,9 +129,6 @@ export class PayClient {
       'https://payments.google.com/payments/v4/js/integrator.js?ss=md'
     );
     pre.prefetch('https://clients2.google.com/gr/gr_full_2.0.6.js');
-    pre.preconnect('https://www.gstatic.com/');
-    pre.preconnect('https://fonts.googleapis.com/');
-    pre.preconnect('https://www.google.com/');
   }
 
   /**
@@ -138,6 +146,23 @@ export class PayClient {
   start(paymentRequest, options = {}) {
     this.request_ = paymentRequest;
 
+    if (
+      isExperimentOn(this.win_, ExperimentFlags.PAY_CLIENT_LAZYLOAD) &&
+      !this.client_
+    ) {
+      this.preconnect(this.preconnect_);
+      this.client_ = this.createClient_(
+        /** @type {!PaymentOptions} */
+        ({
+          environment: '$payEnvironment$',
+          'i': {
+            'redirectKey': this.redirectVerifierHelper_.restoreKey(),
+          },
+        }),
+        this.analytics_.getTransactionId(),
+        this.handleResponse_.bind(this)
+      );
+    }
     if (options.forceRedirect) {
       paymentRequest = Object.assign(paymentRequest, {
         'forceRedirect': options.forceRedirect || false,

src/runtime/runtime-test.js

@@ -1187,6 +1187,26 @@ describes.realWin('ConfiguredRuntime', {}, (env) => {
       expect(el.getAttribute('href')).to.equal('PAY_ORIGIN/gp/p/ui/pay?_=_');
     });
 
+    it('should preconnect to google domains', () => {
+      const gstatic = win.document.head.querySelector(
+        'link[rel="preconnect"][href*="gstatic"]'
+      );
+      const fonts = win.document.head.querySelector(
+        'link[rel="preconnect"][href*="fonts"]'
+      );
+      const goog = win.document.head.querySelector(
+        'link[rel="preconnect"][href*="google.com"]'
+      );
+      expect(gstatic).to.exist;
+      expect(fonts).to.exist;
+      expect(goog).to.exist;
+      expect(gstatic.getAttribute('href')).to.equal('https://www.gstatic.com/');
+      expect(fonts.getAttribute('href')).to.equal(
+        'https://fonts.googleapis.com/'
+      );
+      expect(goog.getAttribute('href')).to.equal('https://www.google.com/');
+    });
+
     it('should NOT inject button stylesheet', () => {
       const el = win.document.head.querySelector(
         'link[href*="swg-button.css"]'

src/runtime/runtime.js

@@ -578,9 +578,14 @@ export class ConfiguredRuntime {
     const preconnect = new Preconnect(this.win_.document);
 
     preconnect.prefetch('$assets$/loader.svg');
+    preconnect.preconnect('https://www.gstatic.com/');
+    preconnect.preconnect('https://fonts.googleapis.com/');
+    preconnect.preconnect('https://www.google.com/');
     LinkCompleteFlow.configurePending(this);
     PayCompleteFlow.configurePending(this);
-    this.payClient_.preconnect(preconnect);
+    if (!isExperimentOn(this.win_, ExperimentFlags.PAY_CLIENT_LAZYLOAD)) {
+      this.payClient_.preconnect(preconnect);
+    }
 
     injectStyleSheet(this.doc_, SWG_DIALOG);