Google Pay API PaymentRequest-Anleitung

Die Google Pay API kann in PaymentRequest in Verbindung mit anderen unterstützten Zahlungsmethoden verwendet werden.

Schritt 1: PaymentDataRequest-Objekt erstellen

Konfigurieren Sie ein PaymentDataRequest-Objekt, in dem Ihr Zahlungs-Gateway und die akzeptierten Zahlungsmethoden angegeben sind. Wir empfehlen Ihnen, die Versandadresse, E‑Mail-Adresse und Telefonnummer über das PaymentRequest-Argument des Browsers und nicht über die Google Pay API abzurufen, um die Konsistenz zwischen den Zahlungsmethoden zu gewährleisten.options Mit der Google Pay API erhalten Sie nur die Zahlungsanmeldedaten und optional die Rechnungsadresse.

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: '12345678901234567890',
    merchantName: 'Example Merchant'
  },
  allowedPaymentMethods: [{
    type: 'CARD',
    parameters: {
      allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
      allowedCardNetworks: ["AMEX", "DISCOVER", "INTERAC", "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/request-objects#gateway}
      parameters: {
        'gateway': 'example',
        'gatewayMerchantId': 'exampleGatewayMerchantId'
      }
    }
  }]
};

Schritt 2: Unterstützung der Google Pay API deklarieren

Fügen Sie dem Parameter methodData, der an PaymentRequest übergeben wird, die Kennung der Google Pay API-Zahlungsmethode und ihre Konfiguration hinzu.

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

Der Ablauf von „TFT“-Matches

Im folgenden Beispiel sehen Sie eine Implementierung der Google Pay API mit anderen unterstützten Zahlungsmethoden in PaymentRequest:

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

<script>
const allowedCardNetworks = ["AMEX", "DISCOVER", "INTERAC", "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':'12345678901234567890',
      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/request-objects#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()
  }];

  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>

Parameterliste für Zahlungsmethoden

Die in PaymentRequest übergebene Google Pay API-Konfiguration ähnelt dem Objekt PaymentDataRequest, das von der Google Pay API-Clientbibliothek für JavaScript verwendet wird, mit einigen Ausnahmen:

  • Für das Objekt, das mit einem Stringwert übereinstimmt, der in PaymentOptions beschrieben wird, sollte eine environment-Eigenschaft festgelegt werden.
  • Das Attribut transactionInfo sollte weggelassen werden. Der Gesamtpreis und die Währung sollten stattdessen im details-Argument angegeben werden, das an PaymentRequest übergeben wird.

Zusätzliche Objekteigenschaften, die für die Google Pay API-Zahlungsmethode in der Eigenschaft „PaymentRequest“ für Zahlungsmethodendaten angegeben sind:

Attribut Typ Notwendigkeit Beschreibung
environment String optional
  • PRODUCTION: Geben Sie gebührenpflichtige Zahlungsmethoden zurück, wenn eine gültige Google-Händler-ID angegeben und für die Domain konfiguriert ist.
  • TEST: Zurückgegebene Dummy-Zahlungsmethoden, die für Tests geeignet sind (Standard)