Membangun Pengalaman Checkout yang Cepat di Android dengan Google Pay

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:

1. Mengintegrasikan Google Pay ke aplikasi Android yang sudah ada
2. Menentukan apakah pengguna siap membayar menggunakan Google Pay
3. Menambahkan tombol Google Pay ke antarmuka pengguna
4. 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:

Download kode sumber

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.

1. Membuka Android Studio
2. Pilih File, lalu Open
3. Pilih direktori kotlin di repositori
4. Pilih Buka

Tambahkan library Google Pay sebagai dependensi di file build.gradle Anda

1. Membuka file build Gradle level modul (kotlin/app/build.gradle.kts)
2. Tambahkan koleksi Google Pay ke bagian dependencies

implementation "com.google.android.gms:play-services-wallet:19.3.0"

1. Simpan file
2. 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.

Mulai sekarang, codelab ini menggunakan Kotlin, coroutine, dan Jetpack Compose. Jika Anda menggunakan tata letak Java atau XML, lihat tutorial integrasi Java dalam dokumentasi.

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.

Penting Jika Anda sudah siap untuk beroperasi di lingkungan PRODUCTION, buka halaman Bayar & Konsol Wallet lalu ikuti langkah-langkah untuk membuat profil bisnis dan mendapatkan persetujuan integrasi untuk melakukan transaksi pembayaran.

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")))
        )

Anda dapat menemukan daftar lengkap parameter yang dapat digunakan untuk mengonfigurasi metode pembayaran CARD di bagian CardParameters dalam dokumentasi.

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.

Anda dapat mempelajari lebih lanjut persyaratan untuk setiap gateway tertentu atau melihat contoh di dokumentasi spesifikasi token.

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")))
    )

Pastikan untuk hanya meminta informasi yang benar-benar diperlukan untuk melakukan transaksi. Perhatikan bahwa meminta lebih banyak informasi dapat berdampak negatif terhadap rasio konversi.

#### 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 lingkungan TEST.
• 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
}

Lihat daftar pemroses yang didukung untuk mempelajari lebih lanjut detail penerapan tertentu.

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

Apakah informasi ini berguna menurut Anda?

Sangat berguna Sama seperti yang saya harapkan Tidak juga