Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

Эта страница переведена с помощью Cloud Translation API.

Создавайте быстрые покупки в Интернете с помощью Google Pay

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

Auto T-Shirt Shop — это инновационный магазин, который использует последние достижения в области искусственного интеллекта и использует такую информацию, как предпочтения стиля, погода, время года и модные тенденции, чтобы предложить вам наиболее подходящий товар для покупки.

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

Что вы будете строить

Эта лабораторная работа поможет вам интегрировать Google Pay в существующий сайт, в том числе определить, может ли пользователь оплатить с помощью метода оплаты, поддерживаемого Google Pay, размещение и дизайн кнопки оплаты, а также выполнение транзакции.

Что вы узнаете

Как интегрировать Google Pay в существующую страницу оформления заказа
Как выбрать один из предпочтительных способов оплаты
Как определить, готов ли пользователь платить с помощью Google Pay

Что тебе понадобится

Компьютер с доступом в интернет
Базовые знания JavaScript

Запустите образец сайта на glitch.com.

Чтобы приступить к работе как можно быстрее, эта кодовая лаборатория размещена на сайте glitch.com. Glitch — это бесплатная веб-среда, которая предоставляет редактор кода, а также функции хостинга и развертывания, которые можно использовать для создания и обслуживания веб-приложений.

Чтобы начать работу, используйте кнопку ниже, чтобы предоставить новую среду разработки на Glitch, уже настроенную с копией этой кодовой лаборатории.

Запустить среду разработки на Glitch.com

С этого момента вы можете использовать редактор кода на Glitch для изменения ваших файлов. Начните обслуживать свое приложение с помощью меню « Показать» вверху и выберите «В новом окне ».

Просмотрите образец сайта

Как видите, репозиторий имеет несложную файловую структуру. Основная цель этой лаборатории кода — дать вам возможность адаптировать эту интеграцию к вашим существующим и будущим приложениям, независимо от платформы, библиотек или инструментов, с которыми вы хотите работать.

Исследуйте сайт

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

Теперь, если вы еще этого не сделали, откройте демонстрационный сайт в его текущем состоянии. Для этого нажмите кнопку « Показать» , если вы используете Glitch, или откройте URL-адрес, по которому работает ваш локальный веб-сервер.

В демо-сайте нет ничего удивительного, верно? Страница сведений о продукте с изображением, ценой, описанием, некоторыми селекторами и кнопкой для перехода к воображаемой и обычной платежной форме.

Цель этого практического занятия – заменить этот процесс взаимодействием в два клика на базе Google Pay.

Давайте спланируем это!

Чтобы лучше понять эту интеграцию, процесс разбит на следующие основные этапы:

Загрузите библиотеку
Определить возможность оплаты с помощью Google Pay
Показать кнопку для оплаты через Google Pay
Создать и отправить запрос на оплату
Соберите результаты

Добавьте тег `script`

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

Для этой лаборатории кода откройте файл index.html . Вы должны увидеть, что тег script уже включен для вас:

<script async
  src="https://pay.google.com/gp/p/js/pay.js"
  onload="onGooglePayLoaded()">
</script>

В дополнение к src вы добавили два других атрибута.

async позволяет вашему сценарию загружаться и выполняться асинхронно вместе с остальной частью страницы, так что время первой загрузки вашего документа не изменится.
onload помогает вам отложить выполнение кода, который зависит от этой библиотеки, до тех пор, пока ваш скрипт не будет загружен. После этого запускается функция, указанная вами в этом атрибуте. В данном случае функция onGooglePayLoaded .

Создайте экземпляр клиента API

Как только ваш скрипт загружен, все готово для того, чтобы вы могли начать использовать эту библиотеку. Начните с создания экземпляра объекта client, который вы будете использовать для вызовов API Google Pay позже.

Отредактируйте файл index.js , который уже является частью файловой структуры этого проекта. Замените функцию onGooglePayLoaded следующим кодом.

let googlePayClient;
function onGooglePayLoaded() {
  googlePayClient = new google.payments.api.PaymentsClient({
    environment: 'TEST'
  });
}

Платежный клиент инициализируется с помощью объекта PaymentOptions . Настройка environment на TEST позволяет вам экспериментировать с информацией о фиктивных платежах на протяжении всей интеграции. Когда вы будете готовы создавать операции, поддерживающие реальные транзакции, вы можете обновить свойство environment до PRODUCTION .

Обзор

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

Все следующие изменения кода для остальной части кода будут внесены в файл index.js .

Скелет

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

{
  apiVersion: number,
  apiVersionMinor: number,
  allowedPaymentMethods: Array
}

Свойство allowedPaymentMethods принимает список способов оплаты. Для каждого способа оплаты необходимо указать следующие свойства:

{
  type: 'CARD',
  parameters: {
    allowedCardNetworks: Array.<string>,
    allowedAuthMethods: Array.<string>
  }
}

Только type свойств и parameters необходимы, чтобы определить, может ли рассматриваемый пользователь платить с помощью Google Pay.

Конфигурация способа оплаты

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

Вот как ваша конфигурация должна быть настроена в index.js :

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

О механизмах аутентификации карт : при совершении платежей карты можно выбирать в зависимости от того, как информация о транзакции аутентифицируется процессором или шлюзом:

При использовании аутентификации по основному номеру счета (PAN) номер счета карты, а также месяц и год истечения срока действия отправляются в платежную систему. Это позволяет вашим клиентам использовать любую ранее защищенную карту, связанную с их аккаунтами Google.
Аутентификация на основе динамической криптограммы работает в сочетании с токенизацией карты — механизмом, который заменяет информацию о карте вашего клиента случайным значением, которое не может понять никто, кроме эмитента карты вашего клиента. Это, в сочетании с динамическими криптограммами, гарантирует, что токен, отправляемый процессору, всегда будет разным для каждой транзакции, что значительно повышает безопасность этих операций.

Собираем все вместе

Давайте резюмируем.

Вы определили один способ оплаты, который будет приниматься на вашем веб-сайте, и вы собираетесь работать с версией 2.0 API. Вот как должна выглядеть полученная конфигурация:

const baseCardPaymentMethod = {
  type: 'CARD',
  parameters: {
    allowedCardNetworks: ['VISA','MASTERCARD'],
    allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
  }
};

const googlePayBaseConfiguration = {
  apiVersion: 2,
  apiVersionMinor: 0,
  allowedPaymentMethods: [baseCardPaymentMethod]
};

Теперь, когда у вас есть готовая базовая конфигурация, давайте перейдем к самой интересной части.

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

Может ли ваш пользователь расплачиваться с помощью Google Pay?

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

В index.js внутри функции onGooglePayLoaded() вставьте следующее:

googlePayClient.isReadyToPay(googlePayBaseConfiguration)
  .then(function(response) {
    if(response.result) {
      createAndAddButton();
    } else {
      alert("Unable to pay using Google Pay");
    }
  }).catch(function(err) {
    console.error("Error determining readiness to use Google Pay: ", err);
  });

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

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

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

Если вам требуется, чтобы этот метод также оценивал, есть ли у рассматриваемого пользователя какой-либо активный способ оплаты, который соответствует конфигурации, указанной вами в allowedPaymentMethods , включите логическое свойство existsPaymentMethodRequired existingPaymentMethodRequired: true в объект IsReadyToPayRequest в дополнение к другим свойствам в базовой конфигурации.

Добавьте кнопку для оплаты через Google Pay

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

Чтобы сгенерировать кнопку, используйте метод createButton в объекте PaymentsClient , включая ButtonOptions для настройки кнопки.

В index.js внутри функции createAndAddButton() вставьте следующее:

function createAndAddButton() {

  const googlePayButton = googlePayClient.createButton({

    // currently defaults to black if default or omitted
    buttonColor: 'default',

    // defaults to long if omitted
    buttonType: 'long',

    onClick: onGooglePaymentsButtonClicked
  });

  document.getElementById('buy-now').appendChild(googlePayButton);
}

function onGooglePaymentsButtonClicked() {
  // TODO: Perform transaction
}

Единственное обязательное свойство при использовании createButton — это onClick , которое необходимо для определения объекта или функции обратного вызова, которые будут запускаться каждый раз, когда ваши пользователи нажимают кнопку. buttonColor и buttonType позволяют настроить внешний вид кнопки. Настройте их соответствующим образом в зависимости от темы и требований пользовательского интерфейса вашего приложения.

После создания кнопки все, что вам нужно сделать, это добавить ее в соответствующий узел в DOM. В этом примере для этой цели используется узел div , идентифицированный как buy-now .

Обратите внимание, что вы также определили функцию для обработки событий нажатия кнопки. В следующем разделе вы используете эту функцию для запроса способа оплаты.

Подготовьте запрос на оплату

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

Как и раньше, во время определения запроса isReadyToPay этого вызова также требуются свойства в объекте базовой конфигурации, определенные ранее ( apiVersion , apiVersionMinor и allowedPaymentMethods ), в дополнение к некоторым новым. На этот раз в ваших способах оплаты есть новое свойство tokenizationSpecification и дополнительные parameters , соответствующие цели этого запроса. Кроме того, необходимо добавить transactionInfo merchantInfo .

Включите дополнительную необходимую информацию в ваши способы оплаты

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

Свойство `tokenizationSpecification`

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

Поддерживаются два различных типа стратегий обработки. Если вы обрабатываете транзакцию платежа с серверов, совместимых с PCI DSS , используйте тип спецификации DIRECT . В этом примере вы используете платежный шлюз для обработки платежа, поэтому вы устанавливаете тип спецификации PAYMENT_GATEWAY .