Tutorial pentru cererea de plată API Google Pay

API-ul Google Pay poate fi utilizat împreună cu alte metode de plată acceptate în PaymentRequest .

Pasul 1: Creați un obiect PaymentDataRequest

Configurați un obiect PaymentDataRequest specificând gateway-ul de plată și metodele de plată acceptate. Vă recomandăm să obțineți adresa de livrare, adresa de e-mail și numărul de telefon prin intermediul argumentului options PaymentRequest din browser, nu prin API-ul Google Pay, pentru consecvență între metodele de plată. Folosiți API-ul Google Pay pentru a primi doar datele de autentificare pentru plată și adresa de facturare opțională.

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'
      }
    }
  }]
};

Pasul 2: Declarați compatibilitatea cu API-ul Google Pay

Adăugați identificatorul metodei de plată API-ul Google Pay și configurația sa la parametrul methodData transmis către PaymentRequest .

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

Punând totul cap la cap

Următorul exemplu prezintă o implementare a API-ului Google Pay cu alte metode de plată acceptate în 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>

Lista parametrilor metodei de plată

Configurația API-ului Google Pay transmisă în PaymentRequest este similară cu obiectul PaymentDataRequest utilizat de biblioteca client JavaScript a API-ului Google Pay, cu câteva excepții:

  • O proprietate environment ar trebui setată pentru obiectul care corespunde unei valori șir descrise în PaymentOptions
  • Proprietatea transactionInfo ar trebui omisă. Prețul total și moneda ar trebui specificate în argumentul details transmis către PaymentRequest

Proprietăți suplimentare ale obiectului specificate pentru metoda de plată Google Pay API într-o proprietate de date a metodei de plată PaymentRequest :

Proprietate Tip Necesitate Descriere
environment şir opțional
  • PRODUCTION : returnează metode de plată taxabile atunci când este specificat și configurat un ID de comerciant Google valid pentru domeniu
  • TEST : metode de plată fictive returnate potrivite pentru testare (implicit)