1. Pengantar
Google Pay API memberi pengguna kesempatan untuk membayar di mana saja, menggunakan informasi pembayaran yang disimpan di Akun Google mereka. Di lab ini, Anda akan menggunakan library klien Google Pay untuk Android guna meningkatkan pengalaman pembayaran dari contoh aplikasi seluler yang disederhanakan, dengan menciptakan pengalaman yang lebih cepat, nyaman, dan aman, yang pada gilirannya menghasilkan lebih banyak konversi dan kepuasan pelanggan.
Toko Kaus Otomotif adalah toko inovatif yang memanfaatkan kemajuan terbaru dalam kecerdasan buatan dan menggunakan informasi seperti preferensi gaya, cuaca, musim, dan tren mode, menyarankan item yang paling tepat untuk dibeli kepada Anda.
Metrik engagement sudah melampaui batas. Sayangnya, angka tersebut juga mencerminkan banyaknya pengabaian selama proses pembayaran. Bertekad untuk mengatasi masalah tersebut, salah satu pemilik project ingat pernah melihat video yang menunjukkan hasil menjanjikan yang diberikan Google Pay untuk situs lain yang serupa. Jadi, dia memutuskan mencobanya dan percaya bahwa Anda menangani integrasi ini.
Ringkasan
Codelab ini akan memandu Anda dalam mengintegrasikan Google Pay ke dalam aplikasi yang sudah ada, termasuk menentukan apakah pengguna dapat membayar menggunakan metode pembayaran yang didukung oleh Google Pay, penempatan dan desain tombol pembayaran, serta pelaksanaan transaksi.
Dalam codelab ini, Anda akan mempelajari cara:
- Mengintegrasikan Google Pay ke aplikasi Android yang sudah ada
- Menentukan apakah pengguna siap membayar menggunakan Google Pay
- Menambahkan tombol Google Pay ke antarmuka pengguna
- Menyelesaikan operasi pembayaran dengan Google Pay
Prasyarat
- Git
- Android Studio atau lingkungan pengembangan alternatif untuk aplikasi Android
- Perangkat Android atau emulator yang menginstal layanan Google Play versi terbaru
Dukungan
Jika Anda mengalami kesulitan, repositori GitHub google-pay/android-quickstart berisi solusi lengkap sebagai referensi.
2. Mulai
Clone repositori dari GitHub
Gunakan perintah berikut untuk meng-clone repositori ke folder di komputer Anda:
git clone https://github.com/google-pay/android-quickstart
Atau, jika Anda memilih file ZIP:
Menelusuri aplikasi contoh
Seperti yang Anda lihat, repositori ini memiliki struktur file yang tidak rumit. Tujuan utama codelab ini ialah memberi Anda kemampuan untuk mengadaptasi integrasi ini ke aplikasi Anda yang sudah ada dan yang akan datang, apa pun bahasa pemrograman, library, atau alat yang Anda pilih untuk digunakan.
3. Membuka project di Android Studio
Repositori GitHub yang Anda clone berisi project Android dengan aktivitas dasar. Pada langkah ini, Anda akan melakukan pengeditan dalam aktivitas ini untuk memverifikasi kesiapan Google Pay dan menampilkan tombol Google Pay.
- Membuka Android Studio
- Pilih File, lalu Open
- Pilih direktori
kotlin
di repositori - Pilih Buka
Tambahkan library Google Pay sebagai dependensi di file build.gradle
Anda
- Membuka file build Gradle level modul (
kotlin/app/build.gradle.kts
) - Tambahkan koleksi Google Pay ke bagian
dependencies
implementation "com.google.android.gms:play-services-wallet:19.3.0"
- Simpan file
- Pilih File, lalu Sync Project with Gradle Files
Mengaktifkan Google Pay API di file manifes Android
Terakhir, tambahkan elemen meta-data
di dalam node application
file manifes Anda:
<meta-data
android:name="com.google.android.gms.wallet.api.enabled"
android:value="true" />
4. Tentukan tempat untuk meletakkan tombol Google Pay di antarmuka Anda
Tata letak dan keseluruhan penempatan dalam tampilan Anda merupakan aspek penting yang memengaruhi seberapa besar kemungkinan pengguna menyelesaikan transaksi pembayaran. Kemampuan untuk memilih metode pembayaran dalam beberapa ketukan menggunakan Google Pay memungkinkan opsi baru terkait tempat dan waktu untuk menawarkan cara membayar kepada pengguna dalam aplikasi Anda. Misalnya, Anda dapat menambahkan opsi checkout cepat di awal proses, di area seperti tampilan detail item, untuk memungkinkan pengguna membayar satu item yang mereka sukai dengan cepat.
Setelah Anda memutuskan cara mengatur antarmuka pengguna, langkah berikutnya adalah menempatkan tombol Google Pay. Anda dapat mengonfigurasi beberapa fitur visual tombol seperti jenis, tema, dan kebulatan sudut. Berikut beberapa contohnya:
Library Google Pay menyertakan tampilan untuk menyederhanakan penambahan tombol ke antarmuka pengguna Anda. Berikut ini cara melakukannya jika Anda membangun tata letak menggunakan XML:
<com.google.android.gms.wallet.button.PayButton
android:id="@+id/googlePayButton"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Anda nanti akan menginisialisasi tombol secara terprogram (lihat contoh).
Jika Anda menggunakan Jetpack Compose, sertakan versi terbaru dependensi berikut dalam file build.gradle
atau build.gradle.kts
:
implementation "com.google.pay.button:compose-pay-button:1.0.0"
Dan tambahkan tombol Google Pay ke tata letak Compose Anda seperti berikut:
PayButton(
modifier = Modifier
.testTag("payButton")
.fillMaxWidth(),
onClick = onGooglePayButtonClick,
allowedPaymentMethods = PaymentsUtil.allowedPaymentMethods.toString()
)
Selain itu, lihat contoh di GitHub untuk mempelajari lebih lanjut cara membuat daftar metode pembayaran yang diterima.
5. Melakukan inisialisasi dan konfigurasi Google Pay API
Membuat instance klien API
Untuk mulai menggunakan API, Anda harus membuat instance objek klien, yang Anda gunakan untuk melakukan panggilan ke Google Pay API. Anda dapat melakukannya segera setelah aktivitas atau pengontrol dibuat:
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)
}
Klien pembayaran diinisialisasi dengan objek WalletOptions. Jika lingkungan ditetapkan ke ENVIRONMENT_TEST, Anda akan dapat bereksperimen dengan menguji informasi pembayaran. Setelah siap melakukan transaksi pembayaran yang sebenarnya, Anda dapat memperbarui properti lingkungan ke ENVIRONMENT_PRODUCTION.
Anatomi permintaan Google Pay
Saat Anda mengajukan permintaan terhadap Google Pay API, ada sejumlah parameter konfigurasi yang perlu Anda sertakan dalam permintaan, seperti versi API yang Anda targetkan. Untuk keperluan codelab ini, objek ini juga berisi informasi tentang metode pembayaran yang diterima dalam aplikasi Anda. Struktur akhirnya akan terlihat sebagai berikut:
{
apiVersion: number,
apiVersionMinor: number,
allowedPaymentMethods: Array
}
Properti allowedPaymentMethods
mengambil daftar metode pembayaran. Untuk setiap metode pembayaran, Anda diharuskan menyertakan properti berikut:
{
type: 'CARD',
parameters: {
allowedCardNetworks: Array.<string>,
allowedAuthMethods: Array.<string>
}
}
Konfigurasi metode pembayaran
Untuk tujuan contoh ini, Anda hanya akan menerima pembayaran kartu untuk Mastercard dan Visa, dalam bentuk token dan nomor rekening utama (PAN). Berikut ini tampilan metode pembayaran Anda:
private val baseCardPaymentMethod =
JSONObject()
.put("type", "CARD")
.put("parameters", JSONObject()
.put("allowedCardNetworks", JSONArray(listOf("VISA", "MASTERCARD")))
.put("allowedAuthMethods", JSONArray(listOf("PAN_ONLY", "CRYPTOGRAM_3DS")))
)
Menggabungkan semuanya
Mari kita ringkas. Anda telah menentukan satu metode pembayaran yang akan diterima di aplikasi Anda, dan Anda akan bekerja dengan API versi 2.0. Berikut ini konfigurasi yang dihasilkan:
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. Menentukan kesiapan membayar dengan Google Pay
Dengan menggunakan permintaan isReadyToPay
, Anda dapat menentukan apakah pengguna di aplikasi Anda dapat melakukan pembayaran dengan Google Pay. Gunakan informasi ini untuk menyesuaikan pengalaman pengguna di aplikasi Anda.
Permintaan ini mengharuskan Anda untuk menentukan versi Google Pay API dan daftar metode pembayaran yang diizinkan di aplikasi Anda. Inilah isi objek konfigurasi dasar yang ditentukan pada langkah sebelumnya:
private suspend fun fetchCanUseGooglePay(): Boolean {
val request = IsReadyToPayRequest.fromJson(googlePayBaseConfiguration.toString())
return paymentsClient.isReadyToPay(request).await()
}
selain Google Pay API menggunakan Task
untuk me-resolve panggilan jarak jauh. Tasks API memungkinkan Anda menyelesaikan operasi Task
menggunakan coroutine. Pelajari lebih lanjut
Seperti yang dapat Anda lihat, memeriksa kesiapan untuk Membayar dengan Google Pay akan menampilkan objek boolean. Jika hasilnya positif, langkah berikutnya adalah menampilkan tombol Google Pay di antarmuka pengguna Anda. Jika tidak, pertimbangkan untuk menampilkan UI tambahan yang mendukung alat pembayaran lain.
Tampilkan tombol Google Pay
Sekarang, kembali ke antarmuka pengguna Anda dan perbarui penempatan tombol Google Pay berdasarkan hasil panggilan sebelumnya. Contoh ini menggunakan class untuk menyimpan status tampilan, yang diupdate berdasarkan input seperti panggilan ke isReadyToPay
.
if (payUiState !is PaymentUiState.NotStarted) {
PayButton(
modifier = Modifier
.testTag("payButton")
.fillMaxWidth(),
onClick = onGooglePayButtonClick,
allowedPaymentMethods = PaymentsUtil.allowedPaymentMethods.toString()
)
}
7. Waktunya pembayaran.
### Menyiapkan permintaan pembayaran
Di tahap ini, Anda telah memuat Google Pay API dan menentukan bahwa pengguna di aplikasi Anda dapat menggunakan Google Pay untuk melakukan pembayaran. Karena itu, Anda dapat menampilkan tombol pembayaran Google Pay di UI dan kini pengguna Anda telah siap untuk memulai transaksi. Sekarang saatnya memuat lembar pembayaran dengan metode pembayaran yang tersedia bagi pengguna Anda.
Serupa dengan panggilan ke isReadyToPay
, permintaan ini memerlukan properti di objek konfigurasi dasar yang ditentukan sebelumnya (apiVersion
, apiVersionMinor
, dan allowedPaymentMethods
). Kali ini, Anda juga memerlukan properti baru yang disebut tokenizationSpecification
, dan parameter tambahan untuk mendeskripsikan transaksi dan meminta informasi seperti alamat penagihan dan pengiriman, atau alamat pengguna alamat email atau nomor telepon Anda.
#### Properti tokenizationSpecification
Spesifikasi tokenisasi menentukan cara menangani dan menggunakan metode pembayaran yang dipilih oleh pengguna Anda untuk menyelesaikan transaksi.
Ada dua jenis mekanisme penanganan yang didukung. Jika Anda memproses transaksi pembayaran dari dalam server yang mendukung PCI DSS, gunakan jenis spesifikasi DIRECT
. Dalam contoh ini, Anda menggunakan gateway pembayaran untuk memproses pembayaran, sehingga Anda menetapkan jenis spesifikasi PAYMENT_GATEWAY
:
private val tokenizationSpecification = JSONObject()
.put("type", "PAYMENT_GATEWAY")
.put("parameters", JSONObject(mapOf(
"gateway" to "example",
"gatewayMerchantId" to "exampleGatewayMerchantId")))
}
Di bagian parameters
, Anda dapat menentukan gateway dari daftar penyedia yang didukung oleh Google Pay API, beserta konfigurasi tambahan yang diperlukan oleh setiap gateway. Untuk tujuan lab ini, Anda akan menggunakan gateway example
, yang menampilkan hasil pengujian untuk transaksi yang dijalankan.
Parameter tambahan
Anda juga dapat meminta detail selengkapnya dari pengguna agar dapat melakukan pemesanan. Lihat bagaimana dalam contoh ini, Anda menambahkan properti billingAddressRequired
dan billingAddressParameters
, untuk menunjukkan bahwa, untuk transaksi ini, alamat penagihan pengguna diperlukan dalam format lengkap dan menyertakan nomor telepon:
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")))
)
#### Sertakan informasi tambahan tentang transaksi
Properti transactionInfo
berisi objek dengan detail keuangan tentang transaksi, yaitu price dan kode mata uang (format alfa ISO 4217) beserta status harga, yang dapat berupa final atau diperkirakan bergantung pada sifat transaksi (mis.: harga dapat bervariasi bergantung pada alamat pengiriman yang ditentukan):
private val transactionInfo = JSONObject()
.put("totalPrice", "123.45")
.put("totalPriceStatus", "FINAL")
.put("currencyCode", "USD")
}
#### Menambahkan informasi bisnis
Permintaan pembayaran mengambil informasi tentang penjual yang melakukan permintaan berdasarkan properti merchantInfo
. Dalam codelab ini, Anda akan berfokus pada dua properti:
merchantId
menyimpan ID yang terkait dengan akun Anda. Anda bisa mendapatkan ID penjual di kolom Bayar & Konsol Wallet. Perhatikan bahwa kolom ini tidak dievaluasi saat menggunakan lingkunganTEST
.merchantName
adalah nama aplikasi atau organisasi Anda yang terlihat oleh pengguna. Informasi ini dapat ditampilkan di dalam sheet pembayaran Google Pay untuk memberikan konteks lebih lanjut kepada pengguna terkait siapa yang meminta operasi tersebut.
Setelah siap, cukup tambahkan informasi tentang penjual ke objek paymentDataRequest
:
private val merchantInfo = JSONObject()
.put("merchantName", "Example Merchant")
.put("merchantId", "01234567890123456789")
Terbitkan permintaan dan proses hasilnya
Sekarang, gabungkan objek konfigurasi dan teruskan ke permintaan loadPaymentData
:
private val paymentDataRequestJson = JSONObject(googlePayBaseConfiguration.toString())
.put("allowedPaymentMethods", JSONArray().put(cardPaymentMethod))
.put("transactionInfo", transactionInfo)
.put("merchantInfo", merchantInfo)
Di tahap ini, Anda telah memiliki semua yang Anda butuhkan untuk meminta Google Pay API guna memperoleh metode pembayaran yang valid. Untuk melakukannya, gunakan metode loadPaymentData
di objek PaymentsClient
, dengan meneruskan konfigurasi yang baru saja Anda tentukan:
fun getLoadPaymentDataTask(): Task<PaymentData> {
val request = PaymentDataRequest.fromJson(paymentDataRequestJson.toString())
return paymentsClient.loadPaymentData(request)
}
private fun requestPayment() {
val task = getLoadPaymentDataTask()
task.addOnCompleteListener(paymentDataLauncher::launch)
}
Google Pay API menggunakan Activity Result API untuk menampilkan hasil. API berisi kontrak untuk menyederhanakan pemrosesan dan reaksi terhadap hasil. Contoh ini menggunakan kontrak GetPaymentDataResult
, yang menyertakan informasi tentang operasi selain hasil pembayaran:
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
}
}
Memanggil metode ini akan memicu tampilan halaman pembayaran Google Pay. Jika tidak ada error konfigurasi, Anda dapat melihat daftar metode pembayaran yang valid terkait dengan akun yang saat ini login.
Setelah dipilih, sheet akan ditutup dan hasilnya dikirim kembali ke aktivitas Anda dan diambil oleh peluncur hasil aktivitas yang ditentukan di atas.
Jika pemilihan berhasil, hasilnya akan ditampilkan dengan objek PaymentData
yang menyertakan informasi relevan tentang metode pembayaran yang dipilih:
{
"apiVersionMinor": 0,
"apiVersion": 2,
"paymentMethodData": {
"description": "Visa •••• 1234",
"tokenizationData": {
"type": "PAYMENT_GATEWAY",
"token": "examplePaymentMethodToken"
},
"type": "CARD",
"info": {
"cardNetwork": "VISA",
"cardDetails": "1234",
"billingAddress": {
"phoneNumber": ...,
...
}
}
}
}
Anda kini dapat menggunakan metode pembayaran ini untuk menyelesaikan transaksi dengan gateway pembayaran:
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. Selamat!
Anda berhasil menambahkan Google Pay ke aplikasi Android.
### Langkah berikutnya
- Uji Google Pay di aplikasi Anda
- Dapatkan ID penjual di halaman Bayar & Konsol Wallet
- Tinjau checklist integrasi
### Pelajari lebih lanjut
- Lihat referensi API
- Memecahkan masalah integrasi jika Anda melihat error
- Lihat tutorial integrasi di dokumen untuk mendapatkan panduan tentang integrasi menggunakan bahasa pemrograman dan library lain.
- Lihat contoh aplikasi di GitHub untuk demo cara kerja yang lengkap