このサイトの更新には時間がかかる場合があります。最新の情報については、英語版サイトをご確認ください。

Google Pay API PaymentRequest チュートリアル

PaymentRequest では、サポートされている他のお支払い方法と組み合わせて Google Pay API を使用できます。

手順 1: PaymentDataRequest オブジェクトを作成する

支払いゲートウェイと承認済みのお支払い方法を指定して PaymentDataRequest オブジェクトを構成します。複数のお支払い方法で一貫性を保つため、Google Pay API ではなくブラウザの PaymentRequest options 引数を使用して、配送先住所、メールアドレス、電話番号を取得することをおすすめします。お支払いの認証情報とオプションの請求先住所のみを受信する場合には、Google Pay API を使用してください。

const googlePaymentDataRequest = {
  environment: 'TEST',
  apiVersion: 2,
  apiVersionMinor: 0,
  merchantInfo: {
    // A merchant ID is available after approval by Google.
    // @see {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist}
    // merchantId: '01234567890123456789',
    merchantName: 'Example Merchant'
  },
  allowedPaymentMethods: [{
    type: 'CARD',
    parameters: {
      allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
      allowedCardNetworks: ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"]
    },
    tokenizationSpecification: {
      type: 'PAYMENT_GATEWAY',
      // Check with your payment gateway on the parameters to pass.
      // @see {@link https://developers.google.com/pay/api/web/reference/object#Gateway}
      parameters: {
        'gateway': 'example',
        'gatewayMerchantId': 'exampleGatewayMerchantId'
      }
    }
  }]
};

手順 2:Google Pay API のサポートを宣言する

Google Pay API のお支払い方法の ID とその構成を methodData パラメータに追加し、PaymentRequest に渡します。

const methodData = [
  {supportedMethods: 'https://google.com/pay', data: googlePaymentDataRequest},
  {supportedMethods: 'basic-card'}
];

まとめ

次の例では、PaymentRequest でサポートされている他のお支払い方法と一緒に Google Pay API を実装しています。

<div id="checkout">
  <button id="buyButton">Checkout</button>
</div>

<script>
const allowedCardNetworks = ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"];
const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];

if (window.PaymentRequest) {
  const request = createPaymentRequest();

  request.canMakePayment()
      .then(function(result) {
        if (result) {
          // Display PaymentRequest dialog on interaction with the existing checkout button
          document.getElementById('buyButton')
              .addEventListener('click', onBuyClicked);
        }
      })
      .catch(function(err) {
        showErrorForDebugging(
            'canMakePayment() error! ' + err.name + ' error: ' + err.message);
      });
} else {
  showErrorForDebugging('PaymentRequest API not available.');
}

/**
 * Show a PaymentRequest dialog after a user clicks the checkout button
 */
function onBuyClicked() {
  createPaymentRequest()
      .show()
      .then(function(response) {
        // Dismiss payment dialog.
        response.complete('success');
        handlePaymentResponse(response);
      })
      .catch(function(err) {
        showErrorForDebugging(
            'show() error! ' + err.name + ' error: ' + err.message);
      });
}

/**
 * Define your unique Google Pay API configuration
 *
 * @returns {object} data attribute suitable for PaymentMethodData
 */
function getGooglePaymentsConfiguration() {
  return {
    environment: 'TEST',
    apiVersion: 2,
    apiVersionMinor: 0,
    merchantInfo: {
      // A merchant ID is available after approval by Google.
      // 'merchantId':'01234567890123456789',
      merchantName: 'Example Merchant'
    },
    allowedPaymentMethods: [{
      type: 'CARD',
      parameters: {
        allowedAuthMethods: allowedCardAuthMethods,
        allowedCardNetworks: allowedCardNetworks
      },
      tokenizationSpecification: {
        type: 'PAYMENT_GATEWAY',
        // Check with your payment gateway on the parameters to pass.
        // @see {@link https://developers.google.com/pay/api/web/reference/object#Gateway}
        parameters: {
          'gateway': 'example',
          'gatewayMerchantId': 'exampleGatewayMerchantId'
        }
      }
    }]
  };
}

/**
 * Create a PaymentRequest
 *
 * @returns {PaymentRequest}
 */
function createPaymentRequest() {
  // Add support for the Google Pay API.
  const methodData = [{
    supportedMethods: 'https://google.com/pay',
    data: getGooglePaymentsConfiguration()
  }];
  // Add other supported payment methods.
  methodData.push({
    supportedMethods: 'basic-card',
    data: {
      supportedNetworks:
          Array.from(allowedCardNetworks, (network) => network.toLowerCase())
    }
  });

  const details = {
    total: {label: 'Test Purchase', amount: {currency: 'USD', value: '1.00'}}
  };

  const options = {
    requestPayerEmail: true,
    requestPayerName: true
  };

  return new PaymentRequest(methodData, details, options);
}

/**
 * Process a PaymentResponse
 *
 * @param {PaymentResponse} response returned when a user approves the payment request
 */
function handlePaymentResponse(response) {
  const formattedResponse = document.createElement('pre');
  formattedResponse.appendChild(
      document.createTextNode(JSON.stringify(response.toJSON(), null, 2)));
  document.getElementById('checkout')
      .insertAdjacentElement('afterend', formattedResponse);
}

/**
 * Display an error message for debugging
 *
 * @param {string} text message to display
 */
function showErrorForDebugging(text) {
  const errorDisplay = document.createElement('code');
  errorDisplay.style.color = 'red';
  errorDisplay.appendChild(document.createTextNode(text));
  const p = document.createElement('p');
  p.appendChild(errorDisplay);
  document.getElementById('checkout').insertAdjacentElement('afterend', p);
}

</script>

お支払い方法のパラメータ一覧

PaymentRequest で渡される Google Pay API の構成は、Google Pay API JavaScript クライアント ライブラリで使用される PaymentDataRequest オブジェクトと似ていますが、次の点が異なります。

  • PaymentOptions で記述された文字列値に一致するオブジェクトに environment プロパティを設定します。
  • transactionInfo プロパティは省略します。代わりに、PaymentRequest に渡される details 引数に合計金額と通貨を指定します。

PaymentRequest のお支払い方法のデータ プロパティで Google Pay API のお支払い方法に指定する他のオブジェクト プロパティ:

プロパティ 必須/オプション 説明
environment 文字列 オプション
  • PRODUCTION: 有効な Google 販売者 ID が指定され、ドメイン用に設定された場合に、請求可能なお支払い方法を返します。
  • TEST: テスト用に返されるダミーのお支払い方法(デフォルト)