教學課程

請按照這個教學課程中的步驟將網頁應用程式與 Google Pay API 整合,並將該應用程式設定為接受付款卡。

步驟 1:定義 Google Pay API 版本

宣告您網站使用的 Google Pay API 版本。傳遞每個物件時,物件的欄位都必須具有主要和次要版本,回應中也會包含這項資訊。

下列程式碼範例顯示了已宣告的 API 版本:

const baseRequest = {
  apiVersion: 2,
  apiVersionMinor: 0
};

步驟 2:為付款服務供應商申請付款權杖

Google 會將付款人所選卡片的相關資訊加密,以便付款服務供應商安全地進行處理。

const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    'gateway': 'example',
    'gatewayMerchantId': 'exampleGatewayMerchantId'
  }
};

exampleexampleGatewayMerchantId 替換為適用於付款服務供應商的值。請參閱下表,找出服務供應商適用的特定 gatewaygatewayMerchantId 值:

開發人員說明文
閘道 參數和文件
ABA PayWay
  "gateway": "ababank"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

開發人員說明文件

accept.blue
  "gateway": "acceptblue"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

開發人員說明文件

ACI
  "gateway": "aciworldwide"
  "gatewayMerchantId": "YOUR_ENTITY_ID"

開發人員說明文件

ACpay
  "gateway": "acpay"
  "gatewayMerchantId": "YOUR_GATEWAY_MERCHANT_ID"

開發人員說明文件

PAYMENT_GATEWAY 權杖化類型是商家最常在 Google Pay API 中實作的卡片付款方式。如果系統不支援您的付款服務供應商,您或許可以透過直接整合來接受 Google Pay 付款。詳情請參閱直接權杖化說明文件

步驟 3:定義支援的付款卡發卡機構

定義貴商家網站接受的發卡機構。請參閱下列程式碼範例:

const allowedCardNetworks = ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"];

Google Pay API 可能會傳回 Google 系統中儲存的卡片 (PAN_ONLY),以及/或是已通過 3-D Secure 密文驗證的 Android 裝置權杖 (CRYPTOGRAM_3DS)。請參閱下列程式碼範例:

const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];

詳情請參閱物件參考說明文件中的 CardParameters。您也可以與閘道或處理方聯絡,確認支援的發卡機構和取得 Android 裝置權杖的相關協助。

步驟 4:說明允許的付款方式

請完成下列步驟來說明您允許的付款方式:

  1. 將支援的驗證方法和發卡機構加以結合,以便說明您的網站對於 CARD 這個付款方式的支援。請參閱下列程式碼範例:
    const baseCardPaymentMethod = {
      type: 'CARD',
      parameters: {
        allowedAuthMethods: allowedCardAuthMethods,
        allowedCardNetworks: allowedCardNetworks
      }
    };
  2. 擴充基本卡片付款方式物件,藉此說明您希望傳回至應用程式的資訊。另外,請提供權杖化付款資料的說明。請參閱下列程式碼範例:
    const cardPaymentMethod = Object.assign(
      {tokenizationSpecification: tokenizationSpecification},
      baseCardPaymentMethod
    );
  3. 如要進一步瞭解支援的 parameters,請參閱 CardParameters

    Google Pay 也支援 CARDPAYPAL 類型的付款方式。如要進一步瞭解如何將 PAYPAL 類型新增為 Google Pay 付款方式,請參閱 PayPal 的開發人員說明文件

步驟 5:載入 Google Pay API JavaScript 程式庫

如要載入 Google Pay API JavaScript 資料庫,請完成下列步驟:

  1. 將 Google 託管的 JavaScript 新增至您的頁面。請參閱下列程式碼範例:
    <script
      async
      src="https://pay.google.com/gp/p/js/pay.js"
      onload="console.log('TODO: add onload function')">
    </script>
  2. 載入 Google Pay API JavaScript 程式庫之後,請初始化 PaymentsClient 物件。初始開發作業會使用 TEST 環境,這個環境會傳回適合用於參照付款回應結構的虛擬付款方式。在這個環境中,選取的付款方式無法用於交易。請參閱以下程式碼範例。
    const paymentsClient =
        new google.payments.api.PaymentsClient({environment: 'TEST'});

    如要進一步瞭解會傳回可扣款付款方式的 PRODUCTION 環境相關規定,請參閱整合作業檢查清單

步驟 6:判斷是否準備好使用 Google Pay API 付款

如要判斷是否準備好使用 Google Pay API 付款,請完成下列步驟:

  1. 在基本要求物件中新增允許的付款方式。請參閱下列程式碼範例:
    const isReadyToPayRequest = Object.assign({}, baseRequest);
    isReadyToPayRequest.allowedPaymentMethods = [baseCardPaymentMethod];
  2. 呼叫 isReadyToPay() 來判斷目前的裝置和瀏覽器是否支援 Google Pay API,藉此確認指定的付款方式確實可用。請參閱下列程式碼範例:
    paymentsClient.isReadyToPay(isReadyToPayRequest)
        .then(function(response) {
          if (response.result) {
            // add a Google Pay payment button
          }
        })
        .catch(function(err) {
          // show error in developer console for debugging
          console.error(err);
        });

步驟 7:新增 Google Pay 付款按鈕

在您的網頁中新增 Google Pay 付款按鈕,鼓勵購物者透過 Google Pay API 和您網站支援的付款方式結帳。如要進一步瞭解可用的按鈕類型、顏色和顯示規定,請參閱品牌規範

請參閱下列付款按鈕程式碼範例:

const button =
    paymentsClient.createButton({onClick: () => console.log('TODO: click handler'),
    allowedPaymentMethods: []}); // make sure to provide an allowed payment method
document.getElementById('container').appendChild(button);

步驟 8:建立 PaymentDataRequest 物件

如要建立 PaymentDataRequest 物件,請完成下列步驟:

  1. 建立 JavaScript 物件來說明您的網站是否支援 Google Pay API。如需完整的支援屬性清單,請參閱 PaymentDataRequest。請參閱下列程式碼範例:
    const paymentDataRequest = Object.assign({}, baseRequest);
  2. 新增您應用程式支援的付款方式,例如您希望回應中包含的任何其他資料設定。請參閱下列程式碼範例:
    paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
  3. 定義要經過購物者授權的總價格和貨幣。請參閱下列程式碼範例:
    paymentDataRequest.transactionInfo = {
      totalPriceStatus: 'FINAL',
      totalPrice: '123.45',
      currencyCode: 'USD',
      countryCode: 'US'
    };
  4. 提供向使用者顯示的商家名稱,並在 TEST 中使用我們的 TEST merchantId 值。如需更多詳細資料或想瞭解 TEST merchantId 值的替換時機,請參閱 MerchantInfo 的說明。請參閱下列程式碼範例來瞭解使用者可以查看的商家名稱:
    paymentDataRequest.merchantInfo = {
      merchantName: 'Example Merchant'
      merchantId: '12345678901234567890'
    };

步驟 9:註冊使用者手勢的事件處理常式

如要註冊使用者手勢的事件處理常式,請完成下列步驟:

  1. 註冊購買按鈕的點擊事件處理常式。事件處理常式與 Google Pay 付款按鈕互動之後,會立即呼叫 loadPaymentData()
  2. Google 使用者授權您的網站接收使用者所選付款方式和選用聯絡資料的相關資訊之後,請處理 Google Pay API 傳出的回應。
  3. 擷取 paymentData 回應中的付款權杖。如果實作了閘道整合,請將這個權杖傳送至閘道,不要進行任何修改。
    paymentsClient.loadPaymentData(paymentDataRequest).then(function(paymentData){
      // if using gateway tokenization, pass this token without modification
      paymentToken = paymentData.paymentMethodData.tokenizationData.token;
    }).catch(function(err){
      // show error in developer console for debugging
      console.error(err);
    });

步驟 10 (選擇性步驟):在使用者進行互動前預先擷取付款資料

呼叫 loadPaymentData() 之前,請先透過 Google Pay API 預先擷取您網站的付款設定,以便縮短執行時間。請參閱以下範例:

paymentsClient.prefetchPaymentData(paymentDataRequest);

步驟 11 (選擇性步驟):設定授權付款功能

授權付款功能用於啟動付款流程,並確認付款的授權狀態。如要設定授權付款功能,請按照下列步驟操作:

  1. PaymentOptions 中註冊 onPaymentAuthorized() 回呼。
  2. 使用 PAYMENT_AUTHORIZATION 回呼意圖呼叫 loadPaymentData() 函式。
  3. 導入 onPaymentAuthorized()

註冊 onPaymentAuthorized 回呼

下列程式碼範例說明如何註冊 onPaymentAuthorized 回呼:

{
  environment: "TEST",
  merchantInfo: {
    merchantName: "Example Merchant",
    merchantId: "12345678901234567890"
  },
  paymentDataCallbacks: {
    onPaymentAuthorized: onPaymentAuthorized
  }
}

使用回呼意圖載入付款資料

透過下列程式碼範例,您可以瞭解如何使用授權付款功能初始化付款畫面:

const paymentDataRequest = Object.assign({}, baseRequest);
paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
paymentDataRequest.merchantInfo = {
  merchantName: 'Example Merchant'
  merchantId: '12345678901234567890',
};

paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"];

處理 onPaymentAuthorized 回呼

付款人透過使用者手勢 (例如按一下「付款」) 核准付款後,Google 會使用 PaymentData 物件叫用 onPaymentAuthorized() 回呼。

回呼會傳回 Promise<PaymentAuthorizationResult> 值。PaymentAuthorizationResult 物件包含 SUCCESSERROR 交易狀態。付款成功後,會順利關閉付款畫面。如果發生問題,付款畫面會在款項處理完畢後顯示系統傳回的錯誤詳細資料。使用者可以變更付款畫面中的付款資料,然後重新授權付款。請參閱下列程式碼範例:

function onPaymentAuthorized(paymentData) {
  return new Promise(function(resolve, reject){
    // handle the response
    processPayment(paymentData)
    .then(function() {
      resolve({transactionState: 'SUCCESS'});
    })
    .catch(function() {
      resolve({
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      });
    });
  });
}

步驟 12 (啟用運送選項時的選擇性步驟):設定動態價格更新功能

動態價格更新功能可讓商家依據所選運送地址動態更新運送選項和交易資訊。另外,您也能按照所選運送選項動態更新交易資訊。

如要設定動態價格更新功能,請執行下列步驟:

  1. PaymentOptions 中註冊 onPaymentAuthorizedonPaymentDataChanged 回呼。
  2. 使用回呼意圖呼叫 loadPaymentData() 函式。詳情請參閱相應的範例
  3. 實作 onPaymentAuthorizedonPaymentDataChanged

註冊 PaymentData 回呼

下列程式碼範例顯示,必須在 PaymentsClient paymentOptions 物件中註冊回呼函式,才能啟用動態價格更新功能。

{
  environment: "TEST",
  merchantInfo: {
    merchantName: "Example Merchant",
    merchantId: "12345678901234567890"
  },
  paymentDataCallbacks: {
    onPaymentAuthorized: onPaymentAuthorized,
    onPaymentDataChanged: onPaymentDataChanged
  }
}

使用回呼意圖載入付款資料

透過下列程式碼範例,您可以瞭解如何使用必要的運送地址和運送選項設定來初始化付款畫面:

const paymentDataRequest = Object.assign({}, baseRequest);
paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
paymentDataRequest.merchantInfo = {
  merchantId: '12345678901234567890',
  merchantName: 'Example Merchant'
};

paymentDataRequest.callbackIntents = ["SHIPPING_ADDRESS",  "SHIPPING_OPTION", "PAYMENT_AUTHORIZATION"];

paymentDataRequest.shippingAddressRequired = true;
paymentDataRequest.shippingAddressParameters = getGoogleShippingAddressParameters();
paymentDataRequest.shippingOptionRequired = true;

處理 onPaymentDataChanged 回呼

系統會使用 IntermediatePaymentData 物件叫用 onPaymentDataChanged 回呼,當中包含使用者在付款畫面中選取的運送地址和運送選項。

回呼會傳回 Promise<PaymentDataRequestUpdate>PaymentDataRequestUpdate 物件中會包含新的交易資訊、運送選項和付款資料錯誤訊息。系統會使用這項資料更新付款畫面。

您可以直接在付款畫面中處理任何例外狀況,例如超出服務範圍的運送地址或無效的運送選項。設定 PaymentDataError 物件即可凸顯錯誤訊息中的錯誤原因,方便使用者查看。不過,請記得將相關意圖加入訊息中。如要進一步瞭解設定物件和訊息的方式,請參閱下列程式碼範例:

function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {

    let shippingAddress = intermediatePaymentData.shippingAddress;
    let shippingOptionData = intermediatePaymentData.shippingOptionData;
    let paymentDataRequestUpdate = {};

    if (intermediatePaymentData.callbackTrigger == "INITIALIZE" || intermediatePaymentData.callbackTrigger == "SHIPPING_ADDRESS") {
      if(shippingAddress.administrativeArea == "NJ")  {
        paymentDataRequestUpdate.error = getGoogleUnserviceableAddressError();
      }
      else {
        paymentDataRequestUpdate.newShippingOptionParameters = getGoogleDefaultShippingOptions();
        let selectedShippingOptionId = paymentDataRequestUpdate.newShippingOptionParameters.defaultSelectedOptionId;
        paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(selectedShippingOptionId);
      }
    }
    else if (intermediatePaymentData.callbackTrigger == "SHIPPING_OPTION") {
      paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(shippingOptionData.id);
    }

    resolve(paymentDataRequestUpdate);
  });
}

步驟 13 (促銷代碼的選用步驟):設定促銷代碼

促銷代碼可讓商家根據提供的促銷代碼動態更新運送選項和交易資訊。

如要設定促銷代碼,請按照下列步驟操作:

  1. PaymentOptions 中註冊 onPaymentDataChanged 回呼。
  2. 使用回呼意圖呼叫 loadPaymentData() 函式。詳情請參閱相應的範例
  3. 導入 onPaymentDataChanged callback function

註冊優惠回呼

下列程式碼範例說明,您必須在 PaymentsClient paymentOptions 物件中註冊回呼函式,才能使用促銷代碼。

{
  environment: "TEST",
  merchantInfo: {
    merchantName: "Example Merchant",
    merchantId: "12345678901234567890"
  },
  paymentDataCallbacks: {
    onPaymentDataChanged: onPaymentDataChanged
  }
}

使用回呼意圖載入付款資料

下列程式碼範例說明,您必須使用 OFFER 回呼意圖來初始化付款畫面:

const paymentDataRequest = Object.assign({}, baseRequest);
paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
paymentDataRequest.merchantInfo = {
  merchantId: '12345678901234567890',
  merchantName: 'Example Merchant'
};

paymentDataRequest.callbackIntents = ["OFFER"];

處理 onPaymentDataChanged 回呼

系統會使用 IntermediatePaymentData 物件叫用 onPaymentDataChanged 回呼,當中包含使用者在付款畫面中選取的運送地址和運送選項。

回呼必須傳回 Promise<PaymentDataRequestUpdate>PaymentDataRequestUpdate 物件會包含新的交易資訊、運送選項、優惠資料和付款資料錯誤。系統會使用這項資料更新付款畫面。

您可以直接在付款畫面中處理任何例外狀況,例如無效的促銷代碼。設定 PaymentDataError 物件即可凸顯錯誤訊息中的錯誤原因,方便使用者查看。不過,請記得將相關意圖加入訊息中。如要進一步瞭解設定物件和訊息的方式,請參閱下列程式碼範例,這個範例參照的物件 (validPromoCodes) 包含促銷代碼值:

function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {

    let redemptionCodes = [];
    let shippingOptionData = intermediatePaymentData.shippingOptionData;
    let paymentDataRequestUpdate = {};
    paymentDataRequestUpdate.newTransactionInfo = getGoogleTransactionInfo();

    // ensure that promo codes set is unique
    if(typeof intermediatePaymentData.offerData != 'undefined') {
      // convert to set then back to array
      redemptionCodes = Array.from(
        new Set(intermediatePaymentData.offerData.redemptionCodes)
      );
    }

    // OPTIONAL: ensure that the newest promo code is the only one applied
    // redemptionCodes = new Array(redemptionCodes[redemptionCodes.length -1]);

    // validate promo codes and add descriptions to payment sheet
    if (intermediatePaymentData.callbackTrigger === 'OFFER') {
      paymentDataRequestUpdate.newOfferInfo = {};
      paymentDataRequestUpdate.newOfferInfo.offers = [];
      for (redemptionCode of redemptionCodes) {
        if (validPromoCodes[redemptionCode]) {
          paymentDataRequestUpdate = validPromoCodes[redemptionCode].function(
            validPromoCodes[redemptionCode],
            paymentDataRequestUpdate
          );
        } else {
          paymentDataRequestUpdate.error = getGoogleOfferInvalidError(redemptionCode);
        }
      }
    }

完整的實作範例

本節提供的程式碼區塊範例顯示 Google Pay API JavaScript 程式庫教學課程、授權付款功能、動態價格更新功能以及促銷代碼的完整端對端範例。

<div id="container"></div>

<script>
/**
 * Define the version of the Google Pay API referenced when creating your
 * configuration
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|apiVersion in PaymentDataRequest}
 */
const baseRequest = {
  apiVersion: 2,
  apiVersionMinor: 0
};

/**
 * Card networks supported by your site and your gateway
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 * @todo confirm card networks supported by your site and gateway
 */
const allowedCardNetworks = ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"];

/**
 * Card authentication methods supported by your site and your gateway
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 * @todo confirm your processor supports Android device tokens for your
 * supported card networks
 */
const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];

/**
 * Identify your gateway and your site's gateway merchant identifier
 *
 * The Google Pay API response will return an encrypted payment method capable
 * of being charged by a supported gateway after payer authorization
 *
 * @todo check with your gateway on the parameters to pass
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway|PaymentMethodTokenizationSpecification}
 */
const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    'gateway': 'example',
    'gatewayMerchantId': 'exampleGatewayMerchantId'
  }
};

/**
 * Describe your site's support for the CARD payment method and its required
 * fields
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 */
const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedAuthMethods: allowedCardAuthMethods,
    allowedCardNetworks: allowedCardNetworks
  }
};

/**
 * Describe your site's support for the CARD payment method including optional
 * fields
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 */
const cardPaymentMethod = Object.assign(
  {},
  baseCardPaymentMethod,
  {
    tokenizationSpecification: tokenizationSpecification
  }
);

/**
 * An initialized google.payments.api.PaymentsClient object or null if not yet set
 *
 * @see {@link getGooglePaymentsClient}
 */
let paymentsClient = null;

/**
 * Configure your site's support for payment methods supported by the Google Pay
 * API.
 *
 * Each member of allowedPaymentMethods should contain only the required fields,
 * allowing reuse of this base request when determining a viewer's ability
 * to pay and later requesting a supported payment method
 *
 * @returns {object} Google Pay API version, payment methods supported by the site
 */
function getGoogleIsReadyToPayRequest() {
  return Object.assign(
      {},
      baseRequest,
      {
        allowedPaymentMethods: [baseCardPaymentMethod]
      }
  );
}

/**
 * Configure support for the Google Pay API
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|PaymentDataRequest}
 * @returns {object} PaymentDataRequest fields
 */
function getGooglePaymentDataRequest() {
  const paymentDataRequest = Object.assign({}, baseRequest);
  paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
  paymentDataRequest.merchantInfo = {
    // @todo a merchant ID is available for a production environment after approval by Google
    // See {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist|Integration checklist}
    // merchantId: '12345678901234567890',
    merchantName: 'Example Merchant'
  };
  return paymentDataRequest;
}

/**
 * Return an active PaymentsClient or initialize
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/client#PaymentsClient|PaymentsClient constructor}
 * @returns {google.payments.api.PaymentsClient} Google Pay API client
 */
function getGooglePaymentsClient() {
  if ( paymentsClient === null ) {
    paymentsClient = new google.payments.api.PaymentsClient({environment: 'TEST'});
  }
  return paymentsClient;
}

/**
 * Initialize Google PaymentsClient after Google-hosted JavaScript has loaded
 *
 * Display a Google Pay payment button after confirmation of the viewer's
 * ability to pay.
 */
function onGooglePayLoaded() {
  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
      .then(function(response) {
        if (response.result) {
          addGooglePayButton();
          // @todo prefetch payment data to improve performance after confirming site functionality
          // prefetchGooglePaymentData();
        }
      })
      .catch(function(err) {
        // show error in developer console for debugging
        console.error(err);
      });
}

/**
 * Add a Google Pay purchase button alongside an existing checkout button
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ButtonOptions|Button options}
 * @see {@link https://developers.google.com/pay/api/web/guides/brand-guidelines|Google Pay brand guidelines}
 */
function addGooglePayButton() {
  const paymentsClient = getGooglePaymentsClient();
  const button =
      paymentsClient.createButton({
        onClick: onGooglePaymentButtonClicked,
        allowedPaymentMethods: [baseCardPaymentMethod]
      });
  document.getElementById('container').appendChild(button);
}

/**
 * Provide Google Pay API with a payment amount, currency, and amount status
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo}
 * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest
 */
function getGoogleTransactionInfo() {
  return {
    countryCode: 'US',
    currencyCode: 'USD',
    totalPriceStatus: 'FINAL',
    // set to cart total
    totalPrice: '1.00'
  };
}

/**
 * Prefetch payment data to improve performance
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/client#prefetchPaymentData|prefetchPaymentData()}
 */
function prefetchGooglePaymentData() {
  const paymentDataRequest = getGooglePaymentDataRequest();
  // transactionInfo must be set but does not affect cache
  paymentDataRequest.transactionInfo = {
    totalPriceStatus: 'NOT_CURRENTLY_KNOWN',
    currencyCode: 'USD'
  };
  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.prefetchPaymentData(paymentDataRequest);
}

/**
 * Show Google Pay payment sheet when Google Pay payment button is clicked
 */
function onGooglePaymentButtonClicked() {
  const paymentDataRequest = getGooglePaymentDataRequest();
  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();

  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.loadPaymentData(paymentDataRequest)
      .then(function(paymentData) {
        // handle the response
        processPayment(paymentData);
      })
      .catch(function(err) {
        // show error in developer console for debugging
        console.error(err);
      });
}
/**
 * Process payment data returned by the Google Pay API
 *
 * @param {object} paymentData response from Google Pay API after user approves payment
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentData|PaymentData object reference}
 */
function processPayment(paymentData) {
  // show returned data in developer console for debugging
    console.log(paymentData);
  // @todo pass payment token to your gateway to process payment
  paymentToken = paymentData.paymentMethodData.tokenizationData.token;
}</script>
<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()"></script>
<div id="container"></div>

<script>
/**
 * Define the version of the Google Pay API referenced when creating your
 * configuration
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|apiVersion in PaymentDataRequest}
 */
const baseRequest = {
  apiVersion: 2,
  apiVersionMinor: 0
};

/**
 * Card networks supported by your site and your gateway
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 * @todo confirm card networks supported by your site and gateway
 */
const allowedCardNetworks = ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"];

/**
 * Card authentication methods supported by your site and your gateway
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 * @todo confirm your processor supports Android device tokens for your
 * supported card networks
 */
const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];

/**
 * Identify your gateway and your site's gateway merchant identifier
 *
 * The Google Pay API response will return an encrypted payment method capable
 * of being charged by a supported gateway after payer authorization
 *
 * @todo check with your gateway on the parameters to pass
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway|PaymentMethodTokenizationSpecification}
 */
const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    'gateway': 'example',
    'gatewayMerchantId': 'exampleGatewayMerchantId'
  }
};

/**
 * Describe your site's support for the CARD payment method and its required
 * fields
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 */
const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedAuthMethods: allowedCardAuthMethods,
    allowedCardNetworks: allowedCardNetworks
  }
};

/**
 * Describe your site's support for the CARD payment method including optional
 * fields
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 */
const cardPaymentMethod = Object.assign(
  {},
  baseCardPaymentMethod,
  {
    tokenizationSpecification: tokenizationSpecification
  }
);

/**
 * An initialized google.payments.api.PaymentsClient object or null if not yet set
 *
 * @see {@link getGooglePaymentsClient}
 */
let paymentsClient = null;

/**
 * Configure your site's support for payment methods supported by the Google Pay
 * API.
 *
 * Each member of allowedPaymentMethods should contain only the required fields,
 * allowing reuse of this base request when determining a viewer's ability
 * to pay and later requesting a supported payment method
 *
 * @returns {object} Google Pay API version, payment methods supported by the site
 */
function getGoogleIsReadyToPayRequest() {
  return Object.assign(
      {},
      baseRequest,
      {
        allowedPaymentMethods: [baseCardPaymentMethod]
      }
  );
}

/**
 * Configure support for the Google Pay API
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|PaymentDataRequest}
 * @returns {object} PaymentDataRequest fields
 */
function getGooglePaymentDataRequest() {
  const paymentDataRequest = Object.assign({}, baseRequest);
  paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
  paymentDataRequest.merchantInfo = {
    // @todo a merchant ID is available for a production environment after approval by Google
    // See {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist|Integration checklist}
    // merchantId: '12345678901234567890',
    merchantName: 'Example Merchant'
  };

  paymentDataRequest.callbackIntents = ["PAYMENT_AUTHORIZATION"];

  return paymentDataRequest;
}

/**
 * Return an active PaymentsClient or initialize
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/client#PaymentsClient|PaymentsClient constructor}
 * @returns {google.payments.api.PaymentsClient} Google Pay API client
 */
function getGooglePaymentsClient() {
  if ( paymentsClient === null ) {
    paymentsClient = new google.payments.api.PaymentsClient({
    	environment: 'TEST',
      paymentDataCallbacks: {
      	onPaymentAuthorized: onPaymentAuthorized
      }
    });
  }
  return paymentsClient;
}

/**
 * Handles authorize payments callback intents.
 *
 * @param {object} paymentData response from Google Pay API after a payer approves payment through user gesture.
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentData object reference}
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentAuthorizationResult}
 * @returns Promise<{object}> Promise of PaymentAuthorizationResult object to acknowledge the payment authorization status.
 */
function onPaymentAuthorized(paymentData) {
	return new Promise(function(resolve, reject){
    // handle the response
    processPayment(paymentData)
    .then(function() {
      resolve({transactionState: 'SUCCESS'});
    })
    .catch(function() {
      resolve({
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      });
  	});
  });
}

/**
 * Initialize Google PaymentsClient after Google-hosted JavaScript has loaded
 *
 * Display a Google Pay payment button after confirmation of the viewer's
 * ability to pay.
 */
function onGooglePayLoaded() {
  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
      .then(function(response) {
        if (response.result) {
          addGooglePayButton();
        }
      })
      .catch(function(err) {
        // show error in developer console for debugging
        console.error(err);
      });
}

/**
 * Add a Google Pay purchase button alongside an existing checkout button
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ButtonOptions|Button options}
 * @see {@link https://developers.google.com/pay/api/web/guides/brand-guidelines|Google Pay brand guidelines}
 */
function addGooglePayButton() {
  const paymentsClient = getGooglePaymentsClient();
  const button =
      paymentsClient.createButton({
        onClick: onGooglePaymentButtonClicked,
        allowedPaymentMethods: [baseCardPaymentMethod]
      });
  document.getElementById('container').appendChild(button);
}

/**
 * Provide Google Pay API with a payment amount, currency, and amount status
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo}
 * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest
 */
function getGoogleTransactionInfo() {
  return {
        displayItems: [
        {
          label: "Subtotal",
          type: "SUBTOTAL",
          price: "11.00",
        },
      {
          label: "Tax",
          type: "TAX",
          price: "1.00",
        }
    ],
    countryCode: 'US',
    currencyCode: "USD",
    totalPriceStatus: "FINAL",
    totalPrice: "12.00",
    totalPriceLabel: "Total"
  };
}

/**
 * Show Google Pay payment sheet when Google Pay payment button is clicked
 */
function onGooglePaymentButtonClicked() {
  const paymentDataRequest = getGooglePaymentDataRequest();
  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();

  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.loadPaymentData(paymentDataRequest);
}

/**
 * Process payment data returned by the Google Pay API
 *
 * @param {object} paymentData response from Google Pay API after user approves payment
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentData|PaymentData object reference}
 */
function processPayment(paymentData) {
	return new Promise(function(resolve, reject) {
  	setTimeout(function() {
  		// @todo pass payment token to your gateway to process payment
  		paymentToken = paymentData.paymentMethodData.tokenizationData.token;

    	resolve({});
    }, 3000);
  });
}</script>
<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()"></script>
<div id="container"></div>

<script>
/**
 * Define the version of the Google Pay API referenced when creating your
 * configuration
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|apiVersion in PaymentDataRequest}
 */
const baseRequest = {
  apiVersion: 2,
  apiVersionMinor: 0
};

/**
 * Card networks supported by your site and your gateway
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 * @todo confirm card networks supported by your site and gateway
 */
const allowedCardNetworks = ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"];

/**
 * Card authentication methods supported by your site and your gateway
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 * @todo confirm your processor supports Android device tokens for your
 * supported card networks
 */
const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];

/**
 * Identify your gateway and your site's gateway merchant identifier
 *
 * The Google Pay API response will return an encrypted payment method capable
 * of being charged by a supported gateway after payer authorization
 *
 * @todo check with your gateway on the parameters to pass
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway|PaymentMethodTokenizationSpecification}
 */
const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    'gateway': 'example',
    'gatewayMerchantId': 'exampleGatewayMerchantId'
  }
};

/**
 * Describe your site's support for the CARD payment method and its required
 * fields
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 */
const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedAuthMethods: allowedCardAuthMethods,
    allowedCardNetworks: allowedCardNetworks
  }
};

/**
 * Describe your site's support for the CARD payment method including optional
 * fields
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 */
const cardPaymentMethod = Object.assign(
  {},
  baseCardPaymentMethod,
  {
    tokenizationSpecification: tokenizationSpecification
  }
);

/**
 * An initialized google.payments.api.PaymentsClient object or null if not yet set
 *
 * @see {@link getGooglePaymentsClient}
 */
let paymentsClient = null;

/**
 * Configure your site's support for payment methods supported by the Google Pay
 * API.
 *
 * Each member of allowedPaymentMethods should contain only the required fields,
 * allowing reuse of this base request when determining a viewer's ability
 * to pay and later requesting a supported payment method
 *
 * @returns {object} Google Pay API version, payment methods supported by the site
 */
function getGoogleIsReadyToPayRequest() {
  return Object.assign(
      {},
      baseRequest,
      {
        allowedPaymentMethods: [baseCardPaymentMethod]
      }
  );
}

/**
 * Configure support for the Google Pay API
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|PaymentDataRequest}
 * @returns {object} PaymentDataRequest fields
 */
function getGooglePaymentDataRequest() {
  const paymentDataRequest = Object.assign({}, baseRequest);
  paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
  paymentDataRequest.merchantInfo = {
    // @todo a merchant ID is available for a production environment after approval by Google
    // See {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist|Integration checklist}
    // merchantId: '12345678901234567890',
    merchantName: 'Example Merchant'
  };

  paymentDataRequest.callbackIntents = ["SHIPPING_ADDRESS",  "SHIPPING_OPTION", "PAYMENT_AUTHORIZATION"];
  paymentDataRequest.shippingAddressRequired = true;
  paymentDataRequest.shippingAddressParameters = getGoogleShippingAddressParameters();
  paymentDataRequest.shippingOptionRequired = true;

  return paymentDataRequest;
}

/**
 * Return an active PaymentsClient or initialize
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/client#PaymentsClient|PaymentsClient constructor}
 * @returns {google.payments.api.PaymentsClient} Google Pay API client
 */
function getGooglePaymentsClient() {
  if ( paymentsClient === null ) {
    paymentsClient = new google.payments.api.PaymentsClient({
      environment: "TEST",
      merchantInfo: {
        merchantName: "Example Merchant",
        merchantId: "01234567890123456789"
      },
      paymentDataCallbacks: {
      	onPaymentAuthorized: onPaymentAuthorized,
        onPaymentDataChanged: onPaymentDataChanged
      }
    });
  }
  return paymentsClient;
}

function onPaymentAuthorized(paymentData) {
	return new Promise(function(resolve, reject){

  // handle the response
  processPayment(paymentData)
    .then(function() {
      resolve({transactionState: 'SUCCESS'});
    })
    .catch(function() {
    	resolve({
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      });
    });

  });
}

/**
 * Handles dynamic buy flow shipping address and shipping options callback intents.
 *
 * @param {object} itermediatePaymentData response from Google Pay API a shipping address or shipping option is selected in the payment sheet.
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#IntermediatePaymentData|IntermediatePaymentData object reference}
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentDataRequestUpdate|PaymentDataRequestUpdate}
 * @returns Promise<{object}> Promise of PaymentDataRequestUpdate object to update the payment sheet.
 */
function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {

   	let shippingAddress = intermediatePaymentData.shippingAddress;
    let shippingOptionData = intermediatePaymentData.shippingOptionData;
    let paymentDataRequestUpdate = {};

    if (intermediatePaymentData.callbackTrigger == "INITIALIZE" || intermediatePaymentData.callbackTrigger == "SHIPPING_ADDRESS") {
      if(shippingAddress.administrativeArea == "NJ")  {
        paymentDataRequestUpdate.error = getGoogleUnserviceableAddressError();
      }
      else {
        paymentDataRequestUpdate.newShippingOptionParameters = getGoogleDefaultShippingOptions();
        let selectedShippingOptionId = paymentDataRequestUpdate.newShippingOptionParameters.defaultSelectedOptionId;
        paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(selectedShippingOptionId);
      }
    }
    else if (intermediatePaymentData.callbackTrigger == "SHIPPING_OPTION") {
      paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(shippingOptionData.id);
    }

    resolve(paymentDataRequestUpdate);
  });
}

/**
 * Helper function to create a new TransactionInfo object.

 * @param string shippingOptionId respresenting the selected shipping option in the payment sheet.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo}
 * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest
 */
function calculateNewTransactionInfo(shippingOptionId) {
        let newTransactionInfo = getGoogleTransactionInfo();

  let shippingCost = getShippingCosts()[shippingOptionId];
  newTransactionInfo.displayItems.push({
    type: "LINE_ITEM",
    label: "Shipping cost",
    price: shippingCost,
    status: "FINAL"
  });

  let totalPrice = 0.00;
  newTransactionInfo.displayItems.forEach(displayItem => totalPrice += parseFloat(displayItem.price));
  newTransactionInfo.totalPrice = totalPrice.toString();

  return newTransactionInfo;
}

/**
 * Initialize Google PaymentsClient after Google-hosted JavaScript has loaded
 *
 * Display a Google Pay payment button after confirmation of the viewer's
 * ability to pay.
 */
function onGooglePayLoaded() {
  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
      .then(function(response) {
        if (response.result) {
          addGooglePayButton();
          // @todo prefetch payment data to improve performance after confirming site functionality
          // prefetchGooglePaymentData();
        }
      })
      .catch(function(err) {
        // show error in developer console for debugging
        console.error(err);
      });
}

/**
 * Add a Google Pay purchase button alongside an existing checkout button
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ButtonOptions|Button options}
 * @see {@link https://developers.google.com/pay/api/web/guides/brand-guidelines|Google Pay brand guidelines}
 */
function addGooglePayButton() {
  const paymentsClient = getGooglePaymentsClient();
  const button =
      paymentsClient.createButton({
        onClick: onGooglePaymentButtonClicked,
        allowedPaymentMethods: [baseCardPaymentMethod]
      });
  document.getElementById('container').appendChild(button);
}

/**
 * Provide Google Pay API with a payment amount, currency, and amount status
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo}
 * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest
 */
function getGoogleTransactionInfo() {
  return {
        displayItems: [
        {
          label: "Subtotal",
          type: "SUBTOTAL",
          price: "11.00",
        },
      {
          label: "Tax",
          type: "TAX",
          price: "1.00",
        }
    ],
    countryCode: 'US',
    currencyCode: "USD",
    totalPriceStatus: "FINAL",
    totalPrice: "12.00",
    totalPriceLabel: "Total"
  };
}

/**
 * Provide a key value store for shippping options.
 */
function getShippingCosts() {
        return {
    "shipping-001": "0.00",
    "shipping-002": "1.99",
    "shipping-003": "10.00"
  }
}

/**
 * Provide Google Pay API with shipping address parameters when using dynamic buy flow.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ShippingAddressParameters|ShippingAddressParameters}
 * @returns {object} shipping address details, suitable for use as shippingAddressParameters property of PaymentDataRequest
 */
function getGoogleShippingAddressParameters() {
        return  {
        allowedCountryCodes: ['US'],
    phoneNumberRequired: true
  };
}

/**
 * Provide Google Pay API with shipping options and a default selected shipping option.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ShippingOptionParameters|ShippingOptionParameters}
 * @returns {object} shipping option parameters, suitable for use as shippingOptionParameters property of PaymentDataRequest
 */
function getGoogleDefaultShippingOptions() {
        return {
      defaultSelectedOptionId: "shipping-001",
      shippingOptions: [
        {
          "id": "shipping-001",
          "label": "Free: Standard shipping",
          "description": "Free Shipping delivered in 5 business days."
        },
        {
          "id": "shipping-002",
          "label": "$1.99: Standard shipping",
          "description": "Standard shipping delivered in 3 business days."
        },
        {
          "id": "shipping-003",
          "label": "$10: Express shipping",
          "description": "Express shipping delivered in 1 business day."
        },
      ]
  };
}

/**
 * Provide Google Pay API with a payment data error.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentDataError|PaymentDataError}
 * @returns {object} payment data error, suitable for use as error property of PaymentDataRequestUpdate
 */
function getGoogleUnserviceableAddressError() {
        return {
    reason: "SHIPPING_ADDRESS_UNSERVICEABLE",
    message: "Cannot ship to the selected address",
    intent: "SHIPPING_ADDRESS"
        };
}

/**
 * Prefetch payment data to improve performance
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/client#prefetchPaymentData|prefetchPaymentData()}
 */
function prefetchGooglePaymentData() {
  const paymentDataRequest = getGooglePaymentDataRequest();
  // transactionInfo must be set but does not affect cache
  paymentDataRequest.transactionInfo = {
    totalPriceStatus: 'NOT_CURRENTLY_KNOWN',
    currencyCode: 'USD'
  };
  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.prefetchPaymentData(paymentDataRequest);
}

/**
 * Show Google Pay payment sheet when Google Pay payment button is clicked
 */
function onGooglePaymentButtonClicked() {
  const paymentDataRequest = getGooglePaymentDataRequest();
  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();

  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.loadPaymentData(paymentDataRequest);
}

/**
 * Process payment data returned by the Google Pay API
 *
 * @param {object} paymentData response from Google Pay API after user approves payment
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentData|PaymentData object reference}
 */
function processPayment(paymentData) {
	return new Promise(function(resolve, reject) {
  	setTimeout(function() {
    	// show returned data in developer console for debugging
   	 console.log(paymentData);
  		// @todo pass payment token to your gateway to process payment
  		paymentToken = paymentData.paymentMethodData.tokenizationData.token;

    	resolve({});
    }, 3000);
  });
}</script>
<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()"></script>
<div id="container"></div>

<script>
/**
 * Please note: The Promo Code callback is extremely flexible. This example
 * implementation is only one of many ways to interface with it.
 *
 * In production, your promo codes and payment logic should be securely
 * processed on your server, not client-side as in this example. Use AJAX to
 * pass this information to the payment sheet.
 */

/**
 * Define the version of the Google Pay API referenced when creating your
 * configuration
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|apiVersion in PaymentDataRequest}
 */
const baseRequest = {
  apiVersion: 2,
  apiVersionMinor: 0
};

/**
 * Define valid promo code strings
 *
 * This object paradigm is not necessary to implement Promo Codes, but provides
 * an example of how to implement promo code behavior in a modular way.
 *
 * In production, your promo codes should be securely processed on your server,
 * not client-side as in this example.
 *
 * code: the way the promo code itself is displayed in the payment sheet
 * description: the description provided to the user on the payment sheet
 * function: the function used to calculate the price change
 * value: the value passed into the above function. This value should be
 * negative for a discount.
 */

const validPromoCodes = {
  SOMEPROMOCODE: {
    code: 'SOMEPROMOCODE',
    description: '20% off all products!',
    function: percentageDiscount,
    value: -20 // value should be negative for a discount
  },
  ANOTHERPROMOCODE: {
    code: 'ANOTHERPROMOCODE',
    description: '$5 dollars off!',
    function: staticDiscount,
    value: -5.00 // value should be negative for a discount
  }
}

/**
 * Card networks supported by your site and your gateway
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 * @todo confirm card networks supported by your site and gateway
 */
const allowedCardNetworks = ['AMEX', 'DISCOVER', 'JCB', 'MASTERCARD', 'VISA'];

/**
 * Card authentication methods supported by your site and your gateway
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 * @todo confirm your processor supports Android device tokens for your
 * supported card networks
 */
const allowedCardAuthMethods = ['PAN_ONLY', 'CRYPTOGRAM_3DS'];

/**
 * Identify your gateway and your site's gateway merchant identifier
 *
 * The Google Pay API response will return an encrypted payment method capable
 * of being charged by a supported gateway after payer authorization
 *
 * @todo check with your gateway on the parameters to pass
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#gateway|PaymentMethodTokenizationSpecification}
 */
const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    gateway: 'example',
    gatewayMerchantId: 'exampleGatewayMerchantId'
  }
};

/**
 * Describe your site's support for the CARD payment method and its required
 * fields
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 */
const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedAuthMethods: allowedCardAuthMethods,
    allowedCardNetworks: allowedCardNetworks
  }
};

/**
 * Describe your site's support for the CARD payment method including optional
 * fields
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#CardParameters|CardParameters}
 */
const cardPaymentMethod = Object.assign(
  {},
  baseCardPaymentMethod,
  {
    tokenizationSpecification: tokenizationSpecification
  }
);

/**
 * An initialized google.payments.api.PaymentsClient object or null if not yet set
 *
 * @see {@link getGooglePaymentsClient}
 */
let paymentsClient = null;

/**
 * Configure your site's support for payment methods supported by the Google Pay
 * API.
 *
 * Each member of allowedPaymentMethods should contain only the required fields,
 * allowing reuse of this base request when determining a viewer's ability
 * to pay and later requesting a supported payment method
 *
 * @returns {object} Google Pay API version, payment methods supported by the site
 */
function getGoogleIsReadyToPayRequest() {
  return Object.assign(
      {},
      baseRequest,
      {
        allowedPaymentMethods: [baseCardPaymentMethod]
      }
  );
}

/**
 * Configure support for the Google Pay API
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#PaymentDataRequest|PaymentDataRequest}
 * @returns {object} PaymentDataRequest fields
 */
function getGooglePaymentDataRequest() {
  const paymentDataRequest = Object.assign({}, baseRequest);
  paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
  paymentDataRequest.merchantInfo = {
    // @todo a merchant ID is available for a production environment after approval by Google
    // See {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist|Integration checklist}
    // merchantId: '12345678901234567890',
    merchantName: 'Example Merchant'
  };

  paymentDataRequest.callbackIntents = ['OFFER'];
  paymentDataRequest.shippingAddressRequired = false;
  paymentDataRequest.shippingAddressParameters = getGoogleShippingAddressParameters();

  return paymentDataRequest;
}

/**
 * Return an active PaymentsClient or initialize
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/client#PaymentsClient|PaymentsClient constructor}
 * @returns {google.payments.api.PaymentsClient} Google Pay API client
 */
function getGooglePaymentsClient() {
  if ( paymentsClient === null ) {
    paymentsClient = new google.payments.api.PaymentsClient({
      environment: 'TEST',
      merchantInfo: {
        merchantName: 'Example Merchant',
        merchantId: '01234567890123456789'
      },
      paymentDataCallbacks: {
        onPaymentDataChanged: onPaymentDataChanged
      }
    });
  }
  return paymentsClient;
}

/**
 * These functions handle adding valid promo codes to the payment sheet
 * as well as adjusting the display items to match.
 *
 * To add a new promo code, create a new function per this template
 * and define it as valid in the onPaymentDataChanged function.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentDataRequestUpdate|PaymentDataRequestUpdate}
 * @param {string} redemptionCode string representing the promo code to apply
 * @param {string} description string representing the description to show
 * @param {int} discountPercentage int representing the percentage to discount.
 * Please note the discount value should be negative. Ex: -20 = 20% discount.
 * @param {object} PaymentDataRequestUpdate object representing
 * the current state of the payment data request.
 * @returns {object} PaymentDataRequestUpdate object to update the
 * payment sheet with new transaction info and offer data.
 */

function percentageDiscount(promoParameters, paymentDataRequestUpdate) {
  // set variables
  let originalTransactionInfo = getGoogleTransactionInfo();
  /* because this promo code calculates a % of original prices,
   * we need to get the original transaction info */
  let newTransactionInfo = paymentDataRequestUpdate.newTransactionInfo;
  let discount = 0;

    // update promo code and description
  paymentDataRequestUpdate.newOfferInfo.offers.push({
    redemptionCode: promoParameters['code'],
    description: promoParameters['description']
  });

  // calculate discount (from original transaction items only)
  originalTransactionInfo.displayItems.forEach(function(displayItem) {
    discount += parseFloat(displayItem.price) * promoParameters['value'] * 0.01;
  });

  // add displayItem with new discount
  newTransactionInfo.displayItems.push({
      label: promoParameters['code'],
      price: discount.toFixed(2),
      type: 'LINE_ITEM'
  });

  return paymentDataRequestUpdate;
}

function staticDiscount(promoParameters, paymentDataRequestUpdate) {
  // set variables
  let newTransactionInfo = paymentDataRequestUpdate.newTransactionInfo;

    // update promo code and description
  paymentDataRequestUpdate.newOfferInfo.offers.push({
    redemptionCode: promoParameters['code'],
    description: promoParameters['description']
  });

  // add displayItem with new discount
  newTransactionInfo.displayItems.push({
      label: promoParameters['code'],
      price: promoParameters['value'].toFixed(2),
      type: 'LINE_ITEM'
  });

  return paymentDataRequestUpdate;
}

/**
 * Handles offer callback intents.
 *
 * @param {object} itermediatePaymentData response from Google Pay API when a promo code is entered in the google pay payment sheet.
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#IntermediatePaymentData|IntermediatePaymentData object reference}
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentDataRequestUpdate|PaymentDataRequestUpdate}
 * @returns Promise<{object}> Promise of PaymentDataRequestUpdate object to update the payment sheet with new transaction info and offer data.
 */
function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {

    let redemptionCodes = new Set();
    let shippingOptionData = intermediatePaymentData.shippingOptionData;
    let paymentDataRequestUpdate = {};
    paymentDataRequestUpdate.newTransactionInfo = getGoogleTransactionInfo();

    // ensure that promo codes set is unique
    if(typeof intermediatePaymentData.offerData != 'undefined') {
      redemptionCodes = new Set(intermediatePaymentData.offerData.redemptionCodes);
    }

    // validate promo codes and add descriptions to payment sheet
    if (intermediatePaymentData.callbackTrigger === 'OFFER') {
      paymentDataRequestUpdate.newOfferInfo = {};
      paymentDataRequestUpdate.newOfferInfo.offers = [];
      for (redemptionCode of redemptionCodes) {
        if (validPromoCodes[redemptionCode]) {
          paymentDataRequestUpdate = validPromoCodes[redemptionCode].function(
            validPromoCodes[redemptionCode],
            paymentDataRequestUpdate
          );
        } else {
          paymentDataRequestUpdate.error = getGoogleOfferInvalidError(redemptionCode);
        }
      }
    }
    /**
     * Update item costs and total.
     *
     * In production, this final calculation should always be calculated
     * server-side to ensure it matches the price that the merchant sends to the
     * processor.
     */
    paymentDataRequestUpdate.newTransactionInfo = calculateNewTransactionInfo(
      paymentDataRequestUpdate.newTransactionInfo
    )

    resolve(paymentDataRequestUpdate);
  });
}

/**
 * Helper function to update the TransactionInfo object.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo}
 * @param {object} transactionInfo respresenting the selected shipping option in the payment sheet.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo}
 * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest
 */
function calculateNewTransactionInfo(newTransactionInfo) {
  // calculate the new totalPrice from display items
  let totalPrice = 0.00;
  newTransactionInfo.displayItems.forEach(
    function(displayItem) {
      totalPrice += parseFloat(displayItem.price);
    }
  );
  // Note: newTransactionInfo.totalPrice must be a string
  newTransactionInfo.totalPrice = totalPrice.toFixed(2);

  return newTransactionInfo;
}

/**
 * Initialize Google PaymentsClient after Google-hosted JavaScript has loaded
 *
 * Display a Google Pay payment button after confirmation of the viewer's
 * ability to pay.
 */
function onGooglePayLoaded() {
  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
      .then(function(response) {
        if (response.result) {
          addGooglePayButton();
          // @todo prefetch payment data to improve performance after confirming site functionality
          // prefetchGooglePaymentData();
        }
      })
      .catch(function(err) {
        // show error in developer console for debugging
        console.error(err);
      });
}

/**
 * Add a Google Pay purchase button alongside an existing checkout button
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ButtonOptions|Button options}
 * @see {@link https://developers.google.com/pay/api/web/guides/brand-guidelines|Google Pay brand guidelines}
 */
function addGooglePayButton() {
  const paymentsClient = getGooglePaymentsClient();
  const button =
      paymentsClient.createButton({
        onClick: onGooglePaymentButtonClicked,
        allowedPaymentMethods: [baseCardPaymentMethod]
      });
  document.getElementById('container').appendChild(button);
}

/**
 * Provide Google Pay API with a payment amount, currency, and amount status
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#TransactionInfo|TransactionInfo}
 * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest
 */
function getGoogleTransactionInfo() {
  return {
        displayItems: [
        {
          label: 'Subtotal',
          type: 'SUBTOTAL',
          price: '11.00',
          status: 'FINAL'
        },
        {
          label: 'Tax',
          type: 'TAX',
          price: '1.00'
        }
    ],
    currencyCode: 'USD',
    totalPriceStatus: 'FINAL',
    totalPrice: '12.00',
    totalPriceLabel: 'Total'
  };
}

/**
 * Provide Google Pay API with shipping address parameters.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/request-objects#ShippingAddressParameters|ShippingAddressParameters}
 * @returns {object} shipping address details, suitable for use as shippingAddressParameters property of PaymentDataRequest
 */
function getGoogleShippingAddressParameters() {
        return  {
        allowedCountryCodes: ['US', 'UK', 'FR', 'CA', 'MX', 'GA'],
    phoneNumberRequired: false
  };
}

/**
 * Provide Google Pay API with an invalid offer error.
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentDataError|PaymentDataError}
 * @returns {object} payment data error, suitable for use as error property of PaymentDataRequestUpdate
 */
function getGoogleOfferInvalidError(redemptionCode) {
        return {
    reason: 'OFFER_INVALID',
    message: redemptionCode + ' is not a valid promo code.',
    intent: 'OFFER'
        };
}

/**
 * Prefetch payment data to improve performance
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/client#prefetchPaymentData|prefetchPaymentData()}
 */
function prefetchGooglePaymentData() {
  const paymentDataRequest = getGooglePaymentDataRequest();
  // transactionInfo must be set but does not affect cache
  paymentDataRequest.transactionInfo = {
    totalPriceStatus: 'NOT_CURRENTLY_KNOWN',
    currencyCode: 'USD'
  };
  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.prefetchPaymentData(paymentDataRequest);
}

/**
 * Show Google Pay payment sheet when Google Pay payment button is clicked
 */
function onGooglePaymentButtonClicked() {
  const paymentDataRequest = getGooglePaymentDataRequest();
  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();

  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.loadPaymentData(paymentDataRequest)
      .then(function(paymentData) {
        // handle the response
        processPayment(paymentData);
      })
      .catch(function(err) {
        // show error in developer console for debugging
        console.error(err);
      });
}

/**
 * Process payment data returned by the Google Pay API
 * In a production environment, this function should always be implemented
 * server-side.
 *
 * @param {object} paymentData response from Google Pay API after user approves payment
 * @see {@link https://developers.google.com/pay/api/web/reference/response-objects#PaymentData|PaymentData object reference}
 */
function processPayment(paymentData) {
  // show returned data in developer console for debugging
    console.log(paymentData);
  // @todo pass payment token to your gateway to process payment
  paymentToken = paymentData.paymentMethodData.tokenizationData.token;
}</script>
<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()"></script>