<!-- スクリプトを読み込んで実行 -->
<script
  async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()">
</script>

function getGooglePaymentsClient() {
  if (paymentsClient === null) {
    // PaymentsClient のインスタンスを生成
    paymentsClient = new google.payments.api.PaymentsClient({
      environment: 'TEST',  // テスト用のフラグ
      paymentDataCallbacks: {
        onPaymentAuthorized: onPaymentAuthorized,
      },
    })
  }
  return paymentsClient
}

// お支払い方法
const baseCardPaymentMethod = {
  type: 'CARD', // 'PAYPAL' も使えるっぽい
  parameters: {
    allowedAuthMethods: allowedCardAuthMethods,
    allowedCardNetworks: allowedCardNetworks,
  },
}

// サポートされているクレジットカード
const allowedCardNetworks = [
  'AMEX',
  'JCB',
  'MASTERCARD',
  'VISA',
]

// 決済代行会社へのリクエスト
const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    gateway: 'example',
    gatewayMerchantId: 'exampleGatewayMerchantId',
  },
}

function getGooglePaymentDataRequest() {
  paymentDataRequest.merchantInfo = {
    merchantId: '12345678901234567890',  // 販売者ID
    merchantName: 'サンプルショップ',  // 販売店
  }
}

// 支払い金額、通貨、金額ステータス
function getGoogleTransactionInfo() {
  return {
    displayItems: [
      {
        label: '小計',
        type: 'SUBTOTAL',
        price: '1000',
      },
      {
        label: '消費税',
        type: 'TAX',
        price: '100',
      },
    ],
    countryCode: 'JP',
    currencyCode: 'JPY',
    totalPriceStatus: 'FINAL',
    totalPrice: '1100',
    totalPriceLabel: '合計',
  }
}