Сведения на этой странице могут быть устаревшими. Чтобы узнать актуальную информацию, перейдите на английскую версию сайта.

Руководство пользователя

Из этого руководства вы узнаете, как интегрировать веб-приложение с Google Pay API и настроить его для поддержки платежных карт.

Шаг 1. Укажите версию Google Pay API

Укажите версию Google Pay API, используемую на вашем сайте. Старшая и младшая версии указываются в ответе и влияют на то, какой набор полей будет проверяться во всех объектах.

const baseRequest = {
  apiVersion: 2,
  apiVersionMinor: 0
};

Шаг 2. Выберите способ токенизации

Компания Google шифрует информацию о выбранной карте покупателя, чтобы обеспечить безопасную обработку данных в шлюзе или на безопасных серверах продавца. Примеры приведены ниже.

Шлюз

const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    'gateway': 'example',
    'gatewayMerchantId': 'exampleGatewayMerchantId'
  }
};

Замените example на идентификатор поддерживаемого Google шлюза, а exampleGatewayMerchantId – на предоставленный шлюзом уникальный идентификатор продавца.

Подробную информацию о поддерживаемых шлюзах и уникальных идентификаторах можно найти в разделе Справочная документация о токенизации шлюзов. PAYMENT_GATEWAY – наиболее распространенный способ внедрения Google Pay API для оплаты кредитной картой.

Серверы

const tokenizationSpecification = {
  "type": "DIRECT",
  "parameters": {
    "protocolVersion": "ECv1",
    "publicKey": "BOdoXP1aiNp.....kh3JUhiSZKHYF2Y="
  }
}

Замените сокращенное значение параметра publicKey на открытый ключ, который вы указали в профиле разработчика Google Pay, чтобы получить зашифрованные платежные данные. Более подробную информацию о настройке шифровальных ключей для Google Pay API можно найти в документации по криптографии платежных данных.

Шаг 3. Задайте поддерживаемые платежные системы

Выберите поддерживаемые вашим сайтом платежные системы.

const allowedCardNetworks = ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"];

Google Pay API может показать результаты поиска карт в архивах Google.com (PAN_ONLY) и/или токенов на устройстве Android, аутентифицированном с помощью криптограммы 3-D Secure (CRYPTOGRAM_3DS).

const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];

Дополнительную информацию можно найти здесь. Список поддерживаемых платежных систем и токенов для устройств Android можно получить через шлюз или с помощью обработчика платежей.

Шаг 4. Укажите поддерживаемые способы оплаты

Чтобы задать на сайте поддерживаемый способ оплаты CARD, укажите поддерживаемые методы аутентификации и платежные системы.

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedAuthMethods: allowedCardAuthMethods,
    allowedCardNetworks: allowedCardNetworks
  }
};

Расширьте объект базового способа оплаты кредитной картой, чтобы указать, какая информация (включая токенизированные платежные данные) должна возвращаться в приложение.

const cardPaymentMethod = Object.assign(
  {tokenizationSpecification: tokenizationSpecification},
  baseCardPaymentMethod
);

Подробную информацию о поддерживаемых параметрах parameters можно найти в описании объекта CardParameters.

Шаг 5. Загрузите библиотеку JavaScript для Google Pay API

Добавьте в нее поддерживаемый Google JavaScript с вашего сайта.

<script
  async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="console.log('TODO: add onload function')">
</script>

Инициализируйте объект PaymentsClient после загрузки библиотеки JavaScript для Google Pay API. На начальных этапах разработки будет использоваться среда TEST, имитирующая структуру реакции на платеж и использующая пробные способы оплаты, с помощью которых будет невозможно отправить средства. Ознакомьтесь с подробной информацией о требованиях для среды PRODUCTION, использующей действительные способы оплаты, в разделе Контрольный список для интеграции.

const paymentsClient =
    new google.payments.api.PaymentsClient({environment: 'TEST'});

Шаг 6. Определите готовность к оплате с помощью Google Pay API

Добавьте разрешенные способы оплаты в базовый объект запроса.

const isReadyToPayRequest = Object.assign({}, baseRequest);
isReadyToPayRequest.allowedPaymentMethods = [baseCardPaymentMethod];

Используйте параметр isReadyToPay(), чтобы узнать, поддерживается ли Google Pay API устройством/браузером и указанными способами оплаты.

paymentsClient.isReadyToPay(isReadyToPayRequest)
    .then(function(response) {
      if (response.result) {
        // add a Google Pay payment button
      }
    })
    .catch(function(err) {
      // show error in developer console for debugging
      console.error(err);
    });

Шаг 7. Добавьте кнопку оплаты с помощью Google Pay

Добавьте кнопку оплаты с помощью Google Pay на ваш сайт, чтобы покупатели могли выбрать способ платежа, поддерживаемый Google Pay API и сайтом. Более подробную информацию о доступных типах кнопок, цветах и требованиях к отображению на экранах можно найти в разделе Правила использования бренда.

const button =
    paymentsClient.createButton({onClick: () => console.log('TODO: click handler')});
document.getElementById('container').appendChild(button);

Шаг 8. Создайте объект PaymentDataRequest

Создайте объект JavaScript с информацией о поддержке вашим сайтом Google Pay API. Полный список поддерживаемых ресурсов можно найти в разделе PaymentDataRequest.

const paymentDataRequest = Object.assign({}, baseRequest);

Добавьте способы оплаты, поддерживаемые вашим приложением, с указанием конфигураций дополнительных данных, ожидаемых в ответе.

paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];

Выберите общую цену и валюту для авторизации покупателя.

paymentDataRequest.transactionInfo = {
  totalPriceStatus: 'FINAL',
  totalPrice: '123.45',
  currencyCode: 'USD'
};

Укажите название продавца для пользователей. Дополнительную информацию можно найти в разделе MerchantInfo.

paymentDataRequest.merchantInfo = {
  merchantName: 'Example Merchant'
};

Шаг 9. Настройте обработчик жестов пользователей

Настройте обработчик жестов для мгновенного вызова loadPaymentData() после нажатия кнопки оплаты с помощью Google Pay.

Проверьте реакцию Google Pay API, после того как пользователь предоставил вашему сайту доступ к информации о выбранном способе оплаты и контактным данным.

paymentsClient.loadPaymentData(paymentDataRequest).then(function(paymentData){
  // process paymentData
}).catch(function(err){
  // show error in developer console for debugging
  console.error(err);
});

Шаг 10. Создайте выборку платежных данных до взаимодействия пользователя с приложением (необязательно)

Создайте выборку платежных конфигураций вашего сайта из Google Pay API, прежде чем использовать параметр loadPaymentData(), чтобы сократить время оформления платежа.

paymentsClient.prefetchPaymentData(paymentDataRequest);

Выводы

Далее представлен полный пример интеграции с использованием библиотеки JavaScript для Google Pay API.

<div id="container"></div>

<script>
/**
 * Define the version of the Google Pay API referenced when creating your
 * configuration
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/object#PaymentDataRequest|apiVersion in PaymentDataRequest}
 */
const baseRequest = {
  apiVersion: 2,
  apiVersionMinor: 0
};

/**
 * Card networks supported by your site and your gateway
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/object#CardParameters|CardParameters}
 * @todo confirm card networks supported by your site and gateway
 */
const allowedCardNetworks = ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"];

/**
 * Card authentication methods supported by your site and your gateway
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/object#CardParameters|CardParameters}
 * @todo confirm your processor supports Android device tokens for your
 * supported card networks
 */
const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];

/**
 * Identify your gateway and your site's gateway merchant identifier
 *
 * The Google Pay API response will return an encrypted payment method capable
 * of being charged by a supported gateway after payer authorization
 *
 * @todo check with your gateway on the parameters to pass
 * @see {@link https://developers.google.com/pay/api/web/reference/object#Gateway|PaymentMethodTokenizationSpecification}
 */
const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    'gateway': 'example',
    'gatewayMerchantId': 'exampleGatewayMerchantId'
  }
};

/**
 * Describe your site's support for the CARD payment method and its required
 * fields
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/object#CardParameters|CardParameters}
 */
const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedAuthMethods: allowedCardAuthMethods,
    allowedCardNetworks: allowedCardNetworks
  }
};

/**
 * Describe your site's support for the CARD payment method including optional
 * fields
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/object#CardParameters|CardParameters}
 */
const cardPaymentMethod = Object.assign(
  {},
  baseCardPaymentMethod,
  {
    tokenizationSpecification: tokenizationSpecification
  }
);

/**
 * An initialized google.payments.api.PaymentsClient object or null if not yet set
 *
 * @see {@link getGooglePaymentsClient}
 */
let paymentsClient = null;

/**
 * Configure your site's support for payment methods supported by the Google Pay
 * API.
 *
 * Each member of allowedPaymentMethods should contain only the required fields,
 * allowing reuse of this base request when determining a viewer's ability
 * to pay and later requesting a supported payment method
 *
 * @returns {object} Google Pay API version, payment methods supported by the site
 */
function getGoogleIsReadyToPayRequest() {
  return Object.assign(
      {},
      baseRequest,
      {
        allowedPaymentMethods: [baseCardPaymentMethod]
      }
  );
}

/**
 * Configure support for the Google Pay API
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/object#PaymentDataRequest|PaymentDataRequest}
 * @returns {object} PaymentDataRequest fields
 */
function getGooglePaymentDataRequest() {
  const paymentDataRequest = Object.assign({}, baseRequest);
  paymentDataRequest.allowedPaymentMethods = [cardPaymentMethod];
  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();
  paymentDataRequest.merchantInfo = {
    // @todo a merchant ID is available for a production environment after approval by Google
    // See {@link https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist|Integration checklist}
    // merchantId: '01234567890123456789',
    merchantName: 'Example Merchant'
  };
  return paymentDataRequest;
}

/**
 * Return an active PaymentsClient or initialize
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/client#PaymentsClient|PaymentsClient constructor}
 * @returns {google.payments.api.PaymentsClient} Google Pay API client
 */
function getGooglePaymentsClient() {
  if ( paymentsClient === null ) {
    paymentsClient = new google.payments.api.PaymentsClient({environment: 'TEST'});
  }
  return paymentsClient;
}

/**
 * Initialize Google PaymentsClient after Google-hosted JavaScript has loaded
 *
 * Display a Google Pay payment button after confirmation of the viewer's
 * ability to pay.
 */
function onGooglePayLoaded() {
  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.isReadyToPay(getGoogleIsReadyToPayRequest())
      .then(function(response) {
        if (response.result) {
          addGooglePayButton();
          // @todo prefetch payment data to improve performance after confirming site functionality
          // prefetchGooglePaymentData();
        }
      })
      .catch(function(err) {
        // show error in developer console for debugging
        console.error(err);
      });
}

/**
 * Add a Google Pay purchase button alongside an existing checkout button
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/object#ButtonOptions|Button options}
 * @see {@link https://developers.google.com/pay/api/web/guides/brand-guidelines|Google Pay brand guidelines}
 */
function addGooglePayButton() {
  const paymentsClient = getGooglePaymentsClient();
  const button =
      paymentsClient.createButton({onClick: onGooglePaymentButtonClicked});
  document.getElementById('container').appendChild(button);
}

/**
 * Provide Google Pay API with a payment amount, currency, and amount status
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/object#TransactionInfo|TransactionInfo}
 * @returns {object} transaction info, suitable for use as transactionInfo property of PaymentDataRequest
 */
function getGoogleTransactionInfo() {
  return {
    currencyCode: 'USD',
    totalPriceStatus: 'FINAL',
    // set to cart total
    totalPrice: '1.00'
  };
}

/**
 * Prefetch payment data to improve performance
 *
 * @see {@link https://developers.google.com/pay/api/web/reference/client#prefetchPaymentData|prefetchPaymentData()}
 */
function prefetchGooglePaymentData() {
  const paymentDataRequest = getGooglePaymentDataRequest();
  // transactionInfo must be set but does not affect cache
  paymentDataRequest.transactionInfo = {
    totalPriceStatus: 'NOT_CURRENTLY_KNOWN',
    currencyCode: 'USD'
  };
  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.prefetchPaymentData(paymentDataRequest);
}

/**
 * Show Google Pay payment sheet when Google Pay payment button is clicked
 */
function onGooglePaymentButtonClicked() {
  const paymentDataRequest = getGooglePaymentDataRequest();
  paymentDataRequest.transactionInfo = getGoogleTransactionInfo();

  const paymentsClient = getGooglePaymentsClient();
  paymentsClient.loadPaymentData(paymentDataRequest)
      .then(function(paymentData) {
        // handle the response
        processPayment(paymentData);
      })
      .catch(function(err) {
        // show error in developer console for debugging
        console.error(err);
      });
}

/**
 * Process payment data returned by the Google Pay API
 *
 * @param {object} paymentData response from Google Pay API after user approves payment
 * @see {@link https://developers.google.com/pay/api/web/reference/object#PaymentData|PaymentData object reference}
 */
function processPayment(paymentData) {
  // show returned data in developer console for debugging
  console.log(paymentData);
  // @todo pass payment data response to your gateway to process payment
}
</script>
<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()"></script>

Оставить отзыв о...

Текущей странице
Google Pay API