Создайте возможность быстрой оплаты покупок на Android с помощью Google Pay
О практической работе
1. Введение
Google Pay API дает пользователям возможность платить где угодно, используя платежную информацию, хранящуюся в их учетных записях Google. В ходе этого лабораторного занятия вы воспользуетесь клиентской библиотекой Google Pay для Android, чтобы улучшить процесс оформления заказа в упрощенном примере мобильного приложения, создав более быстрый, удобный и безопасный процесс, что, в свою очередь, приведет к большему количеству конверсий и более счастливым клиентам.
Auto T-Shirt Shop — это инновационный магазин, который использует последние достижения в области искусственного интеллекта и, используя такую информацию, как предпочтения в стиле, погоду, время года и модные тенденции, предлагает вам наиболее подходящий товар для покупки.
Показатели вовлеченности зашкаливают. К сожалению, цифры также отражают большое количество отказов в процессе оформления заказа. Будучи преисполнен решимости решить эту проблему, один из владельцев проекта вспоминает, что видел видео, показывающее многообещающие результаты, которые Google Pay дал для других подобных сайтов , поэтому они решают попробовать и доверяют вам позаботиться об интеграции.
Обзор
В этой кодовой лаборатории вы узнаете, как интегрировать Google Pay в существующее приложение, включая определение того, может ли пользователь оплатить с помощью способа оплаты, поддерживаемого Google Pay, размещение и дизайн кнопки оплаты, а также выполнение транзакции.
В этой лаборатории вы узнаете, как:
- Интегрируйте Google Pay в существующее приложение Android.
- Определите, готов ли пользователь платить с помощью Google Pay
- Добавьте кнопку Google Pay в свой пользовательский интерфейс.
- Завершите платежную операцию с помощью Google Pay
Предварительные условия
- Гит
- Android Studio или альтернативная среда разработки приложений для Android
- Устройство Android или эмулятор с установленной последней версией сервисов Google Play.
Поддерживать
Если вы застряли, репозиторий GitHub google-pay/android-quickstart содержит полное решение для справки.
2. Начать
Клонировать репозиторий с GitHub
Используйте следующую команду, чтобы клонировать репозиторий в папку на вашем компьютере:
git clone https://github.com/google-pay/android-quickstart
Или, если вы предпочитаете zip-архив:
Просмотрите образец приложения
Как видите, хранилище имеет несложную файловую структуру. Основная цель этой лаборатории кода — дать вам возможность адаптировать эту интеграцию к вашим существующим и будущим приложениям независимо от языка программирования, библиотек или инструментов, с которыми вы решите работать.
3. Откройте проект в Android Studio.
Клонированный вами репозиторий GitHub содержит проект Android с базовым действием. На этом этапе вы отредактируете это действие, чтобы проверить готовность Google Pay и отобразить кнопку Google Pay.
- Открыть Android-студию
- Выберите «Файл» , затем «Открыть».
- Выберите каталог
kotlinв репозитории. - Выберите Открыть
Добавьте библиотеку Google Pay в качестве зависимости в файл build.gradle
- Откройте файл сборки Gradle на уровне модуля (
kotlin/app/build.gradle.kts). - Добавьте библиотеку Google Pay в раздел
dependencies.
implementation "com.google.android.gms:play-services-wallet:19.3.0"
- Сохраните файл
- Выберите «Файл» , затем «Синхронизировать проект с файлами Gradle».
Включите Google Pay API в файле манифеста Android.
Наконец, добавьте элемент meta-data внутри узла application вашего файла манифеста:
<meta-data
android:name="com.google.android.gms.wallet.api.enabled"
android:value="true" />
4. Решите, где разместить кнопку Google Pay в вашем интерфейсе.
Макет и общее размещение в ваших представлениях — важные аспекты, влияющие на вероятность того, что ваши пользователи выполнят платежную транзакцию. Возможность выбрать форму оплаты в несколько нажатий с помощью Google Pay открывает новые возможности, где и когда предлагать пользователям способ оплаты в вашем приложении. Например, вы можете добавить параметры быстрого оформления заказа на более раннем этапе процесса, в таких областях, как подробное представление элемента, чтобы пользователи могли быстро оплатить один понравившийся им товар.
После того, как вы решили, как организовать свой пользовательский интерфейс, следующим шагом будет размещение кнопки Google Pay. Вы можете настроить некоторые визуальные характеристики кнопки, такие как тип, тема и закругленность углов. Вот несколько примеров:
Библиотека Google Pay включает представление, упрощающее добавление кнопки в пользовательский интерфейс. Вот как это сделать, если вы создаете макеты с использованием XML:
<com.google.android.gms.wallet.button.PayButton
android:id="@+id/googlePayButton"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Позже вы инициализируете кнопку программно (см. пример ).
Если вы используете Jetpack Compose, включите последнюю версию следующей зависимости в файл build.gradle или build.gradle.kts :
implementation "com.google.pay.button:compose-pay-button:1.0.0"
И добавьте кнопку Google Pay в макет «Создать сообщение» следующим образом:
PayButton(
modifier = Modifier
.testTag("payButton")
.fillMaxWidth(),
onClick = onGooglePayButtonClick,
allowedPaymentMethods = PaymentsUtil.allowedPaymentMethods.toString()
)
в стороне Ознакомьтесь с примером на GitHub, чтобы узнать больше о том, как составить список принимаемых способов оплаты.
5. Инициализируйте и настройте Google Pay API
Создайте экземпляр API-клиента
Чтобы начать использовать API, вам необходимо создать экземпляр клиентского объекта, который вы используете для вызовов API Google Pay. Вы можете сделать это, как только ваша активность или контроллер будут созданы:
private val paymentsClient: PaymentsClient = createPaymentsClient(context)
fun createPaymentsClient(context: Context): PaymentsClient {
val walletOptions = Wallet.WalletOptions.Builder()
.setEnvironment(WalletConstants.ENVIRONMENT_TEST).build()
return Wallet.getPaymentsClient(context, walletOptions)
}
Платежный клиент инициализируется с помощью объекта WalletOptions . Установка среды ENVIRONMENT_TEST позволяет вам экспериментировать с информацией о тестовых платежах. Когда вы будете готовы выполнить фактические платежные транзакции, вы можете обновить свойство среды до ENVIRONMENT_PRODUCTION .
Анатомия запроса Google Pay
Когда вы отправляете запросы к Google Pay API, вам необходимо включить в свои запросы ряд параметров конфигурации, например версию API, на которую вы ориентируетесь. Для целей данной лаборатории этот объект также содержит информацию о способах оплаты, принятых в вашем приложении. Окончательная структура выглядит следующим образом:
{
apiVersion: number,
apiVersionMinor: number,
allowedPaymentMethods: Array
}
Свойство allowedPaymentMethods принимает список способов оплаты. Для каждого способа оплаты необходимо указать следующие свойства:
{
type: 'CARD',
parameters: {
allowedCardNetworks: Array.<string>,
allowedAuthMethods: Array.<string>
}
}
Конфигурация способа оплаты
В этом примере вы собираетесь принимать платежи по картам только Mastercard и Visa, как в форме токенизированного номера , так и в форме основного номера счета ( PAN ). Вот как выглядит ваш способ оплаты:
private val baseCardPaymentMethod =
JSONObject()
.put("type", "CARD")
.put("parameters", JSONObject()
.put("allowedCardNetworks", JSONArray(listOf("VISA", "MASTERCARD")))
.put("allowedAuthMethods", JSONArray(listOf("PAN_ONLY", "CRYPTOGRAM_3DS")))
)
Собираем все это вместе
Давайте подведем итоги. Вы определили один способ оплаты, который будет приниматься в вашем приложении, и собираетесь работать с API версии 2.0. Вот как выглядит полученная конфигурация:
private val baseCardPaymentMethod = JSONObject()
.put("type", "CARD")
.put("parameters", JSONObject()
.put("allowedCardNetworks", JSONArray(listOf("VISA", "MASTERCARD")))
.put("allowedAuthMethods", JSONArray(listOf("PAN_ONLY", "CRYPTOGRAM_3DS")))
)
private val googlePayBaseConfiguration = JSONObject()
.put("apiVersion", 2)
.put("apiVersionMinor", 0)
.put("allowedPaymentMethods", JSONArray(listOf(baseCardPaymentMethod)))
}
6. Определите готовность платить с помощью Google Pay
Использование запроса isReadyToPay позволяет определить, может ли пользователь вашего приложения платить с помощью Google Pay. Используйте эту информацию, чтобы соответствующим образом настроить взаимодействие с пользователем в вашем приложении.
Этот запрос требует от вас указать версию Google Pay API и список разрешенных способов оплаты в вашем приложении. Именно это и содержит объект базовой конфигурации, определенный на предыдущем шаге:
private suspend fun fetchCanUseGooglePay(): Boolean {
val request = IsReadyToPayRequest.fromJson(googlePayBaseConfiguration.toString())
return paymentsClient.isReadyToPay(request).await()
}
Кроме того, Google Pay API использует Task для разрешения удаленных вызовов. API задач позволяет решать операции Task с помощью сопрограмм. Узнать больше
Как видите, проверка готовности оплатить с помощью Google Pay возвращает логический объект. Если результат положительный, следующим шагом будет отображение кнопки Google Pay в вашем пользовательском интерфейсе. В противном случае рассмотрите возможность показа дополнительного пользовательского интерфейса, поддерживающего другие способы оплаты.
Показать кнопку Google Pay
Теперь вернитесь в пользовательский интерфейс и обновите расположение кнопки Google Pay в зависимости от результата предыдущего вызова. В этом примере используется класс для хранения состояния представления , которое обновляется на основе входных данных, таких как вызов isReadyToPay .
if (payUiState !is PaymentUiState.NotStarted) {
PayButton(
modifier = Modifier
.testTag("payButton")
.fillMaxWidth(),
onClick = onGooglePayButtonClick,
allowedPaymentMethods = PaymentsUtil.allowedPaymentMethods.toString()
)
}
7. Пришло время платить!
### Подготовьте запрос на оплату
На этом этапе вы загрузили API Google Pay и определили, что пользователь вашего приложения может использовать Google Pay для совершения платежа. В результате вы показали кнопку оплаты Google Pay в пользовательском интерфейсе, и теперь ваш пользователь готов инициировать транзакцию. Теперь пришло время загрузить лист оплаты со способами оплаты, доступными для вашего пользователя.
Подобно вызову isReadyToPay , для этого запроса требуются свойства в базовом объекте конфигурации, определенном ранее ( apiVersion , apiVersionMinor и allowedPaymentMethods ). На этот раз вам также понадобится новое свойство tokenizationSpecification и дополнительные параметры для описания транзакции и запроса информации, такой как адреса выставления счетов и доставки, адреса электронной почты или номера телефонов пользователей.
#### Свойство tokenizationSpecification
Спецификация токенизации определяет, как метод оплаты, выбранный вашими пользователями, обрабатывается и используется для завершения транзакции.
Поддерживаются два различных типа механизмов обработки. Если вы обрабатываете платежную транзакцию на своих серверах, совместимых с PCI DSS, используйте тип спецификации DIRECT . В этом примере вы используете платежный шлюз для обработки платежа, поэтому вы устанавливаете тип спецификации PAYMENT_GATEWAY :
private val tokenizationSpecification = JSONObject()
.put("type", "PAYMENT_GATEWAY")
.put("parameters", JSONObject(mapOf(
"gateway" to "example",
"gatewayMerchantId" to "exampleGatewayMerchantId")))
}
В разделе parameters вы можете указать шлюз из списка провайдеров, поддерживаемых Google Pay API , а также дополнительную настройку, необходимую для каждого шлюза. Для целей этой лабораторной работы вы будете использовать example шлюза, который возвращает результаты тестирования выполненных транзакций.
Дополнительные параметры
Аналогичным образом вы можете запросить у своего пользователя более подробную информацию, чтобы успешно разместить заказ. Посмотрите, как в этом примере вы добавляете свойства billingAddressRequired и billingAddressParameters , чтобы указать, что для этой транзакции требуется платежный адрес пользователя в полном формате, включая номер телефона:
private val cardPaymentMethod = JSONObject()
.put("type", "CARD")
.put("tokenizationSpecification", tokenizationSpecification)
.put("parameters", JSONObject()
.put("allowedCardNetworks", JSONArray(listOf("VISA", "MASTERCARD")))
.put("allowedAuthMethods", JSONArray(listOf("PAN_ONLY", "CRYPTOGRAM_3DS")))
.put("billingAddressRequired", true)
.put("billingAddressParameters", JSONObject(mapOf("format" to "FULL")))
)
#### Включите дополнительную информацию о транзакции
transactionInfo содержит объект с финансовыми сведениями о транзакции, а именно цену и код валюты (альфа-формат ISO 4217 ), а также статус цены , который может быть окончательным или приблизительным в зависимости от характера транзакции (например. : цена может меняться в зависимости от указанного адреса доставки):
private val transactionInfo = JSONObject()
.put("totalPrice", "123.45")
.put("totalPriceStatus", "FINAL")
.put("currencyCode", "USD")
}
#### Добавление информации о вашей компании
Запрос платежа принимает информацию о продавце, выполняющем запрос, в свойстве merchantInfo . В этой лаборатории кода вы сосредоточитесь на двух свойствах:
-
merchantIdсодержит идентификатор, связанный с вашей учетной записью. Вы можете получить свой идентификатор продавца в консоли Pay & Wallet . Обратите внимание, что это поле не оценивается при использовании средыTEST. -
merchantName— это видимое пользователю название вашего приложения или организации. Это может быть показано внутри платежной таблицы Google Pay, чтобы предоставить пользователям больше информации о том, кто запрашивает операцию.
Когда все будет готово, просто добавьте информацию о продавце в объект paymentDataRequest :
private val merchantInfo = JSONObject()
.put("merchantName", "Example Merchant")
.put("merchantId", "01234567890123456789")
Отправьте запрос и обработайте результат
Теперь соберите объект конфигурации и передайте его в запрос loadPaymentData :
private val paymentDataRequestJson = JSONObject(googlePayBaseConfiguration.toString())
.put("allowedPaymentMethods", JSONArray().put(cardPaymentMethod))
.put("transactionInfo", transactionInfo)
.put("merchantInfo", merchantInfo)
На этом этапе у вас есть все необходимое, чтобы запросить у Google Pay API действительную форму оплаты. Для этого используйте метод loadPaymentData в объекте PaymentsClient , передав только что определенную конфигурацию:
fun getLoadPaymentDataTask(): Task<PaymentData> {
val request = PaymentDataRequest.fromJson(paymentDataRequestJson.toString())
return paymentsClient.loadPaymentData(request)
}
private fun requestPayment() {
val task = getLoadPaymentDataTask()
task.addOnCompleteListener(paymentDataLauncher::launch)
}
API Google Pay использует API результатов активности для возврата результата. API содержит контракты для упрощения обработки и реагирования на результат. В этом примере используется контракт GetPaymentDataResult , который помимо результата платежа включает информацию об операции:
private val paymentDataLauncher = registerForActivityResult(GetPaymentDataResult()) { taskResult ->
when (taskResult.status.statusCode) {
CommonStatusCodes.SUCCESS -> {
taskResult.result!!.let {
Log.i("Google Pay result:", it.toJson())
// TODO something with the result
}
}
CommonStatusCodes.CANCELED -> // The user canceled
AutoResolveHelper.RESULT_ERROR -> // The API returned an error (it.status: Status)
CommonStatusCodes.INTERNAL_ERROR -> // Handle other unexpected errors
}
}
Вызов этого метода запускает представление платежного листа Google Pay. Если ошибок конфигурации нет, вы можете увидеть список действительных способов оплаты, связанных с текущей учетной записью.
После выбора лист закрывается, а результат отправляется обратно в вашу активность и фиксируется средством запуска результатов активности, определенным выше.
Если выбор успешен, результат возвращается с объектом PaymentData , который включает соответствующую информацию о выбранном способе оплаты:
{
"apiVersionMinor": 0,
"apiVersion": 2,
"paymentMethodData": {
"description": "Visa •••• 1234",
"tokenizationData": {
"type": "PAYMENT_GATEWAY",
"token": "examplePaymentMethodToken"
},
"type": "CARD",
"info": {
"cardNetwork": "VISA",
"cardDetails": "1234",
"billingAddress": {
"phoneNumber": ...,
...
}
}
}
}
Теперь вы можете использовать этот способ оплаты для завершения транзакции с вашим платежным шлюзом:
private fun handlePaymentSuccess(paymentData: PaymentData) {
val paymentMethodToken = paymentData
.getJSONObject("tokenizationData")
.getString("token")
// Sample TODO: Use this token to perform a payment through your payment gateway
}
8. Поздравляем!
Вы успешно добавили Google Pay в приложение Android.
### Следующие шаги
- Протестируйте Google Pay в своем приложении
- Получите идентификатор продавца в консоли Pay & Wallet.
- Просмотрите контрольный список интеграции
### Узнать больше
- Ознакомьтесь со справкой по API
- Устраните неполадки с интеграцией, если вы видите ошибки
- Ознакомьтесь с руководством по интеграции в документации, чтобы получить рекомендации по интеграции с использованием других языков программирования и библиотек.
- Обратитесь к примеру приложения на GitHub для получения полной рабочей демонстрации.