Tutoriel sur l'API Google Pay PaymentRequest

L'API Google Pay peut être utilisée conjointement avec d'autres modes de paiement acceptés dans PaymentRequest.

Étape 1 : Créez un objet PaymentDataRequest

Configurez un objet PaymentDataRequest spécifiant votre passerelle de paiement et les modes de paiement acceptés. Nous vous recommandons d'obtenir l'adresse de livraison, l'adresse e-mail et le numéro de téléphone via l'argument PaymentRequest options du navigateur, et non via l'API Google Pay, pour assurer la cohérence entre les modes de paiement. Utilisez l'API Google Pay pour ne recevoir que les identifiants de paiement et l'adresse de facturation facultative.

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

Étape 2 : Déclarez la compatibilité avec l'API Google Pay

Ajoutez l'identifiant du mode de paiement de l'API Google Pay et sa configuration au paramètre methodData transmis à PaymentRequest.

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

Synthèse

L'exemple suivant montre une implémentation de l'API Google Pay avec d'autres modes de paiement acceptés dans 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>

Liste des paramètres des modes de paiement

La configuration de l'API Google Pay transmise dans PaymentRequest est semblable à l'objet PaymentDataRequest utilisé par la bibliothèque cliente JavaScript de l'API Google Pay, à quelques exceptions près :

  • Une propriété environment doit être définie sur l'objet correspondant à une valeur de chaîne décrite dans PaymentOptions.
  • La propriété transactionInfo doit être omise. Le prix total et la devise doivent plutôt être spécifiés dans l'argument details transmis à PaymentRequest.

Propriétés d'objet supplémentaires spécifiées pour le mode de paiement de l'API Google Pay dans une propriété de données de mode de paiement PaymentRequest :

Propriété Type Nécessité Description
environment chaîne facultatif
  • PRODUCTION : renvoie les modes de paiement payants lorsqu'un ID de marchand Google valide est spécifié et configuré pour le domaine.
  • TEST : méthodes de paiement fictives renvoyées pour les tests (par défaut)